位置: IT常识 - 正文

vue项目引入svg图标(完整步骤)(vue引入svg图片)

编辑:rootadmin
vue项目引入svg图标(完整步骤) 1. 安装svg依赖

推荐整理分享vue项目引入svg图标(完整步骤)(vue引入svg图片),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中使用svg图标,vue-svg-loader,vue3 svg,vue引用svg矢量图,vue svgicon,vue引用svg矢量图,vue引入svg图片,vue中使用svg图标,内容如对您有帮助,希望把文章链接给更多的朋友!

在vue中首先需要安装可以加载svg的依赖。 npm安装:npm install svg-sprite-loader --save-dev

2. 创建svg文件夹存放svg图标

创建icons文件夹,在icons文件夹下创建svg文件夹存放本地svg图标。

3. vue.config.js 中配置svg图片

vue.config.js代码:

const path = require('path')module.exports = { chainWebpack:config=>{ // svg图标加载 config.module .rule('svg') .exclude.add(path.join(__dirname, 'src/assets/icons/svg')) .end() config.module .rule('icons')// 定义一个名叫 icons 的规则 .test(/\.svg$/)// 设置 icons 的匹配正则 .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录,只在当前目录下才执行当前规则 .end() .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置 .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader .options({// 该 svg-sprite-loader 的配置 symbolId:'icon-[name]' }) .end() }}vue项目引入svg图标(完整步骤)(vue引入svg图片)

include.add(路径)–路径不正确会报以下错误:

4. 创建index.js 导入所有svg图标

icons文件夹创建index.js 自动导入所有svg图标。 icons/index.js代码:

const req = require.context('@/assets/icons/svg',false,/\.svg$/)const requireAll = requireContext =>{ // requireContext.keys()数据:['./404.svg', './agency.svg', './det.svg', './user.svg'] requireContext.keys().map(requireContext)} requireAll(req)

执行 requireContext.keys().map(requireContext)得到返回的数据:

5. main.js中引入icons/index.js

6. 创建SvgIcon公用组件

SvgIcon/index.vue代码:

<template> <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" /> <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners"> <use :xlink:href="`#icon-${iconFileName}`" /> </svg></template><script>export default { name: 'SvgIcon', props: { iconFileName: { type: String, required: true } }}</script><style scoped>.svg-icon { width: 1em; height: 1em; overflow: hidden; vertical-align: -0.15em; fill: currentColor;}</style>

全局注册SvgIcon组件:

使用SvgIcon组件:

vuecli 中 chainWebpack 的常用操作 使用require.context实现前端工程自动化

本文链接地址:https://www.jiuchutong.com/zhishi/293042.html 转载请保留说明!

上一篇:前端埋点需求(vue.js)(前端埋点sdk)

下一篇:半球形的谢尔亨里克森天文台,挪威斯瓦尔巴群岛 (© Vincent Fournier/Gallery Stock)

  • 微信如何发专属红包(微信如何发专属红包群里面)

    微信如何发专属红包(微信如何发专属红包群里面)

  • 美颜相机拼图功能在哪里(美颜相机拼图功能怎么用)

    美颜相机拼图功能在哪里(美颜相机拼图功能怎么用)

  • 手机拍摄变焦是什么意思(手机拍照的变焦是什么意思)

    手机拍摄变焦是什么意思(手机拍照的变焦是什么意思)

  • 小米拦截返回音改不了怎么办(小米拦截返回音改不了)

    小米拦截返回音改不了怎么办(小米拦截返回音改不了)

  • 抖音怎么获取qq权限(抖音怎么获取粉丝量)

    抖音怎么获取qq权限(抖音怎么获取粉丝量)

  • 腾讯视频取消自动续费怎么弄(腾讯视频取消自动收藏功能)

    腾讯视频取消自动续费怎么弄(腾讯视频取消自动收藏功能)

  • 京东出库的订单能取消吗(京东出库的订单怎么退款)

    京东出库的订单能取消吗(京东出库的订单怎么退款)

  • 电源长的是正还是负(电源从长的出还是短的)

    电源长的是正还是负(电源从长的出还是短的)

  • 桌面改到d盘有坏处吗(桌面改成d盘全在桌面了)

    桌面改到d盘有坏处吗(桌面改成d盘全在桌面了)

  • 直播流量什么意思(直播所谓的流量是什么意思)

    直播流量什么意思(直播所谓的流量是什么意思)

  • 行间距和行距一样吗(行距和行间距有什么区别)

    行间距和行距一样吗(行距和行间距有什么区别)

  • cad十字光标移动时闪烁(cad十字光标移动缓慢)

    cad十字光标移动时闪烁(cad十字光标移动缓慢)

  • 快递已发货可以退款吗(快递已发货可以修改电话号码吗)

    快递已发货可以退款吗(快递已发货可以修改电话号码吗)

  • 苹果11手机发热正常吗(苹果11手机发热发烫怎么解决)

    苹果11手机发热正常吗(苹果11手机发热发烫怎么解决)

  • 小米mix2s支持qc4快充吗

    小米mix2s支持qc4快充吗

  • 微信语音通话记录能查到吗(微信语音通话记录删除之后能查到吗)

    微信语音通话记录能查到吗(微信语音通话记录删除之后能查到吗)

  • 苹果8p为什么一照就亮屏(苹果8p为什么一会儿开机一会儿又关机了)

    苹果8p为什么一照就亮屏(苹果8p为什么一会儿开机一会儿又关机了)

  • 手机如何测试网速(手机如何测试网速多少)

    手机如何测试网速(手机如何测试网速多少)

  • qq回执编号在哪里输入(qq回执编号在哪里用)

    qq回执编号在哪里输入(qq回执编号在哪里用)

  • ods系统是什么意思(od os ds)

    ods系统是什么意思(od os ds)

  • 什么叫扩列交友(扩列和交友是一个意思吗)

    什么叫扩列交友(扩列和交友是一个意思吗)

  • 租充电宝怎么退押金(租充电宝怎么退押金微信)

    租充电宝怎么退押金(租充电宝怎么退押金微信)

  • 华为mate20耳机型号(华为mete20耳机)

    华为mate20耳机型号(华为mete20耳机)

  • 华为手机来电视频秀可以在哪里下载(华为手机来电视频怎么设置)

    华为手机来电视频秀可以在哪里下载(华为手机来电视频怎么设置)

  • 测网速移动的方法有哪些?(测网速移动的方法是什么)

    测网速移动的方法有哪些?(测网速移动的方法是什么)

  • NuSences 数据集解析以及 nuScenes devkit 的使用(nyud数据集)

    NuSences 数据集解析以及 nuScenes devkit 的使用(nyud数据集)

  • 收到财政局拨款填到现金流量表哪一项
  • 财务报表审计的标准
  • 购入生产线属于什么费用
  • 专家评审费属于劳务费吗
  • 企业所得税预缴少申报案例
  • 资产评估费怎么收
  • 税控盘怎么注销需要带什么东西
  • 公司变更地址要股东签字吗
  • 电汇凭证如何使用
  • 预付货款核销如何做会计摘要呢?
  • 承兑汇票承兑流程
  • 印花税股权转让计税依据
  • 增值税优惠的二级明细科目
  • 增值税专用发票有效期是多长时间
  • 发票金额看不清楚可以报销吗
  • 把股份转给别人怎么处理
  • 单位汽车按揭贷款怎么贷
  • 预交土增税税率
  • 土地使用权摊销账务处理
  • 电梯销售和安装怎么核算收入
  • 权利,许可证照印花税
  • 插上U盘电脑无法启动怎么回事
  • 华为鸿蒙系统超级终端怎么用
  • 治理层和管理层包括哪些
  • 专家评审费是否需要发票
  • 企业为开发新产品新技术新工艺
  • 增值税务发票怎么作废
  • createrectrgn
  • php面向对象编程
  • 在建工程盘盈计入什么
  • 小企业会计制度最新版
  • 怎么配置tomcat服务器
  • 应交增值税减免税额在借方
  • chatgpt的多种免费使用方式
  • 企业固定资产可以按照其价值和使用情况,确定采用某一
  • 新手为什么要买二手车
  • 开了专票就不能享受政策
  • 茶叶开增值税专用发票,不在申报系统的农副产品类
  • python生成器的应用场景
  • 动态规划知乎
  • sql 文件存储
  • 政府会计制度中累计盈余怎么计算
  • 无形资产摊销年限按法律规定还是企业估计
  • 所得税税率变化对已确认递延所得税资产的影响
  • 实收资本账务处理错误可以调减吗
  • 红冲去年费用会计分录
  • 大家怎么看理想这个牌子
  • 原材料的采购成本怎么计算
  • 账务处理程序是指什么
  • 外出经营预缴税款表怎么填
  • 支付劳务公司的劳务费如何扣缴个人所得税?
  • 确认收入一定要交增值税吗
  • 为什么开发票能抵税?
  • 会计交接事项有哪些
  • Slave memory leak and trigger oom-killer
  • 数据库保护数据方式
  • mysql 5.7.11 winx64初始密码修改
  • mariadb10.1
  • mysql join查询慢
  • win10有三个系统
  • macbookair cpu
  • mac如何恢复到出厂系统版本
  • centos6.5dns配置
  • win10家庭版免费升级专业版密钥
  • win7怎么设置工作组共享
  • 安卓闹钟软件下载
  • opengl入门教程(精)
  • android界面控件
  • javascript cookbook
  • android应用开发基础课后答案
  • 用python写一个程序
  • js中bom是什么意思
  • flask框架代码
  • 网上申报纳税小程序下载
  • 一般纳税人获得自产自销免税发票怎么处理
  • 上海社保基数对照表
  • 发票汇总表怎么计算
  • 纳税申报逾期怎样补报?
  • 内审工作流程及内审中常见的问题
  • 税务筹划前景
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设