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

  • 快手直播黑屏的解决方法(快手直播黑屏怎么办)

    快手直播黑屏的解决方法(快手直播黑屏怎么办)

  • 电脑怎么进oppo官网(电脑怎么进入bios界面)

    电脑怎么进oppo官网(电脑怎么进入bios界面)

  • 云注册是干什么用的(云注册平台)

    云注册是干什么用的(云注册平台)

  • 苹果手机显示无法安装(苹果手机显示无效SIM卡是什么意思)

    苹果手机显示无法安装(苹果手机显示无效SIM卡是什么意思)

  • 华为屏幕右移了怎么复原(华为屏幕桌面偏右)

    华为屏幕右移了怎么复原(华为屏幕桌面偏右)

  • 小米10和小米cc9pro对比(小米10和小米cc9pro哪个好)

    小米10和小米cc9pro对比(小米10和小米cc9pro哪个好)

  • 闲鱼联系不上卖家怎么办(闲鱼 联系不到卖家)

    闲鱼联系不上卖家怎么办(闲鱼 联系不到卖家)

  • 华为nova6开发者选项在哪(华为nova6开发者选项在哪里打开)

    华为nova6开发者选项在哪(华为nova6开发者选项在哪里打开)

  • 下载目录无权限是什么意思(文件下载安装)

    下载目录无权限是什么意思(文件下载安装)

  • bilibili拉黑对方对方知道吗(bilibili拉黑对方对方能关注我吗)

    bilibili拉黑对方对方知道吗(bilibili拉黑对方对方能关注我吗)

  • 华为p40需要贴膜吗(华为p40需要贴膜不)

    华为p40需要贴膜吗(华为p40需要贴膜不)

  • 视频暂时无法下载是什么原因(视频暂时无法下载怎么办)

    视频暂时无法下载是什么原因(视频暂时无法下载怎么办)

  • 群主删除退出群还在吗(群主删除群并退出群,群还在吗)

    群主删除退出群还在吗(群主删除群并退出群,群还在吗)

  • 华为手机进水一直震动(华为手机进水一直重启循环怎么回事)

    华为手机进水一直震动(华为手机进水一直重启循环怎么回事)

  • 华为手机无服务无信号怎么办(华为手机无服务是什么原因造成的)

    华为手机无服务无信号怎么办(华为手机无服务是什么原因造成的)

  • nova6是双模5G吗 (nova6是双4g吗)

    nova6是双模5G吗 (nova6是双4g吗)

  • 腾讯视频tv版和手机版会员通用吗

    腾讯视频tv版和手机版会员通用吗

  • 魅族16sPro有nfc功能吗(魅族16th plus有nfc)

    魅族16sPro有nfc功能吗(魅族16th plus有nfc)

  • oppoA11x是什么屏幕(oppoa11x是多大的屏)

    oppoA11x是什么屏幕(oppoa11x是多大的屏)

  • iphonexs广角镜头怎么用(iphonexs相机广角镜头怎么用)

    iphonexs广角镜头怎么用(iphonexs相机广角镜头怎么用)

  • 公交卡一次能刷几个人(公交卡一次能刷两次吗)

    公交卡一次能刷几个人(公交卡一次能刷两次吗)

  • 小米手机如何关闭nfc功能(小米手机如何关闭广告)

    小米手机如何关闭nfc功能(小米手机如何关闭广告)

  • 怎么通过otg传到u盘上

    怎么通过otg传到u盘上

  • airpods电脑能用吗(airpods2电脑能用吗)

    airpods电脑能用吗(airpods2电脑能用吗)

  • substitute用法(substitute函数)

    substitute用法(substitute函数)

  • 苹果售后换屏是原装吗(苹果售后换屏是全新的吗)

    苹果售后换屏是原装吗(苹果售后换屏是全新的吗)

  • 电话卡欠费影响征信吗(电话卡欠费影响信用吗)

    电话卡欠费影响征信吗(电话卡欠费影响信用吗)

  • iphonexr双卡在通讯录里怎么切换卡(iphonexr两个卡)

    iphonexr双卡在通讯录里怎么切换卡(iphonexr两个卡)

  • OpenCV安装教程(全网最细,小白直接上手!!!)(opencv安装教程vs2019)

    OpenCV安装教程(全网最细,小白直接上手!!!)(opencv安装教程vs2019)

  • 车辆租赁费发票备注栏怎么写
  • 市政道路工程建筑包括什么
  • 金税盘清卡时间包括15号吗
  • 独立核算的优点
  • 免征土地增值税
  • 企业合并的会计方法选择
  • 应纳税所得额就是企业所得税吗
  • 向金融企业借款利息支出可以税前扣除吗
  • 转让土地使用权会计分录怎么做
  • 外经证预缴税款怎么计算
  • 广告位的费用
  • 所得税多交但又不想去税务局退税怎样做账?
  • 增值税负数如何计算
  • 客运服务是指
  • 公司注销财务账需要保存几年
  • 收到押金入什么会计科目
  • 建筑施工单位可以安装电表吗
  • 财务兼职怎么算工资
  • 企业转让土地使用权交什么税
  • 车辆租赁费交的是什么税
  • macbook截图快捷键没反应
  • 发票如何认证及开票
  • 如何输入特殊符号带圈数字11
  • 2022年最新cpu天梯图手机
  • 不动产分期抵扣政策
  • 银行贷款发放怎么做凭证
  • 总公司欠分公司的借款可以计提坏账
  • PHP:Memcached::getResultMessage()的用法_Memcached类
  • 库存股属于什么项目
  • 贷款的账务处理
  • 转让应收账款是否交税
  • 污水处理增值税税率
  • php自定义变量的方法是
  • 微信收款要求绑定银行卡怎么办
  • 自动驾驶感知决策控制
  • php数组转树
  • php使用oci8扩展连接oracle
  • 董事长报销应该是怎样的流程
  • 小规模纳税人按简易计税法计税时也可以进行税额的抵扣
  • 简单易学的前端框架
  • 原版小说推荐
  • db2udb
  • 关联企业债资比怎么计算
  • 承兑汇票大回头是什么意思
  • 计提折旧的固定资产全年平均总值怎么算
  • 收到三代手续费的增值税报表填列在哪里
  • 库存股 注销
  • 暂估成本的账务怎么处理
  • 代销手续费怎么做账
  • 企业发生的开办费用计入营业外支出账户
  • 房租费会计分录
  • 少交税款滞纳金
  • 报废周转材料应负担的成本差异
  • 广告制作需要交文化事业建设税
  • 国际货运代理公司税率为啥是免税
  • 法院主要业务活动
  • 二手车交易增值税发票
  • sql动态表
  • hyper v虚拟机
  • 英特尔双核cpu
  • WINDOWS7系统安装包
  • 第一启动项硬盘
  • windows xp密码忘记怎样解锁
  • win8开机画面后黑屏
  • 在ubuntu上安装gcc
  • naimag32.exe - naimag32是什么进程 有什么用
  • 如何把网址设为常用网址
  • u3d怎么导入贴图
  • opengl中点画圆算法
  • js实现鼠标事件
  • js实现日历可获得的信息
  • python简易
  • 深入理解新发展理念,推进供给侧结构性改革心得体会
  • 深入理解新发展理念
  • selenium在pycharm
  • python线程daemon
  • 河北省税务局对外公开电话
  • 云南省地方税务局公告2017年第2号
  • 浙江国地税联合申报系统官网
  • 收入较去年同期增长怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设