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

  • 详述关税的种类和征收方法
  • 招待费专票不可以抵扣
  • 有进项发票还用交税
  • 开发票要多交费正常吗?
  • 长期投资换入固定资产如何处理
  • 公司转让住房是什么意思
  • 转租的门面怎么办营业执照
  • 保证金抵扣货款合同
  • 退货或者销毁处理
  • 汽车公司场地租金怎么算
  • 外商投资企业母公司派到境内职员回国后
  • 小型微利企业所得税优惠政策
  • 出租房屋房产税怎么算
  • 如何确认是否要割包皮
  • 企业申请资产损失需要提供哪些确认证据?
  • 期末未分配利润大于期初未分配利润+期末净利润
  • 产值和营业收入哪个数值大
  • 诉讼费计入哪里
  • 用苹果macbook pro怎样
  • windows11下载后怎么安装
  • 出差补助没有发票可以直接入账吗
  • 房地产公司的存货分析
  • 股东投资追加款怎么做账
  • kb4532945安装失败
  • linux桌面不见了
  • 现在windows11
  • 公司认缴出资怎么交税
  • 报错代码678什么意思
  • 港田路凤凰城
  • 问题解决能力
  • 克扣拆迁款
  • 固定资产维修费计入固定资产吗
  • php字符串转浮点型
  • 车子的保险费
  • 个人所得税完整证明
  • 网上蛋糕商城jsp页面
  • photo-sphere-viewer中文文档
  • php读写xml
  • 拿到领料单如何做账
  • 应付款项怎么填列
  • discuz怎么添加diy模块
  • 结转完工产品成本的会计分录
  • 理财收益 投资收益
  • 公允价值变动损益
  • 建筑企业未按规定预缴增值税
  • excel随机抽取n行数据
  • sql server数字类型
  • sql server 2008 怎么使用
  • 企业所得税的税收筹划
  • 用友t6操作流程
  • 会计法中单位负责人均指法定代表人
  • 会计账簿登记错误
  • 高新技术企业的申报条件
  • 逾期交房违约金 已支付金额
  • 企业利润总额计算例题及答案
  • 减免税款借方有利息吗
  • 小规模开票额度有限制吗
  • 交通运输行业指什么
  • 房屋租赁合同印花税的税率
  • 挂靠企业电费如何处理?
  • 一个身份证可以实名几个qq
  • 数据库表的行数
  • win8.1怎么用
  • os x 10.10 yosemite自动纠正怎么关?os x yosemite自动纠正功能关闭教程
  • win10创建系统还原点有什么用
  • win7怎连蓝牙
  • 缩放打印到一张a4纸上设置
  • android获取位置信息
  • chrome version
  • 天气球球怎么下载
  • jquery拖拽流程布局
  • pythondjango框架 目录结构
  • python解决方案与程序有什么不同
  • python 变参
  • 广东电子税务局电话
  • 地方税务局部门有哪些
  • 焦作国税局官网
  • 江苏契税补贴怎么领取
  • 美国汽车进口关税25%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设