Two Ways Use SVG Icons In vue-cli3 Based Project

npm install --save-dev iconfont-webpack-plugin

// vue.config.js
// Add IconfontWebpackPlugin instance to plugins of postcss-loader options
const IconfontWebpackPlugin = require('iconfont-webpack-plugin')

function tapPostcssLoaderOptions(config, moduleRule, rule) {
  config.module
    .rule(moduleRule)
    .oneOf(rule)
    .use('postcss-loader')
    .loader('postcss-loader')
    .tap(options => {
      const iconFontOptions = {
        plugins: (loader) => {
          return [
            new IconfontWebpackPlugin(loader),
          ];
        },
      };
      Object.assign(options, iconFontOptions);
      return options;
    });
}

function configIconFont(config) {
  // Sass is the pre-processor of my project
  // Replace with yours
  // 
  // Tips
  // Use `vue inspect --rules` view rules used in project
  // Use `vue inspect --rule scss` view special rule
  const moduleRules = ['scss', 'css'];
  const rules = ['normal', 'normal-modules', 'vue', 'vue-modules'];
  for (let i = 0; i < moduleRules.length; i++) {
    const moduleRule = moduleRules[i];
    for (let i = 0; i < rules.length; i++) {
      const rule = rules[i];
      tapPostcssLoaderOptions(config, moduleRule, rule)
    }
  }
}

module.exports = {
  chainWebpack: config => {
    configIconFont(config);
  },
};

<template>
    <div>
        <span class="class-name-use-svg-icon"></span>
    </div>
</template>

<style lang="scss">
.class-name-use-svg-icon {
    &:before {
        font-icon: url('../../src/svg-icons/spanner.svg');
    }
}
</style>

npm install --save-dev svg-sprite-loader svgo-loader

// vue.config.js

function configSVGIcon(config) {
  // Exclude SVG sprite directory from default svg rule 
  config.module
    .rule('svg')
    .exclude.add(path.resolve(__dirname, './src/svg-icons'))
    .end();
  
  // Options used by svgo-loader to optimize SVG files
  // https://github.com/svg/svgo#what-it-can-do
  const options = {
      "plugins": [
        { "cleanupAttrs": true },
        { "cleanupEnableBackground": true },
        { "cleanupIDs": true },
        { "cleanupListOfValues": true },
        { "cleanupNumericValues": true },
        { "collapseGroups": true },
        { "convertColors": true },
        { "convertPathData": true },
        { "convertShapeToPath": true },
        { "convertStyleToAttrs": true },
        { "convertTransform": true },
        { "mergePaths": true },
        { "removeComments": true },
        { "removeDesc": true },
        { "removeDimensions": true },
        { "removeDoctype": true },
        { "removeEditorsNSData": true },
        { "removeEmptyAttrs": true },
        { "removeEmptyContainers": true },
        { "removeEmptyText": true },
        { "removeHiddenElems": true },
        { "removeMetadata": true },
        { "removeNonInheritableGroupAttrs": true },
        { "removeRasterImages": true },
        { "removeTitle": true },
        { "removeUnknownsAndDefaults": true },
        { "removeUselessDefs": true },
        { "removeUnusedNS": true },
        { "removeUselessStrokeAndFill": true },
        {
          "removeAttrs": { "attrs": "fill"} //移除fill属性
        },
        { "removeXMLProcInst": true },
        { "removeStyleElement": true },
        { "removeUnknownsAndDefaults": true},
        { "sortAttrs": true }
      ]
    };
  
  // Include only SVG sprite directory for new svg-icon rule
  // Use svg-sprite-loader to build SVG sprite
  // Use svgo-loader to optimize SVG files
  config.module
    .rule('svg-icon')
    .test(/\.svg$/)
    .include.add(path.resolve(__dirname, './src/svg-icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]',
    })
    .end()
    .use('svgo-loader')
    .loader('svgo-loader')
    .options(options)
    .end();
}

module.exports = {
  chainWebpack: config => {
    configSVGIcon(config);
  },
};

// src/components/SvgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="name"></use>
  </svg>
</template>

<script>
// https://webpack.js.org/guides/dependency-management/#context-module-api
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../svg-icons', false, /\.svg$/)
requireAll(req)

export default {
  name: 'SvgIcon',
  props: {
    iconName: {
      // icon filename
      type: String,
      required: true,
    },
    className: {
      // css class name
      type: String,
      default: '',
    },
  },
  computed: {
    name() {
      let icon = this.iconName
      return icon ? `#icon-${icon}` : ''
    },
    svgClass() {
      let className = this.className
      return className ? `svg-icon ${className}` : 'svg-icon'
    },
  },
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* important */
  overflow: hidden;
}
</style>

// Remember to copy svg files to svg-icons directory under src
<template>
    <div>
        <svg-icon icon-name="settings"></svg-icon>
    </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
    components: {
      SvgIcon
    },
}
</script>