212 - 《Umi 最佳实践：Icons 使用》

计划近期每周更新 1 篇 Bigfish 2022 版的最佳实践，这是第 6 篇。

问题

你是不是觉得使用 Icons 非常简单？在项目里存 svg 文件，然后 import 过来使用就可以？这能有啥问题？

import IconUrl, { ReactComponent as IconComponent } from './icon.svg';

1、以上是 Umi/Bigfish 内置支持的作为 url 和 react component 两种方式。但如果不加约束，用法会千奇百怪。@依鹭 同学两年前就整理过，光统计到的就有 7 类 11 种用法，可能会被用作 DOM、图片、CSS 背景、字体等等。怎么选？当时有做过最佳实践，但在 Bigfish 4 时先下了，因为有想到更好的方案。

2、昨天有整理一篇《你不知道的 9 个 @ant-design/icons 使用问题》，虽然官方只推荐了一种，但在实际使用中却有很多人不遵守，在 code.alipay.com 上搜一下就会发现有数千条非入口的引用方式。大家没有从入口引我觉得初心是好的，希望多写点代码也要手动减少产物大小，但结果除了让代码不一致，还会导致产物变大、重复、构建变慢、类型不安全、单测不兼容等问题。

3、svg 你会用外链（单独的请求）还是内联（inline base 64）？标准答案是以 10K 为界，小于的内联，大于的外链。这是 Umi/Bigfish 的内置配置，但这真是标准答案吗？外链可能会导致闪烁，而内联则有几个你可能不知道的问题。1）当以 base 64 用于 CSS 背景属性时，写几个就会重复几个，造成产物尺寸增加，因为 CSS 没有变量的概念（或者有但目前出于兼容考虑不会用），2）缓存随着 JS 走，容易失效，不像外链一样有单独的 url 单独的缓存，3）会增加 JS 的尺寸，有一份额外的 JS 代码解析消耗。

4、使用 Icon 时通常还会做一些属性调整，比如基础的 size、viewBox、fill、style，以及进阶的 spin、rotate、twoToneColor。Ant Design Icons 有提供封装，但使用本地的 Icon 或其他 Icon 集时，并不是每个地方都有提供封装的，如何做、如何保证开发体验的一致