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

  • 支付宝怎么解除拉黑(支付宝怎么解除闲鱼绑定)

    支付宝怎么解除拉黑(支付宝怎么解除闲鱼绑定)

  • 正在运行ussd代码什么意思(正在运行ussd代码怎么办)

    正在运行ussd代码什么意思(正在运行ussd代码怎么办)

  • 电脑睡眠模式无法唤醒(电脑睡眠模式无视频输入)

    电脑睡眠模式无法唤醒(电脑睡眠模式无视频输入)

  • word属于什么软件(word属于什么软件 文字处理 操作系统)

    word属于什么软件(word属于什么软件 文字处理 操作系统)

  • 功放的av是什么意思(功放机上的a和b是什么意思)

    功放的av是什么意思(功放机上的a和b是什么意思)

  • 苹果的闹钟为什么关了还是会叫(苹果的闹钟为什么不提示多久以后会响)

    苹果的闹钟为什么关了还是会叫(苹果的闹钟为什么不提示多久以后会响)

  • 淘宝账号降权了,什么时候可以恢复正常呢(淘宝账号降权了可以注销吗)

    淘宝账号降权了,什么时候可以恢复正常呢(淘宝账号降权了可以注销吗)

  • 抖音免流量包是看抖音不用流量么(抖音免流包划算吗)

    抖音免流量包是看抖音不用流量么(抖音免流包划算吗)

  • 苹果手机sos紧急联络按了会发生什么(苹果手机sos紧急求助怎么设置联系人)

    苹果手机sos紧急联络按了会发生什么(苹果手机sos紧急求助怎么设置联系人)

  • 键盘rgb版是什么意思(键盘rgb有啥用)

    键盘rgb版是什么意思(键盘rgb有啥用)

  • 目前有512g的手机有哪几款(目前有512g的手机最低多少钱)

    目前有512g的手机有哪几款(目前有512g的手机最低多少钱)

  • ip层的地位和作用(ip层的主要协议和作用)

    ip层的地位和作用(ip层的主要协议和作用)

  • 快手推广审核要多久(快手推广审核要多久通过)

    快手推广审核要多久(快手推广审核要多久通过)

  • ios11怎么换铃声(苹果手机11换铃声)

    ios11怎么换铃声(苹果手机11换铃声)

  • Apple Watch怎么取消静音(apple watch怎么取消密码)

    Apple Watch怎么取消静音(apple watch怎么取消密码)

  • 优活手环充电几小时(优活手环充电几小时能用)

    优活手环充电几小时(优活手环充电几小时能用)

  • 拼多多怎样下单(拼多多怎样下单两件)

    拼多多怎样下单(拼多多怎样下单两件)

  • qq关注频繁怎么解决(qq关注频繁怎么取消)

    qq关注频繁怎么解决(qq关注频繁怎么取消)

  • 苏宁0元试用怎样被选上(苏宁易购零元试用)

    苏宁0元试用怎样被选上(苏宁易购零元试用)

  • 上不去网怎么回事(上不去网了什么原因)

    上不去网怎么回事(上不去网了什么原因)

  • 迅雷路由多少钱 迅雷路由器价格是多少(dir852迅雷路由器)

    迅雷路由多少钱 迅雷路由器价格是多少(dir852迅雷路由器)

  • 【数字孪生】UE4虚幻引擎与前端Web页面的结合(数字孪生demo)

    【数字孪生】UE4虚幻引擎与前端Web页面的结合(数字孪生demo)

  • 动态内存的开辟(动态内存管理)

    动态内存的开辟(动态内存管理)

  • Cookie会话跟踪技术(cookie 会话)

    Cookie会话跟踪技术(cookie 会话)

  • 个税应纳税所得额是要上交的钱吗
  • 房产税如何申报流程
  • 跨月能更正个税吗
  • 去年的财务报表可以更正申报吗
  • 未休年假补助
  • 银行承兑质押金的会计分录
  • 建筑企业增值税怎么算
  • 公司开办费有哪些
  • 保证金存款余额
  • 冲以前年度暂估
  • 免费赠送物业费活动语句怎么写
  • 报销增值税专票绿的
  • 产品成本计算的公式
  • 购买沙子违法吗
  • 企业购买银行理财
  • 员工无息借款个人所得税
  • 没有计提12月底的工资
  • 营改增后房地产开发企业需要交哪些税?
  • 进项发票已经抵扣怎么做退回处理
  • 红字冲回上月收入
  • 未分配利润可以转实收吗
  • 建筑工程确认收入条件
  • 未开发土地可否转给子公司
  • 小规模可以不报增值税吗
  • 外购货物评估减值要转出进项税额吗?
  • 受赠房屋涉及哪些税?
  • 个人借公司款账务处理
  • 生产成本和制造费用属于存货吗
  • 外地预缴增值税可以抵本地增值税
  • 土地溢价的成本包括
  • 企业所得税汇算表
  • 土地使用权评估中的成本法
  • 七喜v8笔记本
  • php实现上传图片功能
  • 360devm.sys是什么文件
  • PHP:session_register_shutdown()的用法_Session函数
  • 即期结售汇期限包括
  • el-input_inner
  • 小微企业免教育附加
  • 树莓派能干什么
  • 房地产预缴所得税计算公式
  • 这几个sql语法的区别
  • 帝国cms怎么用
  • 税务局规定500元以下收据的要求
  • 应付账款可以用预收账款代替嘛
  • mysql 服务器配置
  • mongodb bi
  • 无偿划转股权涉税
  • 汽车牌照费用是在哪里开的
  • 固定资产可以一次性折旧吗
  • 公司聚餐做什么科目
  • 企业项目贷款所需资料
  • 事业单位无形资产包括哪些
  • 费用设置的明细科目
  • vista windows
  • win7历史记录在哪里
  • macbook开机壁纸怎么设置
  • ctl.start
  • win10可以关闭的功能
  • win10系统如何关闭
  • j-v测试
  • 为什么要建立文明城市
  • 文本框css关闭输入框
  • 基于flask的开源项目
  • nodejs fs.open
  • 深入理解计算机系统 电子书
  • android:ViewPager与FragmentPagerAdapter
  • jquery插件大全
  • apple开发
  • 如何查询税务情况
  • 怎么在国家税务局查发票
  • 纳税工会经费申请怎么写
  • 陕西省国家税务总局班子成员
  • 装卸搬运费属于
  • 国家税务局网上江苏电子税务局官网
  • 环保税要求标注什么
  • 取得土地使用权后两年未开发
  • 执法事业单位改革最新进展
  • 贵州省国家税务局电子税务局官网
  • 湖南省税务举报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设