Vue 加载 svg

说明: 项目是 vcli 3.x 创建的
注意: 如果需要修改 svg 颜色, 需要把 svg 的 fiil 和 stroke 的颜色值修改为 currentColor, 在 svg-icon 组件里面的 className 的传值对应的 class 里面使用 color 属性, 即可完成变色

1. 安装 svg-sprite-loader
npm install svg-sprite-loader -D
2. 在 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');
  },
}

3. 编写 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>

4. 在 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);