把svg当成组件使用

好处是可以随意更改 svg的填充色

• 安装

npm i -D vue-svg-loader

or

yarn add -D vue-svg-loader

• webpack配置
  vue-cli2.0配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  },
};

vue-cli3.0配置

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

• 使用

上述用法在2019/1/17再次使用的时候 报错
所以在补一种方法

npm install vue2-svg-icon --save-dev

在main.js里面配置

import Icon from 'vue2-svg-icon/Icon.vue'

vue.component('icon', Icon)

很重要的一点

一定要在assets里面新建一个svg文件夹，然后放入项目的svg图标

image.png

在组件里面引入,name对应的就是svg的名字