聊聊 React 组件库的技术选型与设计

base64 引入

base64 也是一种常用的方法，但是由于将 svg 作为背景图引入，只能控制它的大小，不能覆盖它的颜色，也更不能修改 svg 内部的元素，不够灵活。对于常常采用 MPA 结构的端内 h5，不利于 icon 在不同 SPA 之间复用。同时 base64 字符串的长度是 svg 文件（优化后）的 1.3 倍左右。

React Component、SVGUseElement 和直接写入 svg 元素

这三种方式本质上都是将 svg 作为 html 元素进行渲染，但具体的使用方式不同。

svg 的基本能力的兼容性除了在 IE11 以下不支持动画和缩放，基本没问题，而 svg effect(主要是使用 transform、filter 等属性)在 android4.4 以上的支持良好。svg 的动画性能有瓶颈，幸运的是我们可以使用 css 动画来替代它。

直接写入 SVG 元素的方式缺点在于完全无法复用同一个 icon。

而 SVGUseElement 的具体实现方式有使用 元素、 元素和 SVG fragment identifiers 等方式，但总的来说，都是在顶部声明 svg 元素，在需要使用的地方使用 元素引入。具体可以参考使用 SVGUseElement 插入 icon 的例子[1]。它的缺点在于 不够灵活，icon 难以在不同页面复用，同时支持 SSR 也比较困难。

目前调研的结果，最好的方式是使用 svgr[2] 将 svg 转换为 React Component 来使用，它支持按需加载、完全的样式覆盖能力。同时，它支持自定义 AST 模板，可以在转换时给 svg 元素加入自定义的 className 等，容易实现 icon 自动适配 RTL、Dark Mode(这部分下文会详细介绍)。

svgr 集成了 svgo 对 svg 文件进行优化，它可以抹去 svg 中无用的属性、隐藏元素等，具体的配置可以参考 svgo-github[3]。

小结：目前看来使用 svgr 将 svg 转换生成 React Component 来构建 icon 是最佳的方式，能很方便地按需加载、复用，适配能力也最强。我们可以将 icon 专门做成一个 npm 包**，供组件库使用，也可以在业务仓库中直接使用。**

组件库的核心设计

========

深色模式（Dark Mode）适配

---

事实上，本小节讨论的是业务上使用组件库的 Dark Mode 能力时会遇到的兼容性问题和实际业务场景。但组件库本身就是服务于业务的，从这个角度讲本小节的内容也属于组件库相关的一部分，它指导组件库如何去提供更好的 Dark Mode 适配能力。

多主题能力

深色模式本质上是一种运行时的多主题问题，主要是在运行时支持切换不同的主题色。我们可以使用 CSS 变量来定义颜色，然后在 Sass/Less/Css 中约定使用它：

:root{

–bg-default: #fff;

<