位置: 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官方代码测试自己的数据集(已训练完毕)】

  • 补缴以前年度企业所得税如何填报汇算清缴表
  • 增值税普通发票和电子普通发票的区别
  • 税款必须要15号之前交吗
  • 机票抵扣进项只能在发生当月吗
  • 向投资者支付的股息红利等权益性投资收益款项
  • 通讯费没有公司抬头怎么报销
  • 研发费用 会计核算
  • 消费卡预付卡能入账吗
  • 预计负债计提时调减还是调增
  • 高速过路费抵扣增值税
  • 预收账款转为主营业务收入
  • 未分配利润应该在借方还是贷方??
  • 营业收入不开发票
  • 营改增后工业企业税率是多少?
  • 建筑企业无票支出如何处理
  • 库存现金进账单会计分录
  • 个人承包集体企业违法吗
  • 收到的支票背书怎么写
  • 打印企业银行流水需要密码吗
  • 多交附加税怎么做账
  • 中国石化开的增值税票是几个点的
  • 浅谈25年Linux内核开发经历总结出来的九条经验
  • 直接人工分配按计时工资怎么分
  • thinkphp6调用模型的方法
  • 情人节海报怎么画简单
  • 研发费用的会计和税法的不同
  • 当财务报表中列报对应数据时
  • 运输发票税金怎么算
  • 费用的结转是在借方还是贷方
  • 商品流通企业库存商品的核算方法主要有
  • 长期股权投资追加投资
  • 对公结售汇的合规风险
  • cjzc框架
  • 到2023年
  • yii框架教程
  • spring5和6差别大吗
  • 所得税季度申报表怎么填
  • 可供出售金融资产新准则叫什么
  • 酒店收取电费合理吗
  • 经审计的财务报表是否要会计师事务所盖章
  • 个税更改公司怎么操作
  • 跨年租金如何确认收入
  • 教育行业税收优势分析
  • 小规模纳税人可以开票吗?
  • 未认证和未抵扣的区别
  • 个体户定额征收后还要报税吗
  • 金融企业有
  • 未取得发票如何报销
  • 红字发票如何做账
  • 收不回来的问题
  • 计提未到期责任准备金的意义
  • 增值税期末留抵税额是什么意思
  • 购买的活动板房可以退吗
  • 冲上月暂估入账的 会计分录
  • 用友T3怎么结转成本费用
  • 融资手续费计入长期待摊
  • 计入固定资产的条件
  • sql中的存储过程
  • 多种工具安装系统怎么用
  • win8本地账户
  • linux如何查看防火墙配置
  • windows8如何使用
  • win8适用的pr
  • 红石id
  • 史上最全的领域学说
  • bootstrap treeview 扩展addNode方法动态添加子节点的方法
  • 浅谈特殊儿童的融合教育论文
  • win7安装要求配置
  • 关闭默认共享和共享文件夹
  • cocos 2dx
  • python自动截图
  • express app.js
  • python开发者文档
  • nodejs require原理
  • 深入理解计算机系统
  • jQuery xml字符串的解析、读取及查找方法
  • 广东每年交多少税给国家
  • 网上税务局网址
  • 青霉素过敏是因为提纯不好吗
  • 河南机构改革人员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设