安装 svg-sprite-loader 和 svgo-loader

    1. yarn add --dev svg-sprite-loader svgo-loader

    在项目根目录新建 vue.config.js

    1. const path = require('path')
    2. module.exports = {
    3.   chainWebpack: (config) => {
    4.     const dir = path.resolve(__dirname, 'src/assets/icons')
    5.     config.module
    6.       .rule('svg-sprite')
    7.       .test(/\.svg$/) // 以.svg结尾
    8.       .include.add(dir)
    9.       .end() // 包含icons目录
    10.       .use('svg-sprite-loader')
    11.       .loader('svg-sprite-loader')
    12.       .options({ extract: false })
    13.       .end() // 配置svg-sprite-loader
    14.       // 不需要去除颜色则注释掉
    15.       // .use('svgo-loader')
    16.       // .loader('svgo-loader')
    17.       // .tap((options) => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] }))
    18.       // .end()
    19.     config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }]) // 配置插件
    20.     config.module.rule('svg').exclude.add(dir) // 其他svg loader排除icons目录
    21.   },
    22. }

    在eslintrc.js文件的 rules 里添加

    1.   rules: {
    2.     '@typescript-eslint/no-var-requires':0,
    3.   },

    封装Icon组件

    1. <template>
    2.     <div :class="icon_name">
    3.       <svg class="icon" aria-hidden="true">
    4.           <use :xlink:href="'#' + icon_name"></use>
    5.       </svg>
    6.     </div>
    7. </template>
    9. <script lang="ts">
    10.   // eslint-disable-next-line no-undef
    11. const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
    12. try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}
    14.   export default {
    15.     props: {
    16.       'icon_name': {
    17.         type: String,
    18.         require: true
    19.       }
    20.     },
    21.   }
    22. </script>
    25. <style lang="scss" scoped>
    26. .icon {
    27.   width: 1em;
    28.   height: 1em;
    29.   vertical-align: -0.15em;
    30.   fill: currentColor;
    31.   overflow: hidden;
    32. }
    33. </style>

    icon_name由symbol的 id 决定
    image.png