概述

在vue使用中我们经常会用到svg图标，这里我们使用svg-sprite-loader,它是一个webpack插件，作用是将我们的静态svg资源拼接成雪碧图，加载到页面中加以复用。

安装

  1. npm i -D svg-sprite-loader

配置

  1. 将svg图标放置到静态资源文件夹中

image.png

  1. 配置vue.config.js
    • svg后缀统一交给svg-sprite-loader处理，同时让file-loader忽略它，在chianWebpack中配置，图中路径不正确，应为上图中静态文件路径，这里注意options选项可以用来配置前缀名称

image.png

  1. 引入
    • 这里我们结合webpack的require.context来引入
    • 静态资源路径下添加index.js
    • 在入口的main.js中引入所有svg
  2. 添加全局组件，这里不用多说了，自由发挥

image.png