位置: IT常识 - 正文

vue3使用svg图标多种方式(vue引用svg矢量图)

编辑:rootadmin
vue3使用svg图标多种方式

推荐整理分享vue3使用svg图标多种方式(vue引用svg矢量图),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue svga,vue中使用svg图标,vue3 svg,vue-svg-loader,vue中使用svg图标,vue svgicon,vue3 svg,vue3 svg,内容如对您有帮助,希望把文章链接给更多的朋友!

方式1使用在线链接访问 在iconfont找到自己的项目的图标选择Symbol获取在线链接 2:在vue3项目中找到public的index.html进行script进行引入

打开浏览器看:这样就会自动注入到body下

在项目直接使用

//控制图标的大小 <svg style="width: 10px; height: 10px"> <use href="#icon-shanchu"></use> </svg>

显示出了删除的图标

封装的写法(上面的代码写着太重复下面进行封装) 1:新建一个专门获取svg图标的组件 icon.vue (svg/index.vue)

<template> <div> <svg :style="style"> <use :href="names"></use> </svg> </div></template><script setup>import { defineProps, withDefaults } from "vue";const props = defineProps({ name: { type: String, default: "", }, style: { type: Object, default: () => { return { width: 10, height: 10, color: "", }; }, },});const names = `#${props.name}`;</script><style lang="scss" scoped></style>vue3使用svg图标多种方式(vue引用svg矢量图)

需要显示图标的界面

<template> <div class="home"> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon> </div></template><script setup>import { ref } from "vue";import icon from "../assets/svg/index.vue";</script><style lang="scss"></style>

假如你既引用了iconfont的图标也自定义了图标:直接放在一起根据传输的name指定使用哪一个图标 icon.vue (svg/index.vue)

<template> <div> <svg :style="style"> <use :href="names"></use> </svg> // 自定义的图标 <svg width="0" height="0"> <defs> <symbol id="more" viewBox="0 0 100 100"> <circle r="5" cx="20" cy="25" fill="transparent" stroke="green" ></circle> <circle r="5" cx="20" cy="50" fill="currentColor"></circle> <circle r="5" cx="20" cy="75" fill="currentColor"></circle> <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="currentColor" ></line> <line x1="40" y1="50" x2="90" y2="50" stroke-width="8" stroke="currentColor" ></line> <line x1="40" y1="75" x2="90" y2="75" stroke-width="8" stroke="currentColor" ></line> </symbol> </defs> </svg> </div></template><script setup>import { defineProps, withDefaults } from "vue";const props = defineProps({ name: { type: String, default: "", }, style: { type: Object, default: () => { return { width: 10, height: 10, color: "", }; }, },});const names = `#${props.name}`;</script><style lang="scss" scoped></style>

使用:

<template> <div class="home"> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu1" ></icon> <icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon> </div></template><script setup>import { ref } from "vue";import icon from "../assets/svg/index.vue";</script><style lang="scss"></style>

假如你是复制的iconfont官网的图标svg的代码:

你直接cv到项目也可以直接使用:

<svg t="1673881805558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1076" width="200" height="200" > <path d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z" p-id="1077" ></path> </svg>

效果如下:

我们还可以把上面的代码进行改造直接使用在 icon.vue (svg/index.vue)改造

<template> <div class="home"> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu" ></icon> <icon :style="{ width: 10, height: 10, color: 'red' }" name="icon-shanchu1" ></icon> <icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon> <svg t="1673881805558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1076" width="200" height="200" > <path d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z" p-id="1077" ></path> </svg> //改造好了直接使用 <icon :style="{ width: 20, height: 20, color: 'red' }" name="icon"></icon> </div></template><script setup>import { ref } from "vue";import icon from "../assets/svg/index.vue";</script><style lang="scss"></style>

本文链接地址:https://www.jiuchutong.com/zhishi/293156.html 转载请保留说明!

上一篇:Vue实现生成二维码(vue生成二维码分享)

下一篇:【swinUnet官方代码测试自己的数据集(已训练完毕)】

  • 财务软件回收
  • 小规模纳税人普票交税吗
  • 保险公司车险理赔款如何入账
  • 无形资产登记什么明细账
  • 电子发票可以更改备注吗
  • 一般纳税人10万以下免什么税
  • 出售投资性房地产时,按其账面价值结转到主营业务成本
  • 租的厂房水电费开不了发票怎么办
  • 自建的固定资产入账价值具体包括哪些
  • 税前扣除的职工福利费标准
  • 固定资产融资租赁账务处理
  • 车间领用周转材料会计分录怎么写
  • 房租当月无发票怎么办
  • 慈善机构捐赠
  • 预收账款发货
  • 报销发票财务一旦作废报销人可以收回吗?
  • 会务费税率是多少 2021
  • 代开专用发票的数量单价单位怎么写?
  • 自查补缴税款严重吗
  • 退休人员工资所得税纳税调整
  • 银行手续费做账漏掉
  • 无法支付的其他应付款可以用现金核销吗
  • 防伪税控技术维护费怎么申报
  • 库存的物资
  • 企业收到财政专项资金账务处理
  • 营业范围是销售范围吗
  • linux 界面卡死
  • win10专业版激活密钥永久
  • 利率和利息的区别白话
  • 前任会计很多错账
  • win7系统咋样
  • 如何使用wordpress建站
  • 共用水电无法取水怎么办
  • css禁用button按钮
  • 债券利息计算方法
  • laravel添加数据
  • 公司偷税漏税有哪些表现形式
  • 利息收入发票能抵扣吗
  • thinkphp d
  • 印花税应税凭证数量是什么意思
  • jsp做登录界面
  • 芝麻信用app
  • 外埠存款通过哪个会计账户核算?
  • 会计科目借贷方向图表
  • 税控服务费在电子税务局表一里怎么填写
  • 预先支付的房租
  • 年末应交税费怎么算
  • 不动产物权归属和内容的根据是什么?
  • 所有者权益变动表怎么填 实例
  • python time.ctime()如何做时间加减法
  • pythonjam怎么用
  • 所有小规模都能开专票吗
  • 财务负责人和法人可以一个人吗
  • 增值税怎么开
  • 结转损益结转了两次咋办
  • 发票金额比实际付款多怎么做账
  • 公司注销应收账款如何转让给第三方
  • 小规模纳税人增值税专用发票税率
  • 汇算清缴步骤及处理方法
  • 解除合同补偿金需要缴纳个税吗
  • 仓库员工工资
  • 库存商品主要包括
  • 金蝶财务软件服务器
  • 餐饮打包盒 标准
  • 个体户能开建筑劳务发票吗
  • mysql in的子查询
  • mysql查看使用情况
  • window10打补丁
  • win7鼠标右键没有压缩文件
  • win10 10月更新
  • mac更新系统版本
  • mac不用密码
  • mmc.exe是什么
  • ssh远程登录设置
  • textview可以点击吗
  • c# opengl 3d
  • 前端面试题csdn
  • windows和linux的区别
  • jabsorb笔记_几个小例子第1/2页
  • 预约怎么缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设