如何在项目中使用svg-sprite-loader加载icon

为什么越来越多的icon使用svg:

svg是一种可缩放矢量图形，可用于描述二维矢量图形格式。它相比传统的图片有以下优势：

1.有良好的兼容性，可被非常多的工具读取和修改（比如记事本）

2.比传统的图片尺寸和体积更小，压缩性更强

3.在任何分辨率下可以被高质量打印

4.可在不降低图像质量的情况下进行放大

如何在项目中引入svg icon

  1. 使用img标签引入svg：
<img src="a/b/c/d/xxx.svg"/>
// 缺点：繁琐的路径不利于维护和阅读，不易于修改svg的样式

2.使用svg-sprite-loader加载svg icon：通过该loader，我们可以直接使用svg的id（文件名）引入，不再需要添加繁琐的路径，并且可以随意更改icon的颜色

第一步：安装svg-sprite-loader

npm install svg-sprite-loader -D
# or
yarn add svg-sprite-loader -D

第二步：配置webpack.config中使用svg-sprite-loader

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader'
}

第三步：使用svgo-loader去掉svg中的填充色fill，方便自定义icon的填充色

npm install svgo svgo-loader --save-dev
# or
yarn add svgo svgo-loader -D

第四步：批量导入svg icon

// yarn add @types/__WebpackModuleApi 添加类型__WebpackModuleApi 

let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("icons", true, /\.svg$/));
} catch (error) {
  console.log(error);
}

第五步：在任何地方直接使用文件名引入icon

// 加载xxx.svg
<svg>
  <use xlinkHref="#xxx" />
</svg>


编辑于 2020-08-07 23:21
SVG
Icon Font