首页分享【React】在项目中使用阿里图标库

【React】在项目中使用阿里图标库

来源：花匠小妙招时间：2025-05-13 17:36

### 如何在 React 中引入并使用阿里图标库 #### 方法一：通过 `@ant-design/icons` 封装组件可以利用 `@ant-design/icons` 提供的工具函数 `createFromIconfontCN` 来创建自定义图标组件。以下是具体实现方式： 1. **安装依赖** 需要先确保项目中有 `antd` 或者单独安装 `@ant-design/icons` 库。 ```bash npm install @ant-design/icons ``` 2. **创建封装组件** 创建一个新的文件，比如命名为 `IconFont.jsx`，并将以下代码放入其中： ```javascript import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2235432_bfzmqr9xg9h.js', // 这里的 URL 是从阿里矢量图标库获取的动态链接[^2] }); export default IconFont; ``` 3. **在项目中使用** 在需要使用的组件中导入刚刚创建的 `IconFont` 并渲染它： ```jsx import React from 'react'; import IconFont from './IconFont'; function App() { return ( <div> <IconFont type="icon-example" /> {/* 替换为实际图标的名称 */} </div> ); } export default App; ``` --- #### 方法二：通过 `<link>` 标签加载 CSS 文件可以直接在 HTML 文件或者项目的入口文件中引入阿里图标库提供的 CSS 文件。 1. **引入 CSS 文件** 找到阿里矢量图标库中的目标图标集合，并复制其提供的 CSS 地址，在项目中加入以下代码： ```html <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4125574_ddej9qmvgns.css" /> ``` 上述地址需替换为你自己的图标集地址[^4]。 2. **使用图标类名** 使用时只需按照指定的类名来调用即可： ```jsx import React from 'react'; function App() { return ( <i className="iconfont icon-your-icon-name"></i> {/* 替换为实际图标的 class 名称 */} ); } export default App; ``` --- #### 方法三：UMI 框架下的优雅集成方法如果正在使用 UMI 框架，则可以通过配置简化流程。 1. **修改 `.umirc.ts` 或 `config/config.ts` 文件** 添加如下配置项以自动注入所需资源： ```typescript export default { links: [ { rel: 'stylesheet', href: '//at.alicdn.com/t/c/font_4125574_ddej9qmvgns.css' }, // 图标库的 CSS 地址[^3] ], }; ``` 2. **页面中直接使用** 定义好之后可以在任意 JSX 页面中直接写入类似下面的内容： ```jsx import React from 'react'; function ExampleComponent() { return <span><i className="iconfont icon-yueliang" /></span>; } ``` --- #### 总结以上三种方法分别适用于不同场景和技术栈的选择。对于小型应用可以选择简单的方式如 Method Two；而对于大型工程推荐采用更模块化的设计方案如 Method One 和 Three。