目录
2、assets文件夹创建icons文件夹,用于svg的存放和逻辑引入
5、vue.config.js配置相关,可以根据自己的情况调整
1、安装依赖
- npm install svgo -D
- npm install svg-sprite-loader -S
npm install svgo -D
npm install svg-sprite-loader -S
2、assets文件夹创建icons文件夹,用于svg的存放和逻辑引入
3、icons文件夹创建svg文件夹和index.js文件
- svg文件夹存放相关svg文件
- index.js存放索引逻辑
4、index.js填写索引逻辑
const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
requireContext.keys().map(requireContext)
}
requireAll(req)
同时我们需要在main.js中引入该index.js文件
import '@/src/assets/icons/index'
5、components中创建svg引用组件
- 可手动注册,这里我采用的自动注册全局(使用量大可采用此方法,自动注册方法在上一篇文章中)
<template>
<i v-if="icon.indexOf('el-icon-') === 0" :class="icon" />
<svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :xlink:href="`#icon-${icon}`" />
</svg>
</template>
<script>
export default {
name: "svgC",
props: {
icon: {
type: String,
required: true,
},
},
};
</script>
<style scoped>
.svg-icon {
width: 20px;
height: 20px;
overflow: hidden;
vertical-align: -0.15em;
fill: currentColor;
cursor: pointer;
}
</style>
5、vue.config.js配置相关,可以根据自己的情况调整
chainWebpack: config => {
config.plugins.delete("prefetch")
config.plugins.delete("preload")
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()
},