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

  • ios15照片提取文字怎么开启(ios15怎样提取照片文字)

    ios15照片提取文字怎么开启(ios15怎样提取照片文字)

  • 键盘没坏 就是打不了字(键盘没坏 就是打不了字怎么办)

    键盘没坏 就是打不了字(键盘没坏 就是打不了字怎么办)

  • ipad有低电量模式吗(ipad2020低电量模式)

    ipad有低电量模式吗(ipad2020低电量模式)

  • 佳能相机充电器charge灯闪烁(佳能相机充电器charge灯一直亮)

    佳能相机充电器charge灯闪烁(佳能相机充电器charge灯一直亮)

  • 抖音喜欢作品怎么删除(抖音喜欢作品怎么批量删除)

    抖音喜欢作品怎么删除(抖音喜欢作品怎么批量删除)

  • iqoo有多少个型号(iqoo一共有几种机型)

    iqoo有多少个型号(iqoo一共有几种机型)

  • 微信注销账号要多久(微信注销账号要手机验证码吗)

    微信注销账号要多久(微信注销账号要手机验证码吗)

  • 关闭超线程可以提升单核性能吗(关闭超线程可以提升降低功耗吗)

    关闭超线程可以提升单核性能吗(关闭超线程可以提升降低功耗吗)

  • 手机千牛怎么交保证金(手机千牛怎么交2000罚款)

    手机千牛怎么交保证金(手机千牛怎么交2000罚款)

  • 电脑上wps怎么发送到qq(电脑上wps怎么发给微信好友)

    电脑上wps怎么发送到qq(电脑上wps怎么发给微信好友)

  • 华为nova5怎么插耳机(华为nova5pro多少钱)

    华为nova5怎么插耳机(华为nova5pro多少钱)

  • 拼多多免拼单是什么意思(拼多多怎么下单最便宜)

    拼多多免拼单是什么意思(拼多多怎么下单最便宜)

  • wps制作表格怎么放大(wps制作表格怎么在表格里加斜线)

    wps制作表格怎么放大(wps制作表格怎么在表格里加斜线)

  • 苹果商店下载不了小红书(苹果商店下载不了app怎么办)

    苹果商店下载不了小红书(苹果商店下载不了app怎么办)

  • 华为5的耳机孔在哪里(华为5的耳机孔是多大的)

    华为5的耳机孔在哪里(华为5的耳机孔是多大的)

  • 小红书的订单去哪看啊(小红书的订单去哪里了)

    小红书的订单去哪看啊(小红书的订单去哪里了)

  • 虎牙直播怎么放音乐(虎牙直播怎么放大屏幕)

    虎牙直播怎么放音乐(虎牙直播怎么放大屏幕)

  • 敏感资源无法加速怎么办

    敏感资源无法加速怎么办

  • Linux下多线程下载工具MWget和Axel使用介绍(linux多线程运行)

    Linux下多线程下载工具MWget和Axel使用介绍(linux多线程运行)

  • 瓦尔内明德的帆船,德国 (© Rico Ködder/Getty Images)(瓦尔德内尔精彩)

    瓦尔内明德的帆船,德国 (© Rico Ködder/Getty Images)(瓦尔德内尔精彩)

  • 【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数(javascriptj)

    【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数(javascriptj)

  • 【VUE前进之路】使用数据代理,计算属性与监视属性的妙用(vue前进后退)

    【VUE前进之路】使用数据代理,计算属性与监视属性的妙用(vue前进后退)

  • 个人能否申请延迟退休
  • 应纳税所得额的会计分录
  • 支付货款未收到产品算货值吗
  • 旧房转让土地增值税计算案例
  • 房产评估费会计分录
  • 契税缴纳企业所得税吗
  • 矿泉水资源税计税依据
  • 增值税专票开具要求
  • 商标注册费用计入会计科目二级
  • 工会经费基数是上个月收到的工资还是什么
  • 前三季度盈利第四季度亏损 所得税记账
  • 7月认证的发票7月可以抵扣吗?
  • 个人生产经营所得
  • 外籍劳务费个税扣除标准
  • 其他应付款社保贷方余额怎么冲平
  • 预收账款属于金融资产吗为什么
  • 房地产记账凭证
  • 工会财务任务是什么
  • 1697509439
  • 营改增后兼营非应税劳务的税务处理怎么做?
  • 新会计准则下职工薪酬的变化及影响摘要
  • 合作社人工工资账务处理
  • u盘启动器安装系统
  • xp系统咋样
  • 收到投标保证金利息会计分录
  • 月末计提电费
  • thinkphp5开发教程
  • PHP:mb_check_encoding()的用法_mbstring函数
  • 腾达ac9路由器怎么样
  • 已入账的发票跨月能用吗
  • 地下停车位是否符合国家安全标准咨询那个部门
  • 192.168.2.1 路
  • laravel中的session有效期
  • 企业购买烟酒可以抵扣吗
  • php和mysql关系
  • 合同价格约定不明法律规定
  • 销售发票重复开库存商品如何处理?
  • opengl 图形
  • 织梦上传图片大小设置
  • 织梦内容页模板修改
  • 设计费可以抵扣进项吗
  • 工会经费计算表
  • 水利基金可以不计提吗
  • 增值税进项税额加计抵减政策
  • 贸易公司委托加工费怎么入账
  • 保险理赔进项税额转出
  • 资产负债表是怎么核对的
  • 土地增值税是什么税种类型
  • 其他综合收益转到留存收益
  • 房地产开发成本测算套表(全过程)
  • 预缴所得税弥补以前年度亏损
  • 无形资产减值准备
  • pe市盈率法
  • 建筑业预缴税款怎么退税
  • 工会经费应计入
  • 融资租入的设备怎么入账
  • 应收账款的审计方式和手段
  • windows图标显示不出来
  • 联想y400装win8
  • 1sass.exe是什么程序
  • win10提示激活windows
  • win7系统怎么访问共享文件
  • 校园网升级套餐
  • Extjs4 类的定义和扩展实例
  • python递归函数详解
  • jquery方法查询api
  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
  • 编写python代码
  • python动态加载py
  • jquery动态改变样式
  • 亮屏功能
  • 广东省地方税务局班子成员
  • 北京市税务总局官网
  • 我是一般纳税人对方给我开的普票
  • 最多跑一次改革是谁提出来的
  • 河北个体工商户年报入口
  • 退休军人免门票吗
  • 医保漏缴如何补交
  • 征收两道消费税怎么算
  • 商住两用房出售要交契税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设