1. 安装svg依赖

在vue中首先需要安装可以加载svg的依赖。

npm安装：npm install svg-sprite-loader --save-dev

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

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

vue项目引入svg图标的完整步骤

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

vue项目引入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()
}
}

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

vue项目引入svg图标的完整步骤

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

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

vue项目引入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)得到返回的数据：

vue项目引入svg图标的完整步骤

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

vue项目引入svg图标的完整步骤

6. 创建SvgIcon公用组件

vue项目引入svg图标的完整步骤

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 {
width: 1em;
height: 1em;
overflow: hidden;
vertical-align: -0.15em;
fill: currentColor;
}
</style>

全局注册SvgIcon组件：

vue项目引入svg图标的完整步骤

使用SvgIcon组件：

vue项目引入svg图标的完整步骤

vuecli 中 chainWebpack 的常用操作

使用require.context实现前端工程自动化

总结

到此这篇关于vue项目引入svg图标的文章就介绍到这了,更多相关vue项目引入svg图标内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。