标题:antd icon本地部署

做前端开发的，谁没被那个该死的CDN搞崩过心态？

真的，太搞人心态了。

每次刷新页面，那个loading转圈圈，转得我心烦意乱。特别是当你的项目部署在内网，或者客户网络环境极差的时候。

antd的图标库，默认是从 unpkg 或者 jsdelivr 加载的。

听起来挺高大上，实际上就是给你挖坑。

一旦外网抽风，或者那个CDN节点挂了，你的图标就全没了。

变成一个个小方块，丑得让人想砸键盘。

我干了八年大模型，也看了太多前端项目，这种低级错误真的不该再犯了。

今天不扯那些虚的，直接说怎么解决。

你要做的，就是把 antd icon本地部署 搞起来。

第一步，别犹豫，直接npm装。

npm install @ant-design/icons

简单粗暴，这是基础。

但是，很多人装完就完了，以为万事大吉。

错！大错特错！

如果你还在用那种 import { IconName } from '@ant-design/icons' 的方式，然后让webpack去打包。

恭喜你，你的打包体积又大了几兆。

虽然现在tree shaking很厉害，但为了几个图标，没必要让构建工具累死累活。

更优雅的做法，是按需引入，或者更极致的，直接静态化。

但我推荐大家试试这种折中方案。

在项目的公共目录里，建一个icons文件夹。

把你需要用到的图标，全部生成SVG。

怎么生成？

用那个 @ant-design/icons-svg 包。

npm install @ant-design/icons-svg

然后写个简单的脚本，或者手动去官网下载SVG。

把SVG文件存到本地。

比如 src/assets/icons/plus.svg

然后在你的组件里，直接引用这个文件。

或者用CSS background-image。

这样，图标就成了你项目的一部分。

不管外网怎么崩，你的图标都在那里，稳如老狗。

这就是 antd icon本地部署 的核心逻辑。

有人可能会说，这样维护麻烦啊。

图标更新了怎么办？

确实，这是个问题。

但你想过没有，你项目里真的会用到几百个图标吗？

大部分时候，也就几十个。

把这几个常用的图标拎出来，本地化，完全没问题。

剩下的那些冷门图标，偶尔用一下，再去CDN加载也不迟。

这就叫灵活。

别追求那种极致的完美主义，那是给老板看的，不是给开发者用的。

我们要的是稳定，是快速，是心里踏实。

我记得有个项目，客户在偏远山区，网速慢得像蜗牛。

以前用CDN，加载图标要好几秒。

后来我们做了 antd icon本地部署 ，把核心图标都本地化了。

加载速度直接从3秒变成0.1秒。

客户那个激动啊，差点请我们吃饭。

这就是价值。

还有，要注意一点。

如果你用了TypeScript，记得定义一下类型。

不然IDE提示会很难看。

定义一个接口，把SVG文件映射成React组件。

这样写代码的时候，才有那种丝滑的感觉。

别小看这个细节。

写代码嘛，就是要写得爽。

如果IDE连个提示都给你不了，那还怎么干活？

最后，再说个坑。

有些老项目，还在用 v4 版本的 antd。

v4 的图标库结构和 v5 不太一样。

v5 更模块化，更好用。

如果条件允许，建议升级到 v5。

v5 对 icon 的支持更好，而且自带主题定制。

你可以自定义图标的颜色，甚至做动画。

这才是现代前端该有的样子。

别总是抱着旧代码不放。

技术是在进步的，你也得跟着进步。

不然，迟早被时代抛弃。

好了，啰嗦了这么多。

核心就一句话。

把那些高频使用的图标，从CDN上拽下来，放到本地。

这就是 antd icon本地部署 的精髓。

简单，有效，不装逼。

希望能帮到正在被CDN折磨的你。

如果觉得有用，点个赞再走。

毕竟，写这种干货，也挺累的。

别让我白忙活一场。

记住，代码是写给人看的，顺便给机器执行。

让人看得舒服，机器跑得飞快，这才是好代码。

加油吧，打工人。