1.先在package.json中引入，安装,npm install svg-sprite-loader --save-dev
2.在webpack配置文件中，module-rules添加
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options:{
symbolId:'icon-[name]'
}
}
⚠️注意
2.1 options可以不要，默认的id是svg文件名=name
2.2 使用svg时，id形式与symbolId保持一致
<svg>
<use xlink:href="#icon-warn"></use>
</svg>
3.引入svg图标，为了方便可把所有svg图标放在一个文件夹中，外面放一个index.js，全部引入
const requireAll = requireContext=> requireContext.keys().map(requireContext)
const req = require.context('./svg',false,/\.svg$/)
requireAll(req)
export default req
4.在webpack打包的入口entry的文件中引入index.js，图标就可以正常显示了。
可以看到body下有一个svg标签，里面整合了所有的svg图标，每个symbol都有对应ID。
5.如果还是不行，可以是其他loader（如url-loader）也对svg格式的文件做处理，清除掉其他对svg的规则即可。
如果只想对一部分svg文件做处理，或者引用其他插件中也有svg，只需处理自己的文件，那么在rules中添加
include:[
path.resolve(__dirname, '../src/assets'),
],只对src下assets中的svg文件做处理
