Vue 加载 svg icon - “vue-svg-loade

前面我们介绍了通过先将 svg 模板加载到 body 中，然后再通过 use 标签去实例化 svg 的方式去加载 svg；见 Vue 加载 svg icon

这里介绍另一种方式 vue-svg-loader，用起来还是挺方便的，配置也简单，直接参考官方 readme 就可以搞定；
Vue CLI 官方关于 webpack 相关 替换一个规则里的 Loader 举的一个例子，也是用的这个loader；

首先是安装

npm i -D vue-svg-loader

然后是配置loader

配置分cli2 和 cli3

• cli2 创建工程中 webpack 配置

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

• cli3

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

    svgRule
      .use('vue-loader')
      .loader('vue-loader') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

最后就能像使用普通Vue组件那样使用 svg icon 了

<template>
    <div>
      <VueLogo />
    </div>
</template>
<script>
// VueLogo 可以随意 rename
import VueLogo from './public/vue.svg';
export default {
  name: 'Demo',
  components: {
    VueLogo
  }
};
</script>