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

  • 投资收益收到的现金小于投资收益
  • 转登小规模以前的留抵税额能申请退吗
  • 直接收到货款也要走应收账款吗
  • 金税盘备份文件名
  • 会计科目的设置
  • 财政科技经费专项拨款的会计处理
  • 短期薪酬是会计科目么
  • 包装成本为产品的百分比
  • 收到分包工程发票怎么做分录
  • 冲减预付账款怎么记账
  • 当月支付租金没有发票
  • 处置交易性金融资产发生的交易费用
  • 分公司注销所得税
  • 国税的应交税款在地税的财务报表上怎么填?
  • 异地预缴税款怎么做分录
  • 生活垃圾处理项目基础金融产品包括
  • 总公司集中支付说明
  • 迁出注销类别怎么写
  • 为什么要结转成本差异
  • 一般纳税人简易征收3%可以开专票吗
  • 工资现金发放的零头入账
  • 企业自然人电子税务局怎么申报
  • 累计摊销在资产里怎么算
  • 内部应收账款计算公式
  • 装修公司开专票要交几个点
  • 重装系统j
  • filecopyutils.copy上传文件
  • fpassist.exe是什么进程 有什么作用 fpassist进程查询
  • 包装物押金收入是否计入销售额
  • 库存商品损失怎么做账
  • 黄喉蜂虎鸟是保护动物吗
  • 包装物应交消费税
  • 搭建本地http服务器
  • python 平均函数
  • 变更法人需要什么流程
  • 考试费开什么发票税目
  • mysql命令行如何命令行导出查询结果并导入
  • json转pojo
  • 企业哪些增值税免征
  • 应收账款损失率计算公式
  • 累计折旧借贷方向表示什么意思
  • 进项抵扣项目
  • 全资子公司的利润怎么记录母公司报表
  • 小商户怎么打发票
  • 专项应付款支出的账务处理
  • 工程施工的保险费的账务处理
  • 出口退税免抵退税额要交城建税吗
  • 计提坏账准备不属于企业的或有事项
  • 保险公司赔付进项税
  • 公司不按照劳动法给工资怎么办
  • 养老院老人摔倒责任划分
  • win7怎么调整
  • vista下实现秘密下载的解决办法
  • windowsxp删除所有内容
  • mac怎么f9
  • 一键ghost U盘版
  • 通过修改注册表修改edge主页
  • 安装win7旗舰版用户名和密码是多少
  • win8系统怎么远程电脑
  • ubuntu rhythmbox乱码解决方法
  • 电脑怎么装双系统win10和linux
  • winxp优化设置
  • mobile window
  • linux 消耗内存命令
  • win10 20h2怎么更新
  • element拖拽
  • python三角形角度
  • unity2020商店
  • vue实现分页功能
  • 小说温故知新
  • jquery地址
  • shell脚本-lt
  • jquery中选择器有哪些
  • js 模板框架
  • android图片压缩库
  • 青海国家税务局总局官网
  • 征管法第六十九条
  • 可转债中签当天扣款吗
  • 转租房子转租人需要签合同吗合法吗
  • 湖北省国家税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设