使用 svg-sprite-loader 批量引入 icon

1、推荐阿里 iconfont

2、使用前的一些配置

3、svg 图标的引入和使用

1、推荐阿里 iconfont

前端在做项目的过程中，都会频繁使用图标，记得几年前还是流行使用 CSS Sprite 雪碧图，它的好处有减少 HTTP 请求数，提高性能，节省一些流量等等，但是使用 CSS Sprite 雪碧图的方式也有一些缺点，比如图片拼接合成麻烦且耗时，后期如果需要追加小图标，则大的雪碧图维护起来比较繁琐，最好只是往下加图片，而不要更改已有图片，而且对每个需要记录每个图标的精确位置，这就会给设计师和开发人员带来不少的麻烦。

最近几年前端比较流行的是使用 iconfont 图标 symbol 引用方式，这里推荐阿里的 iconfont 矢量图标库，iconfont 有多种引入方式，其中主流的是 svg（本质就是一串xml），它的好处有很多，比如：支持多色图标了，不再受单色限制。支持像字体那样通过 font-size,color 来调整样式。矢量，缩放不失真，而且满足减少HTTP请求次数的需求。

2、使用前的一些配置

第一步：将 svg 格式的图标导入项目中，可以通过 `import svg from '@/assets/icons/home.svg'` 的方式引入，如果你的项目是 TypeScript 开发的话，在你写上面这条语句时会报错，StackOverflow 查一下，需要在 shims-vue.d.ts 文件追加声明：

1
2
3
4

declare module "*.svg" { //防止import svg时报错
const content: string;
export default content;
}

如果这个时候，在 import 语句后打印 svg 会打印出一个 .svg 的文件路径，这并不是我们所需要的，还需额外的配置才行。

第二步：我们还需要使用一个 svg-sprite-loader 的东西，来加载一下 svg 图标。根据文档安装 svg-sprite-loader 后，文档上说了需要在 webpack.config.js 文件中配置以下，但是问题是我们使用 Vue CLI 创建的项目没有这个文件，只有 vue.config.js，所以要将 webpack 的配置翻译过来，写在 vue.config.js 文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const path = require('path'); //使用require报错：可改.eslintrc.js配置、可改成import、可写 eslint ignore注释

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/charge-website/'
: '/',
lintOnSave: false,
chainWebpack: config =>{
const dir = path.resolve(__dirname, 'src/assets/icons') //svg图标的路径

config.module //vue将webpack封装后暴露出来的config接口
.rule('svg-sprite') //添加规则
.test(/\.svg$/) //匹配.svg为结尾的文件
.include.add(dir).end() // 只包含 icons 目录的路径
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end() //不需要解析成文件
//.use('svgo-loader').loader('svgo-loader') //删除svg中的fill填充色、npm install --dev svgo-loader一下
//.tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})) //删除svg中的fill填充色
config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录：loader 分功避免冲突
}
}

这个时候在 import 语句后打印 svg 会打印出一个标签，而且在标签中会出现一个

3、svg 图标的引入和使用

通过上述配置，svg-sprite-loader 会把 import 引入的 svg 解析成对应的 symbol，将其插入到页面的 body 标签中的

1
2
3
4
5
6
7
8
9
10
11
12

<svg>
<use xlink:href="#labeL">
</svg>

<script lang="ts">
//import svg from '@/assets/icons/home.svg' //这样每个图标引入一次比较麻烦

//直接引入/assets/icons目录下的所有svg图片，批量引入更加方便
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}
<script>

通过 symbol 引用方式，有的图标不能通过 color 修改颜色的解决办法，有的又可以。

1
2
3

原因是，当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在 svg 的 path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在 symbol 的 js 文件中程序删除 fill 属性。