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

  • 工资表怎么导入个税系统计算个税
  • 实收资本印花税是一年一交吗
  • 财税大管家客服电话
  • 房产公司企业所得税如何预征
  • 一般纳税人购买二手车可以抵扣嘛
  • 微店企业和个人的区别
  • 三供一业移交内容
  • 合并扣税金额是什么
  • 分包工程违法吗
  • 在途物资的运费放在哪个科目
  • 厂家给经销商的授权书
  • 增值税发票委托公司开具
  • 资源税如何进行账务处理
  • 工业企业该怎样建账?
  • 不含税单价怎么换成含税单价
  • 企业成本费用包括哪些
  • 坏账收回的会计处理方法
  • 更改代理设置失败 可能无网络连接
  • .net 安装
  • 电脑自动更新系统怎么关闭
  • 应交所得税的计算公式excel
  • 怎么安装win7系统步骤
  • 苹果电脑里的finder是什么
  • 购买电子承兑差额怎么算
  • php array_replace
  • appdata文件夹可以改名吗
  • edge弹窗
  • find.exe应用程序错误
  • 芬迪flow
  • php生成html
  • php生成随机字符串源,且不会重复出现
  • 销售过程的主要内容
  • 一般贸易和进料加工贸易的区别
  • 前端没思路怎么办
  • 取得交易性金融资产的交易费用
  • 前端 input
  • 最优化模型的优点
  • 工业企业制造费用包括
  • 浏览器分析
  • uniapp中uni.navigateTo传递变量
  • php用户登录界面代码
  • 预付采购材料款60000元
  • php设置标题
  • 税务申报显示已申报
  • 经营活动现金流量比率
  • 物业增值服务主要有哪些
  • 企业向个人借款合同模板
  • 什么是受托支付和非受托支付
  • 将自产产品用于管理部门 增值税
  • 交易性金融资产的账务处理
  • 代销手续费如何做分录
  • 服务类发票怎么做分录
  • 员工福利费是不是免税项目
  • 外币资本金入账汇率怎样选择
  • 资产负债表中的应收账款应根据什么填列
  • 发票过账是什么意思
  • mysql varchar2
  • Win10系统任务栏一直转圈
  • xp安全模式怎么用
  • 安卓单机手游下载
  • windows资源管理器
  • linux设置界面
  • win10 提示
  • Cocos2dx 3.2 + vs2012 + win7 改变面黑色背景的大小
  • [置顶] 关于在vs2013中配置opengl红宝书第八版环境
  • 获取本机ip地址命令
  • css控制文字换行
  • angular重新渲染组件
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • shell脚本 !
  • ping大包丢包小包不丢包
  • javascriptcom
  • js模拟点击alert()确定
  • 国家税务局关于印花税若干具体问题的规定
  • 中国税务干部
  • 税务绩效管理4+4+4+n
  • 辽宁省地方税务局公告2014年第10号
  • 汉中税务大厅电话是多少
  • 税务转为非正常户的后果
  • 国税申报作废怎么操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设