Ant Design Pro 项目中iconfont本地化

Ant Design离线部署Iconfont

最新推荐文章于 2025-09-09 00:05:29 发布

原创最新推荐文章于 2025-09-09 00:05:29 发布 · 9.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react #ant design #ant design pro #iconfont

web前端开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何将Ant Design中的Iconfont从阿里云CDN切换到本地部署，包括安装自定义图标包和修改iconfont.less文件的具体步骤。

要解决的问题

1.antd默认iconfont指向的是阿里在公网CDN上部署的url

2.项目需要在本地进行部署，使用的是本地文件的访问方式，希望能内网/离线使用

在ant-design-pro中的配置方法

1.安装antd-iconfont(自己下载的字体图标当然也可以，对应修改步骤2中的路径即可)

$ npm install antd-iconfont

2.修改antd中的iconfont引用地址

找到antd中的iconfont.less文件，添加下图红线画出的语句

3.重新运行项目，OK，搞定！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wangyu3c

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何将Ant Design Icon本地化

红莲开梦里

05-17

5886

本文主要解决：在内网/离网环境使用React+Ant Design进行项目开发时，Icon显示异常问题；离线使用IconFont步骤：1、在 ( iconfont.cn ) 上把Ant图标下载到本地。（下载方式参考：https://blog.csdn.net/guoyangyang123456/article/details/70314210）2、把下载的Iconfont放到以...

antddesign使用iconfont的字体库和图标库

WwLK123的博客

05-31

385

本文介绍了在antddesign中使用iconfont的两种方法。第一部分讲解如何导入和使用自定义字体：下载字体文件并放置到项目目录，创建字体CSS文件，在main.js中引入，最后通过fontFamily样式属性使用。第二部分演示如何使用iconfont图标：通过createFromIconfontCN创建图标组件，提供脚本URL和图标类型。同时说明如何在iconfont平台获取图标项目的Symbol链接并替换type值。两种方法都给出了详细的步骤说明和代码示例。

1 条评论您还未登录，请先登录后发表或查看评论

antd pro离线引入iconfront图标

wscwj8的博客

06-05

1520

选择iconfront图标 - 添加入库添加至项目，没有就随便新建一个上面图标管理 - 我的项目切换到 Symbol，并点击红字生成代码把生成的代码链接打开，复制代码在antd pro的public目录新建 iconfont.js 把代码粘贴进去生成：const IconFont = Icon.createFromIconfontCN({ scriptUrl: '/iconfont...

antd-design库iconfont字体本地化

最新发布

gitblog_01140的博客

09-09

676

在现代Web应用开发中，前后端分离架构（Frontend-Backend Separation Architecture）已成为主流。然而，接口设计不当导致的对接效率低下、数据格式混乱、错误处理繁琐等问题，仍然困扰着许多开发团队。根据Stack Overflow 2024年开发者调查，**37%的项目延期**源于接口设计缺陷。本文将以Ant Design Pro（以下简称"Pro项目"）为基础...

在ant design pro项目中引入iconfont图标

斑斓小星愿的博客

11-07

6410

在做react的项目时引入了ant design组件库，由于组件库的图标有限，想在项目中引入更多的图标，查了半天终于找到了解决办法。解决办法进入阿里巴巴图标库网站登录选择自己需要的图标，加入购物车。点击选择之后的购物车，选择添加至项目，如果没有项目，可以新建。下载图标至本地，解压文件，找到iconfont.js文件。将iconfont.js文件放入 utils文件夹中。在...

react/antd-pro本地引入iconfont

weixin_43735321的博客

09-26

946

react/antd-pro本地引入iconfont****最终方案:**** 在网上找了很多例子,但是都不好用. 1.第一种实现方式需要引入 antd的Icon组件,但是antd4.0版本已经弃用了 const IconFont = Icon.createFromIconfontCN({ scriptUrl: iconFont }) 2.第二种实现方式需要在 defaultSettings.ts 的iconfontUrl 中填入链接,但是我的没有实现,所以放弃了 const proSettings: De

Ant Design Pro使用笔记

journeyIT的博客

03-02

2433

一、安装 dva-cli cnpm install dva-cli -g 二、创建应用 dva new dva-project 三、启动应用 cd dva-project npm start 四、安装并使用antd cnpm install antd babel-plugin-import --save 编辑.webpackrc，使babel-plugin-impor...

基于 Ant Design Pro 的企业级中后台前端解决方案

该项目以 Ant Design Pro 为核心框架，结合现代前端工程化实践，提供了一整套开箱即用的功能模块和开发规范，极大提升了中后台系统的开发效率与维护性。Ant Design Pro 是由蚂蚁集团开源的一套企业级中后台前端框架...

开箱即用的企业级数据和业务管理中后台前端框架Ant Design Pro 5的开箱使用和偏好配置

zrc_xiaoguo的博客

12-28

2979

Ant Design Pro 是一个开箱即用的企业级前端解决方案，基于 Ant Design 设计体系，提供了丰富的组件和功能，帮助开发者更快速地开发和部署企业级应用。Ant Design Pro 使用 React、umi 和 dva 这三个主要的前端开发技术栈，通过脚手架工具创建项目，并提供了一系列的模板和示例代码，方便开发者快速上手。

Ant Design Pro 插件开发教程：扩展组件与功能的策略

在开始Ant Design Pro插件开发之前，你需要先确保你的开发环境已经安装了Node.js和npm/yarn包管理器。你可以通过访问Node.js官网下载并安装最新的Node.js环境。使用npm或yarn，你能够安装和管理项目依赖。 ```bash ...

ant design pro动态菜单

10-08

自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！

ant-design-x

02-27

对于希望快速搭建项目的团队来说，可以通过Git仓库克隆最新的Ant Design Pro Vue模板作为起点。具体命令如下所示： ```bash git clone https://github.com/sendya/ant-design-pro-vue.git ``` 此操作会复制一份完整...

antd Iconfont 没网本地化设置。配置很少，相当实用

qq_36862498的博客

03-20

734

一。在自己项目文件夹中找到index.js/或者是index.jsx，在引入的的css文件中加入如下两行代码。 @import “~antd/dist/antd.less”; @import “./custom.less”; 二。在和index.less的同级目录下，新建custom.less文件。在该文件中输入如下代码：@icon-url: “./iconfont/iconfont”; 三。同样...

Ant Design Pro V5 离线使用iconfont

weixin_42562482的博客

04-20

836

Ant Design Pro V5 离线使用iconfontant design pro 使用iconfont1.离线使用2.在线使用 ant design pro 使用iconfont 阿里矢量图标库(https://www.iconfont.cn) 1.离线使用 a.将项目下载到本地 b.解压，将文件拷贝到项目中，我放到了public目录下 c.在项目目录src/global.tsx中引入 require('../public/fonts/iconfont/iconfont'); d.使用项目

antd将icon图标本地化

shiyibodec的专栏

03-16

7702

问题：使用reactjs+antd 开发的前端迁移到内网后，字体图标丢失解决：1、到官方资源库下载图标，地址：http://1x.ant.design/docs/resource/download2、删除demo*的内容，将剩下的文件新建一个文件夹放入工程的任意一个位置3、如果要在某一个页面中使用图标，那么在该页面的css文件中添加一下内容:@font-face {font-family: 'ic...

【吐槽】ant design pro v5 icon问题

m0_37694033的博客

08-31

338

ant design

在微前端中，antd icon createFormIconfontCN 的本地化问题

LanJu的博客

04-06

2695

首发于语雀文档前言用过 antd icon 的朋友们可能知道，其中介绍的用法是： https://ant.design/components/icon-cn/#components-icon-demo-iconfont import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d.

antdesign图标本地化的配置方法

ajrdbrjckt的博客

07-31

2689

本人的github主页:https://github.com/ichanghe 欢迎star antdesign给开发者提供了很多漂亮的图标，在默认情况下antdesign的图标是从网络请求过来的。如图：当你的开发是在保密单位，和外网不通的情况下，要保证正常的开发，就需要把图标本地化。具体配置方法如下 1、将图标的包下载下来，放到public/iconfont文件夹下面， ...

深入探究Ant Design Pro中的动态菜单实现技巧

Ant Design Pro是一个企业级中后台前端/设计解决方案，它基于Ant Design组件库和Umi框架。它旨在提供一系列开箱即用的模板和组件，以加快企业级应用的开发过程。Ant Design Pro利用了React技术栈，并且为开发者提供...