探究svg-icon的实现原理

前言

React 的UI框架 Ant Design 在 3.9.0版本之后，使用 SVG 图标替换了原先的 font 图标，给出的说明如下：

1. 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。

2. 在低端设备上 SVG 有更好的清晰度。

3. 支持多色图标。

4. 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。

本文旨在研究如何实现svg-icon组件，并给出 vue(vue-svg-icon源码)、react (react-svg-icon)两种框架内的实现方式。

svg的优点

• 缩放无损，比字体图标更清晰
• 支持多色

svg 的用法

symbol、use

svg-sprite-loader

先说说 raw-loader 和 svg-inline-loader , 将文本文件的内容读取出来，注入 JavaScript 或 CSS 中。

require.context实现自动导入

核心就是循环 require

svgo-loader 精简

对 svg 文件进行精简，去除不必要的部分代码，比如注释

vue svg-icon 组件

vue-cli 3

react svg-icon 组件

create-react-app

参考

手摸手，带你优雅的使用 icon
基于svg-sprite的svg icon方案实践
webpack require.context 用法

vue相关
怎么在 vue-cli3.0 中使用 svg-icon 组件？
VUE-cli3使用 svg-sprite-loader
webpack loader用法
vue-svg-icon
svgo-loader

react 相关
如何扩展 Create React App 的 Webpack 配置
react-app-rewired
change-webpack-config-create-react-app-without-ejecting