svg-sprite-loader的使用

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文件做处理