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

  • 营业外收入需要缴纳什么税
  • 所得税费用税前扣除项目
  • 一张报关单可以分两次退税吗
  • 技术服务税率是多少 现金
  • 集团内部借款利息可以税前扣除吗
  • 注册个人独资企业和有限公司哪个好
  • 替票可以写入费用报销制度吗?
  • 增值税普票需要进项吗
  • 车船税已代扣代缴怎么办
  • 公司注销要给钱吗
  • 年薪制与月薪制的优与劣
  • 对员工的罚款怎么做账
  • 工程施工方安全责任
  • 加权平均数是什么意思的权
  • 房地产税开征的利弊分析
  • 事业单位 年终
  • 房地产增值税结转收入的条件是什么
  • 以前年度损益调整属于哪类科目
  • 城镇土地使用税征收范围
  • 预提费用新会计准则叫什么科目
  • 栗耳簇舌巨嘴鸟,巴西潘塔纳尔保护区里 (© Ana Gram/Shutterstock)
  • 记账凭证的摘要怎么填写
  • 为庆祝中秋而摆放的东西
  • Smarty实现页面静态化(生成HTML)的方法
  • [Vue]Vue3学习笔记(尚硅谷)
  • vue图片点击放大
  • php制作日历代码
  • 工资的会计账务处理
  • 利息收入的会计科目怎么做
  • 担保贷款借款人征信不好有影响吗
  • 员工业余自学
  • 无形资产和固定资产减值准备可以转回吗
  • 个税申报报的是已离职的员工员工投诉
  • mysql5.7.27安装与配置
  • 技术服务型公司如何做账务处理
  • 没有发票的福利支出如何入帐
  • 吸收合并需要清算嘛
  • 外企可以申请高新技术
  • 地税发票丢失应如何处理
  • 租单位的房子怎么办营业执照
  • 帐务处理是指什么工作
  • 单位食堂账目
  • 购入货物的运费计入
  • 新冠捐款捐物新闻
  • 过户车子需要带什么证件
  • 涉外收入申报单盖章
  • 递延所得税负债会计分录
  • 亏损企业所得税汇算清缴后调减
  • 事业单位实收资本如何做账
  • 产品生产完工入库
  • 弃置费用预计负债的会计处理
  • 进项税转出税额
  • 双倍余额递减法最后两年怎么算
  • 城建税教育费附加会计分录
  • 小规模公司怎么做账
  • mysql 绿色版安装
  • win10怎么添加
  • win7怎么添加自启动程序
  • win10以管理员身份登录电脑
  • Win10 Mobile RS2预览版14951升级遭遇卡在0%的解决办法
  • ubuntu20.04 vim
  • ps到底怎么用
  • linux常用命令csdn
  • linux条件判断
  • 选择打开程序
  • w10自启
  • win10一年更新一次
  • win7怎么提升电脑性能
  • Win10系统怎么截图快捷键
  • Android中SurfaceView的使用详解
  • 音频焦点是什么
  • Android游戏开发实训总结
  • dos内部命令大全
  • listview点击获取内容
  • unity rp
  • javascript default
  • 电子税务局如何下载财务报表
  • 如何理解税收制度的含义
  • 酒店不给住怎么办
  • 税务坚定理想信念心得体会
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设