在一个基于 React 构建的项目里，你会采用哪些方式来引入并使用字体图标？

回答思路

1. 【回答框架 1】在 React 项目中使用字体图标，常见方式有基于 iconfont 的 Unicode 引用、Font class 引用和 Symbol 引用，以及第三方图标库如 react-icons、antd 的 Icon 组件。
2. 【回答框架 2】Unicode 引用通过 @font-face 引入字体文件，再用对应字符码显示图标，兼容性好，但语义不直观。Font class 方式基于 Unicode 但更易维护，通过 class 控制。
3. 【回答框架 3】Symbol 引用（SVG Sprite）将图标输出为 SVG 矢量图，通过 <use> 标签引用，支持多色图标，更灵活且渲染清晰，性能也更好。
4. 【回答框架 4】在 React 中，可将图标封装为组件，例如使用 Iconfont 组件，内部处理 <svg> 或 <i> 标签，并通过 props 控制大小、颜色。也可选择 react-icons 库，它是基于 ES6 导入的组件方式，按需引入且类型友好。
5. 【回答框架 5】选择方案时需考虑项目体量、团队熟悉度和维护成本。对于复杂团队协作，推荐 Symbol 或组件化封装；对于快速原型，可直接使用图标库。
6. 【关键点 1】支持三种 iconfont 方式：Unicode、Font class、Symbol，后者更灵活。
7. 【关键点 2】可用 react-icons 或 antd Icon 组件，按需引入减少打包体积。
8. 【关键点 3】推荐将字体图标封装为 React 组件以统一管理和传参。
9. 【易错点 1】频繁操作 DOM 去更新图标会导致性能问题，应利用虚拟 DOM。
10. 【易错点 2】字体图标的渲染可能受字体加载时机影响，需处理加载完成事件。