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

  • 销项税减去进项税
  • 小规模水利基金优惠政策2023
  • 所得税的记账凭证
  • 今年补交上年的对外捐赠(视同销售收入)的税怎么处理?
  • 制造费用多结转了下月如何调整
  • 房地产企业消防设施计入什么科目
  • 年收入超过12万什么时候申报
  • 财付通交易手续费多少
  • 企业所得税视同销售的捐赠扣除
  • 税务要求企业所得税预缴申报更正
  • 固定资产清理产生的费用
  • 企业注销固定资产处理
  • 资本公积转增资本什么意思
  • 分户记账
  • 企业收到财政专项资金账务处理
  • 退还工会经费会退回吗
  • 个人所得税的征收
  • 如何关闭windows10安全中心服务
  • 财产转让所得怎么申报个税
  • 技术咨询服务费计入什么科目
  • 微软输入法打不出汉字
  • win8快捷键大全
  • php加号
  • 家用电脑分为哪几类
  • 债券转换为普通债权
  • 不动产经营租赁范围
  • php实战
  • 卖出回购证券的钱怎么算
  • 固定资产非正常损失
  • 小规模纳税人缴税的分录
  • 先收票后收货
  • 腾讯产品面经
  • 营业税借方表示什么
  • 公司有一个残疾人
  • 织梦怎么调用当前栏目下的文章
  • 准予从销项税额中扣除的有哪些
  • 残保基金什么时候申报
  • 企业办理税务注销需要什么资料
  • 椅子能放进后备箱吗
  • 分页存储过程是什么
  • mongodb查询操作
  • 外币账户的设置在哪里
  • 收益性支出包括哪些内容
  • 进项税大于销项税怎么结转
  • 销售货物提供运输服务分录
  • 盈余公积转增资本对会计要素的影响
  • 计提短期借款利息分录
  • 社平工资调整补差能补多少
  • 递延所得税资产和所得税费用的关系
  • 现金日记账支出写借方还是贷方
  • 税金及附加是按什么基础交的
  • 天然气管道安装费多少钱一米
  • 总资产报酬率的公式
  • 折扣怎么写会计分录
  • 资产负债表里包括应付利息吗
  • 金税盘清卡怎么操作视频
  • 票据粘贴处怎么粘
  • window磁铁
  • bios如何设置
  • windows8.1企业版build9600
  • xp系统网络设置在哪
  • win8不能启动
  • route.exe - route是什么进程 有什么用
  • win81蓝屏重启故障
  • 硬盘xp系统
  • linux shell怎么用
  • windows 10 mobile--移动版
  • windows 8
  • win7 windows安全中心
  • linux系统概述
  • elementui基于vue
  • n归档是什么软件
  • js图形界面
  • python中二维列表的定义
  • 三消游戏攻略
  • wordpress开发文档
  • 江苏电子税务局官网登录入口
  • 全国大学生数学竞赛证书电子版查询
  • 企业登录初始密码
  • 安徽省纪检监察官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设