把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');
  },
};

• 使用

<template>
  <nav>
    <a>
      <WebpackLogo class="logo" />
      webpack
    </a>
  </nav>
</template>
<script>
import WebpackLogo from './public/webpack.svg';

export default {
  name: 'Example',
  components: {
    WebpackLogo
  },
};
</script>
<style scoped lang='scss'>

.logo {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  fill: #336699;
  &:hover {
      fill: #ff3366;
  }
}
</style>

上述用法在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的名字

<template>
    <div>
        测试
        <icon name="excel" class="my-icon"></icon>
    </div>
</template>

<script>

    export default {
        name: "Tree",
      props: ['model'],
        data() {
            return {

            }
        }
    }
</script>

<style scoped lang="scss">
    .my-icon{
        width: 20px;
        height: 20px;
        fill: #00c585
    }
</style>