说明: 项目是 vcli 3.x 创建的
注意: 如果需要修改 svg 颜色, 需要把 svg 的 fiil 和 stroke 的颜色值修改为 currentColor, 在 svg-icon 组件里面的 className 的传值对应的 class 里面使用 color 属性, 即可完成变色
- 安装
svg-sprite-loader
npm install svg-sprite-loader -D - 在 vue.config.js 里面配置 loader (
注意 这个文件必须和 package.json 在同一个目录, 才会生效, 所以还是切到文件夹检查一遍)
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/assets')) // 文件目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
// 修改file对svg的处理，不让它处理
const fileRule = config.module.rule('file');
fileRule.uses.clear();
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/assets'))
.end()
.use('file-loader')
.loader('file-loader');
},
}
- 编写 svg-icon 组件
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconPath"/>
</svg>
</template>
<script>
export default {
name:'SvgIcon',
props:{
iconName:{
type:String,
required:true,
},
className:{
type:String,
default:''
}
},
computed:{
iconPath(){
return `#icon-${this.iconName}`;
},
svgClass(){
if(this.className){
return `svg-icon ${this.className}`;
}
return `svg-icon`;
}
}
}
</script>
<style scoped>
.svg-icon {
/* 默认样式设置 默认宽高1em*/
width: 1em;
height: 1em;
vertical-align: -0.15em;
/* 当前颜色 */
fill: currentColor;
overflow: hidden;
}
</style>
- 在 main.js 里面全局注册上面的组件, 批量引入 svg 文件 ( svg 文件 我直接放到了 assets 下面)
Vue.component('svg-icon',SvgIcon);
//引入svg文件
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
const req = require.context('./assets',false,/\.svg$/);
requireAll(req);
