参考文章：www.cnblogs.com/xingxingzi/…

1.首先要下载依赖----svg-sprite-loader

npm i svg-sprite-loader

2.项目中找到build-> webpack.base.conf.js文件配置下面的内容

1)添加

  {
   test:/\.svg$/,
   loader:"svg-sprite-loader",
   include:[resolve('src/icons')],
   options:{
   symbolId:'icon-[name]'
   }
  }

2)修改--在下边的代码块中添加--exclude:[resolve('src/icons')]

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')],
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},

3.封装组件---在components中新增文件夹-SvgIcon-index.js

index.js文件的内容

 <template>
  <svg class="icon-name">
    <use :xlink:href="iconName" />
  </svg>
 </template>
 <script>
  export default {
   name:"svgicon",
   props:{
     iconClass:{
         type:String,
         require:true,
     }
   },
   computed:{
      iconName() {
      return `#icon-${this.iconClass}` ;
      }
   }
  }
 </script>
 <style lange="scss" scoped>
   .svg-icon {
    width:1em;
    height:1em;
    vertical-align: -0.15em;
    fill:currentColor;
    overflow: hidden;
}
 </style>

4.引入字体图标，在src文件夹下，创建icons文件夹，

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon);

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

5.在main.js中引入icons

import './icons'

6.直接使用svg-icon标签

<svg-icon icon-class="systemMange"></svg-icon>

我在写的时候遇到的问题---use标签一直为0--手动设置大小也不管用

微信图片_20220324174345.png 原因：（只怪自己太马虎）

vue项目封装svg-icon组件