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

  • 华为nova6红外线怎么开(华为nova6红外线有什么用)

    华为nova6红外线怎么开(华为nova6红外线有什么用)

  • 苹果12支持指纹解锁吗(苹果12支持指纹支付和人脸支付吗)

    苹果12支持指纹解锁吗(苹果12支持指纹支付和人脸支付吗)

  • 小米CC9如何用小爱同学关机(小米cc9pro怎么用)

    小米CC9如何用小爱同学关机(小米cc9pro怎么用)

  • 华为p30和mate20pro区别(华为p30和mate20pro对比哪个好)

    华为p30和mate20pro区别(华为p30和mate20pro对比哪个好)

  • 微信视频号怎么申请内测(微信视频号怎么发表作品)

    微信视频号怎么申请内测(微信视频号怎么发表作品)

  • 空间留言频繁如何解除(空间留言会被吞吗)

    空间留言频繁如何解除(空间留言会被吞吗)

  • 腾讯免流为什么还是在使用流量(腾讯免流为什么用不了)

    腾讯免流为什么还是在使用流量(腾讯免流为什么用不了)

  • 苹果11怎么关闭来电闪光灯(苹果11怎么关闭专注模式)

    苹果11怎么关闭来电闪光灯(苹果11怎么关闭专注模式)

  • 机械硬盘当移动硬盘用的坏处(机械硬盘当移动硬盘用时,电脑找不到盘)

    机械硬盘当移动硬盘用的坏处(机械硬盘当移动硬盘用时,电脑找不到盘)

  • word为什么改行距没有变化(为什么word一换行格式就变了)

    word为什么改行距没有变化(为什么word一换行格式就变了)

  • 天猫购物券退货返还吗(天猫购物券退货会退回来吗)

    天猫购物券退货返还吗(天猫购物券退货会退回来吗)

  • 抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

    抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

  • oppo手机siri怎么打开(OPPO手机siri怎么召唤)

    oppo手机siri怎么打开(OPPO手机siri怎么召唤)

  • b360和z390区别(b360主板和z390主板哪个好)

    b360和z390区别(b360主板和z390主板哪个好)

  • 华为手表能插电话卡吗(华为手表插电话卡的有哪些)

    华为手表能插电话卡吗(华为手表插电话卡的有哪些)

  • 苹果11pro双卡双待吗(苹果11pro双卡双4g)

    苹果11pro双卡双待吗(苹果11pro双卡双4g)

  • vivou1开售时间(vivou1手机)

    vivou1开售时间(vivou1手机)

  • mate30有保时捷款吗

    mate30有保时捷款吗

  • 三遥功能是哪三遥(三遥开关图片)

    三遥功能是哪三遥(三遥开关图片)

  • 唯品会退货后多久到账(唯品会退货多久钱到账)

    唯品会退货后多久到账(唯品会退货多久钱到账)

  • 快手里买的东西怎么查(快手里买的东西怎么查订单)

    快手里买的东西怎么查(快手里买的东西怎么查订单)

  • wlan室内范围多少米(无线wifi范围)

    wlan室内范围多少米(无线wifi范围)

  • 苹果手机为什么id不能用怎么办(苹果手机为什么没信号无服务)

    苹果手机为什么id不能用怎么办(苹果手机为什么没信号无服务)

  • 华为折叠手机mate x3无线充电(华为折叠手机mateXs3)

    华为折叠手机mate x3无线充电(华为折叠手机mateXs3)

  • 如何从 PC 上的 USB 安装 Windows 11(电脑到u盘)

    如何从 PC 上的 USB 安装 Windows 11(电脑到u盘)

  • 小规模城建
  • 小规模未达起征点的增值税怎么做账
  • 一张报关单可以分两次退税吗
  • 删除申报记录什么意思
  • 企业缴纳增值税后还需缴纳所得税吗
  • 在银行购买支票需要什么手续
  • 工伤私了赔偿
  • 联合开发合作模式
  • 汇票贴现的账务处理
  • 房贷利息抵个税细则 两套房
  • 应收帐款坏帐损失摘要
  • 虚开费用发票入账
  • 利润表的企业所得税怎么查询
  • 渔业专业合作社简介
  • 土地租赁合同交不交印花税
  • 汇算清缴所得税退回做账
  • 赔偿金要交增值税吗
  • 税务三方协议一式几份
  • 消费税有哪几种纳税方式
  • 转销和冲销是什么意思
  • 发票跨年了还能认证吗
  • 职工福利费计提标准是多少
  • windows10开机很卡
  • mac怎么打印文件内容
  • 金税盘纳税申报
  • 包装物押金为什么含税
  • Mtdacq.exe - Mtdacq是什么进程 有什么用
  • 电脑椅什么牌子质量好
  • 继承税遗产税新政策
  • 固定资产抵账的增值税
  • 很值得收藏
  • 资产减值会计处理对利润的影响
  • php curl file_get_contents
  • typescript is as
  • iframe标签表示的框架
  • php依赖注入的三种方式
  • 个税计税周期 一年
  • 营业执照上的注册资金可以改吗
  • 公司开户限额一般多少
  • 出纳把现金存入私人账户后转公账
  • phpcms怎么样
  • 劳务费发票为什么必须每月开
  • python第三方库安装教程
  • 长期挂账的应付款怎么处理
  • 分组 sql
  • 小企业会计准则和一般企业会计准则的区别
  • 企业进项税额大于销项税额
  • 劳务所得税税率表2023年1月
  • 如何收信用卡付款
  • 每个月房租
  • 材料按计划成本计价下,外购材料结算
  • 这个营业外支出怎么算
  • 个税 退手续费
  • 客户从公司借钱怎么拒绝
  • 软件开发费属于研发和技术服务还是信息技术服务
  • 定额发票和增值税普通发票的区别
  • 怎样查企业注册地址
  • 核定征收小规模做汇算清缴吗
  • 企业预算如何编制
  • 企业购买加油卡出售怎么做账
  • winxp关闭自动更新方法
  • 启动mac问号文件夹闪烁怎么办
  • bios里怎么找不到usb启动
  • uzqkst.exe - uzqkst是什么进程
  • win8.1系统HDMI高清线连接电视后没有声音的原因及解决办法
  • windows8使用技巧
  • win10如何恢复已删除的密钥
  • win7系统打开文件会闪退
  • linux 多线程 写文件
  • mvp功能
  • python2.7.11
  • 使用Raygun对Node.js应用进行错误处理的方法
  • 怎么实现移动
  • 烟草局收入怎么样
  • 金税全国客服电话
  • 什么车属于应征消费税的汽车
  • 养殖业免税用报税吗
  • 北京市国家税务局发票查询平台
  • 核定土地增值税的条件
  • 上海买房退税政策2023最新
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设