位置: 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)

  • 怎么在ppt里加入视频(怎么在ppt里加入动图)

    怎么在ppt里加入视频(怎么在ppt里加入动图)

  • OPPO Ace2整机的厚度是多少(oppo ace2手机尺寸)

    OPPO Ace2整机的厚度是多少(oppo ace2手机尺寸)

  • 微信健康码地址填错了怎么办(微信健康码地址填错了怎么修改)

    微信健康码地址填错了怎么办(微信健康码地址填错了怎么修改)

  • 红米note9pro什么时候出(红米note9pro什么出的)

    红米note9pro什么时候出(红米note9pro什么出的)

  • 网络位置服务耗电怎么解决(网络位置服务有什么用)

    网络位置服务耗电怎么解决(网络位置服务有什么用)

  • 快手怎么不显示通讯录好友(快手怎么不显示ip地址)

    快手怎么不显示通讯录好友(快手怎么不显示ip地址)

  • 华为微信实时通话怎么录音(华为怎么设置微信通知)

    华为微信实时通话怎么录音(华为怎么设置微信通知)

  • 剪映解析失败什么意思(剪映视频解析在线)

    剪映解析失败什么意思(剪映视频解析在线)

  • 计算机系统中必不可少的软件(计算机系统中必备的软件)

    计算机系统中必不可少的软件(计算机系统中必备的软件)

  • iwatch和手机离多远(iwatch和手机离多远可以接到微信)

    iwatch和手机离多远(iwatch和手机离多远可以接到微信)

  • 为什么打电话是空号(为什么打电话是智能助理接的)

    为什么打电话是空号(为什么打电话是智能助理接的)

  • 钉钉视频会议找不到了(钉钉视频会议找不到视图)

    钉钉视频会议找不到了(钉钉视频会议找不到视图)

  • 苹果11手机长度多少厘米(苹果11手机长度是)

    苹果11手机长度多少厘米(苹果11手机长度是)

  • 电脑怎么下载淘宝软件(电脑怎么下载淘金小助手)

    电脑怎么下载淘宝软件(电脑怎么下载淘金小助手)

  • 爱奇艺vip怎么多人登录(爱奇艺VIP怎么多人登录)

    爱奇艺vip怎么多人登录(爱奇艺VIP怎么多人登录)

  • 爱奇艺包月怎么计算时间(爱奇艺包月怎么算)

    爱奇艺包月怎么计算时间(爱奇艺包月怎么算)

  • office套装软件主要包括(office套装软件主要包括哪些组件)

    office套装软件主要包括(office套装软件主要包括哪些组件)

  • 天猫超市退货流程(天猫超市退货流程图解)

    天猫超市退货流程(天猫超市退货流程图解)

  • wps表格里面怎么画线(wps表格里面怎么添加pdf文件内容)

    wps表格里面怎么画线(wps表格里面怎么添加pdf文件内容)

  • 拼多多怎么给客服备注(拼多多怎么给客服打分)

    拼多多怎么给客服备注(拼多多怎么给客服打分)

  • iqoo按压键到哪里设置(iqoo7按压)

    iqoo按压键到哪里设置(iqoo7按压)

  • ode45的用法(ode45用法举例)

    ode45的用法(ode45用法举例)

  • 苹果耳机充电盒如何显示已经充满(苹果耳机充电盒充不上电什么原因)

    苹果耳机充电盒如何显示已经充满(苹果耳机充电盒充不上电什么原因)

  • 怎样设置PPT中文本对齐(怎样设置PPT中文字出来的顺序)

    怎样设置PPT中文本对齐(怎样设置PPT中文字出来的顺序)

  • 电脑台式机清洁小知识(台式电脑清洗步骤图解)

    电脑台式机清洁小知识(台式电脑清洗步骤图解)

  • Vue3路由的使用(vue路由详解)

    Vue3路由的使用(vue路由详解)

  • 公路客运企业应走集约化经营
  • 增值税一般纳税人税率
  • 研发支出月末结转转去哪里?
  • 代扣代缴完税凭证 要勾选吗
  • 生产工人工资和福利费是产品成本项目对吗
  • 从银行提取现金用途
  • 开了票后才收到工程款怎么做账?
  • 企业所得税汇算清缴网上申报流程
  • 境内所得境外发放工资
  • 核定征收怎么交企业所得税
  • 建筑公司亏损异常怎么办
  • 未给对方开票对方举报情况怎么写
  • 停车费专用发票可以抵扣进项税吗
  • 税控盘的购买流程
  • 无法读取金税盘时间版本号是什么意思
  • 小规模季度不超过30万元免税会计分录
  • 中国人民银行保险公司
  • 职工福利费税前扣除标准最新
  • 定额发票报销需要明细吗
  • 已经提完折旧的固定资产报废
  • 银行代发工资当月没发下个月发没事儿吧
  • 如何找确定劳动关系的证据
  • 生产成本明细账怎么填图片
  • 借主营业务成本贷库存商品
  • 参加抽奖活动中奖却不发奖品
  • 企业收取的延期付款利息需要征消费税和增值税
  • 银行承兑汇票保证金是什么意思
  • 财务中暂估入账会计分录
  • mac book air文件夹怎么重命名
  • 审核记账流程
  • php大小写转换函数怎么写
  • centos停止发布
  • 对公账户存款利息要交增值税吗
  • 前端字符长度限制
  • newsupd.exe - newsupd是什么进程 有什么用
  • 安置残疾人就业单位城镇土地使用税
  • dmc32.dll
  • 结转所得税费用到本年利润的会计分录
  • Xpath元素定位之同级节点,父节点,子节点
  • 收到质量赔款做什么会计科目
  • 白 犀牛
  • php微信公众号开源框架
  • 用现金报销差旅费及增值税怎么做账
  • 增值税专用发票电子版
  • 个人独资企业取名规则
  • dedecms5.7
  • sql数据库降低版本
  • 固定资产账务处理候文江视频
  • 汽车维修公司做账基本流程
  • 印花税的计算公式与计算注意事项
  • 车间拆除施工方案
  • 收到员工生育津贴怎么做分录
  • 工会经费包括年终奖吗
  • 出口海运费222011
  • 资本公积的来源和用途
  • 付设备款的会计分录
  • 农民农作物补偿标准文件
  • 托盘费用怎么核算
  • 什么叫摊销
  • 固定资产计提折旧的方法
  • 商业承兑汇票是什么
  • 出纳日记账的日期以什么为准
  • sql server数据导入导出的特点
  • mysql5.7.20安装
  • deepin 2014系统下安装mysql数据库的方法步骤
  • ms17010补丁怎么安装
  • ubuntu安装超详细教程
  • mac怎么安装新系统
  • MSAPI.DAT,WINDNSAPI.DAT是什么文件
  • win10 sfc命令
  • linux使用范围
  • 运维是什么的
  • unity总结
  • unity3d读取gis数据
  • js设计模式书
  • node和javascript
  • 你知道什么是布
  • 广东税务实名注册
  • 杭州市税务局总局地址
  • 税收优惠政策有哪些企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设