ant design Icon.createFromIconfontCN 添加iconFont 失败并报错问题解决

5 篇文章 0 订阅
5 篇文章 0 订阅

当页面需要使用较多字体图标时, antd内置的字体图标库满足不了开发需求。这时我们需要去寻找一些外部字体图标。
antd 内部提供了一个跟阿里矢量图标衔接的方法: Icon.createFromIconfontCN,
通过这个方法,我可以去阿里矢量图标库找到开发所需要的图标,并生成symbol代码。通过 Icon.createFromIconfontCN方法生成图标组件

可以把symbol代码放入cdn 也可以放入本地。当 放入本地的时候需要注意路径的问题
import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: './font_8d5l8fzk.js',
});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);
注意!

把symbol代码放到当前页面目录下,并且用./font_8d5l8fzk.js 引用,这样可能会无效。
因为不是import 引入 ,webpack打包的时候,并不会解析./font_8d5l8fzk.js的路径,symbol代码不会被打包进去,这时页面获取的./font_8d5l8fzk.js,是错误的。

解决方法 :

我们应该把symbol代码,放在静态目录下,或者cdn上。
放在项目的静态目录文件夹时,例如放在 assets文件夹js目录下,就可以使用./assets/js/font_8d5l8fzk.js
保证获取到正确的symbol代码

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '.assets/js/font_8d5l8fzk.js',
});
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: antdesign3.9.x 是一个基于 React 开发的开源 UI 组件库。它提供了丰富的组件和样式,可以帮助开发者搭建精美且高效的 web 应用界面。 antdesign3.9.x 的特点之一是具有响应式的设计,可以适应不同大小的屏幕和设备。它提供了多种布局组件和响应式工具,可以方便地进行页面的排版和布局。无论是在桌面、平板还是手机上访问,用户都可以获得一致的使用体验。 antdesign3.9.x 还拥有丰富的组件库,包括按钮、输入框、下拉菜单、表格、弹窗等常用组件,可以满足大部分前端开发的需求。这些组件具有丰富的样式和功能,可以通过简单的配置实现复杂的交互效果。开发者只需要按照文档中的示例,引入相应的组件即可快速搭建界面。 除了基础组件外,antdesign3.9.x 还提供了一些特殊的组件,如日历、图表、地图等,可以帮助开发者实现特定的功能。这些组件通常具有良好的扩展性,可以通过配置参数和事件回调实现不同的效果。 另外,antdesign3.9.x 还提供了一套可定制的主题系统,开发者可以根据自己的需要自定义组件的样式和风格。除了预设的主题色,还可以进行更细粒度的定制,如字体、边框颜色等。这使得开发者可以根据自己的品牌和设计风格定制界面,使应用更加独特和个性化。 总而言之,antdesign3.9.x 是一个功能强大且灵活的 UI 组件库,可以帮助开发者快速构建出符合标准设计规范的优秀界面。无论是个人项目还是企业级应用,antdesign3.9.x 都是一个值得选择的工具。 ### 回答2: Ant Design 是一个基于 React 的 UI 组件库,Ant Design 3.9.x 是其当前版本。Ant Design 提供了丰富而强大的组件,使开发者能够快速构建美观、易用的用户界面。 Ant Design 3.9.x 版本有以下特点和更新: 1. 支持响应式设计:Ant Design 可以根据不同的屏幕大小和设备自动调整布局,确保在任何设备上都有良好的用户体验。 2. 主题定制:Ant Design 提供了易于定制的主题机制,开发者可以根据自己的需求轻松地定制组件的样式和颜色。 3. 新增组件:3.9.x 版本引入了一些新的组件,如卡片(Card)、上传(Upload)和步骤条(Steps),提供了更多的选择和功能。 4. 优化和 bug 修复:每个版本都会对已有组件进行优化和 bug 修复,以提高性能和稳定性。 5. 文档和社区支持:Ant Design 提供了详尽的文档和示例,开发者可以快速学习和使用组件。此外,Ant Design 还有活跃的社区支持,开发者可以在社区中提问和交流。 Ant Design 3.9.x 版本是一个成熟稳定的版本,使用它可以让开发者快速构建现代化的 Web 应用程序。无论是新项目还是现有项目的升级,Ant Design 都是一个值得考虑的选择。 ### 回答3: Ant Design 是一款基于 React 技术栈的企业级 UI 设计语言和前端组件库。而 Ant Design 3.9.x 是 Ant Design 在其开发历程中的一个版本。Ant Design 3.9.x 版本是该组件库的中间版本之一,具有一定的成熟度和稳定性。 Ant Design 3.9.x 版本在之前版本的基础上进行了不少优化和改进。这个版本中可能会包含一些新的组件或者功能,也可能包含一些已有组件的更新或修复。Ant Design 团队通常会在每个版本中根据用户的反馈和需求进行功能的增加和优化。所以 Ant Design 3.9.x 版本的发布可能会带来一些新特性和更好的用户体验。 Ant Design 提供了一系列高质量的 UI 组件,例如按钮、表格、表单等,可以用于构建现代化且美观的交互界面。Ant Design 的组件设计遵循了一套统一的设计规范和原则,使得用户可以非常方便地进行开发和定制。Ant Design 还提供了丰富的主题定制能力,用户可以根据自己的需求轻松地进行样式的修改和扩展。 Ant Design 3.9.x 版本的发布说明中可能会提到一些新增的组件、样式变更、API 更新等内容,开发者可以根据自己的项目需求和现有代码进行相应的升级。同时,Ant Design 团队还会提供详细的文档和示例,帮助开发者理解和使用新版本的特性。 总结来说,Ant Design 3.9.x 是 Ant Design 在其演化发展过程中的一个版本,它是基于 React 的企业级 UI 组件库,提供丰富的组件和优雅的设计,并且不断进行版本迭代和改进,为开发者提供更好的开发体验和更符合用户期望的界面效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值