1.开发环境安装依赖
npm install svg-sprite-loader -D
2.vue.config.js 配置
module.exports ={
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/svg')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
}
3.创建SVG组件库
<template>
<svg aria-hidden="true">
<use :href="'#icon-'+iconName"/>
</svg>
</template>
<script>
export default {
name: "Index",
props:{
iconName:{
type: String,
default: '',
require: true
}
},
setup(){
//获取当前svg目录下的所有svg文件
const req = require.context('@/assets/svg',false,/\.svg$/);
//解析
const requireAll = (requireContext) =>{
return requireContext.keys().map(requireContext);
}
requireAll(req)
}
}
</script>
4.调用组件
<svg-icon iconName="home"/>
注意：1.首先引入组件或组件设置成全局组件。2.样式可以和其他元素一样随便设置
