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

  • 没有增值税专用发票开具证明
  • 合伙企业当年盈亏怎么算
  • 公司注销前欠客户钱
  • 进销存工作流程
  • 计入损益的税
  • 所有者权益股东权益
  • 从事股权投资业务如何界定
  • 代扣代缴增值税怎么做账
  • 异地项目预缴个人所得税
  • 行政单位明细账包括哪些
  • 公司利润如何提取避税
  • 事业单位存货盘亏会计分录
  • 补偿金超过平均工资三倍
  • 房地产预售款收条怎么写
  • 异地施工预缴税款会计分录
  • 进口是关税不得抵扣吗?
  • 蓝字发票是什么
  • 商场 折扣
  • 实际缴纳的增值税税额怎么算
  • 财务费用在汇算清缴时填哪里科目
  • 契税纳税义务发生时间税屋
  • 员工离职补偿金可以税前扣除吗
  • 银行借款利息支出可以税前扣除吗
  • 计提利息收入怎么做账
  • 代账会计的职责
  • 企业收到利息收入开发票吗
  • 经营租赁是什么意思
  • linux中的
  • 汽车空调不制冷的原因有六种
  • php查询今天日期
  • 行政事业单位转让不动产
  • 增值税减免税的征管规定有哪些
  • 手把手教你安装nvidia驱动
  • yolo目标识别
  • php使用mysql
  • thinkphp session存放位置
  • vue-print-nb-jeecg
  • 无纸化的好处和坏处
  • 小微企业能申请留抵退税吗?
  • php上传不了文件
  • mysql入门很简单
  • 房地产公司计提税金
  • 研发费用计入什么表
  • 税务已注销工商如何注销
  • 跨年租金如何处理
  • 公司交残保金是什么意思
  • 机票会计代理如何做
  • 购买土地的入账价值包括什么
  • 出口退税暂不抵税怎么办
  • 人力资源公司劳务费发票税率
  • 代扣代缴的个人所得税在现金流量表
  • 合伙企业所得税率
  • 展位费按多少税率
  • 给职工发放的米面油记入什么
  • windows7禁用usb
  • xp系统无法启动怎么办
  • xp能不能升级win10
  • windows ftp软件
  • windows10更新最新版本
  • f11一键恢复系统详解
  • ubuntu系统怎么安装微信
  • centos vi命令
  • centos无法挂载位置
  • 一开机弹出个微软重新设定
  • pavsrv50.exe - pavsrv50进程管理信息
  • Win10红石版Edge浏览器新扩展功能:关灯(附扩展程序使用)
  • unity udim
  • bat定义函数
  • 命令行批处理文件
  • redis基础教程
  • python jsonp
  • 农村医保网上如何查询
  • 差额征税可以全部抵成本么?
  • 船舶吨税的税率怎么算
  • 病历证明在医院保存多久
  • 小规模纳税人租赁房屋税率
  • 税务局 周六
  • 核定征收需要报财务报表吗
  • 山东省关于公务员社会信用考察的规定
  • 异辛烷征收消费税2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设