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

  • 运输发票税率6%和3%区别在哪
  • 个体工商户增值税优惠政策2023
  • 生产企业出口退税的计算方法
  • 增值税发票综合服务平台错误代码35
  • 冲红凭证更正时摘要怎么写
  • 有形动产租赁服务属于现代服务吗
  • 法人股东分红交什么税
  • 无发票情况说明怎么写学生
  • 土地增值税清算是什么意思
  • 银行代扣水电费要手续费吗
  • 财务人员需具备的基本素质和条件是什么
  • 海关补料
  • 财务费用应计入什么账户
  • 异地缴纳附加税怎么申报
  • 电子税务局如何查询已开发票
  • 继承有个人所得税吗
  • 高新产业扶持补贴怎样申请
  • 公司账外废品收入怎么算
  • 生产车间购入材料会计分录
  • 基本户收到个人款项的分录
  • win10桌面窗口管理器gpu占用高
  • win7绝地求生帧数不稳定
  • 其他现代服务包括哪些税目
  • 存货退回账务处理
  • PHP:curl_multi_close()的用法_cURL函数
  • 怎么登记总分类账簿
  • 1.exe是什么文件
  • 笔记本屏幕坏点几个算正常
  • php怎么转换
  • Android App中DrawerLayout抽屉效果的菜单编写实例
  • TCN(Temporal Convolutional Network,时间卷积网络)
  • 前端面试题目100及最佳答案
  • mac配置flutter环境变量
  • vue中computed和watch区别
  • gdal官方文档
  • 个体工商户在哪开电子发票
  • 未达起征点怎么填申报表
  • 应付账款转入营业外收入的证明
  • 公司名下商品房过户给公司需要交过户费
  • 流动资产与资产总额的比率叫什么比率
  • mongodb的配置文件
  • 房地产公司计提税金
  • 进账加计抵减政策
  • sql server 2008使用说明
  • mysql正则表达式匹配数字
  • MySQL读写分离企业方案
  • sql server数据库怎么使用
  • 暂估入库按含税价吗
  • 当月购进原材料取得税控专用发票
  • 天然气安装工程有多大利润
  • 工程项目买保险需要哪些资料
  • 建筑业 成本
  • 跨年的费用怎么调整
  • 业务招待算什么费用
  • 如何理解其他权益工具
  • 总分类账的依据
  • mysql存储过程是什么意思
  • mysql5.6下载
  • 微软宣布9月30日停止在俄罗斯服务
  • centos如何禁ping
  • ami 2.17.1254bios设置图解教程
  • 利用()可以对系统进行全面的设置
  • windows蓝屏代码大全及解决方案
  • win7系统屏幕键盘怎么打开
  • centos安装scala
  • win10预览版和正式版
  • SchSvr.exe - SchSvr是什么进程 有什么作用
  • linux如何安装wget命令
  • win8怎么进去安全系统
  • Win10桌面版红石预览版14295更新(修复)、已知问题及解决方案汇总
  • ajax请求图片并显示
  • android iframe
  • shell脚本查找
  • js如何获取当前页面的url
  • jquery自带的弹出框
  • python自动化监控
  • django命令行
  • 深圳市福田区税务局电话
  • steam账号要身份证吗
  • 税控盘开票怎么赋码的教程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设