vue-cli3使用svg

在vue.config.js中，添加配置

  module.exports = {
      ...
      chainWebpack: config => {
          // 一個規則里的 基礎Loader
          // svg是個基礎loader
          const svgRule = config.module.rule("svg");

          // 清除已有的所有 loader。
          // 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之後。
          svgRule.uses.clear();

          // 添加要替換的 loader
          svgRule
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({
              symbolId: "icon-[name]"
          });
      },
      ...
  }

創建vue公共svg組件svgIcon.vue

  <template>
  <svg :class="svgClass" aria-hidden="true">
      <use :xlink:href="iconName" />
  </svg>
  </template>
  <script>
  export default {
  name: "svgIcon",

  props: {
      iconClass: {
          type: String,
          required: true,
      },
      className: {
          type: String,
          default: '',
      },
  },

  computed: {
      iconName () {
          return    `#icon-${this.iconClass}`
      },
      svgClass () {
          if(this.className) {
              return `svg-icon${this.className}`
          }else {
              return 'svg-icon'
          }
      },
  },
  }
  </script>
  <style lang="scss" scoped>
  .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
  }
  </style>

新建svg-icon文件夾，文件夾下包含svg和index.js，分別為svg原文件和引入代碼。index.js內容為：

  import Vue from 'vue'
  import svgIcon from '@/components/svgIcon'

  Vue.component('svg-icon', svgIcon)   // 掛載在全局

  const requireAll = requireContext => requireContext.keys().map(requireContext)
  const req = require.context('./svg', false, /\.svg$/)
  requireAll(req);

使用 <svg-icon icon-class="svgname" /> // svgname必須與/svg-icon/svg/下的svg文件命名一致。