使用环境：开发环境内网 node + React + antd

第一种方法：[推荐]

第一种方法[原创]：

想在网上找到的第二种方法，试验一下可以。但是我不想失去按需加在css的功能，所以自己查看antd模块源码，终于被我找到定义字体和图表文件请求路径的位置。只需要替换该路径为自己内网可访问的路径即可。我是放在本项目的主目录新建font目录下。

首先，把官网下载的字体文档压缩包解压，里面demo** 的文件不需要，是个例子。

将其余的 iconfont开头的6个文件复制到自己项目下（可随意位置，和后面请求对应即可）

然后，到安装的.node_modules\antd\lib\style\themes目录下 default.less 文件，修改请求路径大约在62行：我的修改为

// ICONFONT
@iconfont-css-prefix : anticon;
@icon-url : "http://localhost:8080/monitor/font/iconfont";

http://localhost:8082/ds_monitor/访问项目的主目录

font   自己定义的存放字体图标的文件

iconfont   文件名称，其他代码会添加不同后缀获取不同文件

完成。

注意：我的antd使用的是默认主题，所以是default.less文件，如果你的修改过antd的主题，则需要修改对应主题的less

-----------------------上面是一种方法-------------------------

第一种方法：网上找到的方法（可用，但感觉关闭按需加在不是最有解决办法）

讲你下载下来的官方提供的字体库解压后所有文件复制到node-默读les/antd/dist目录下

创建新的文件夹iconfont

在你项目生成的css入口文件对应的源码less文件开始添加如下两句话

我的是app.less [顺序重要]

@import "~antd/dist/andt.less";
@icon-url: '~antd/dist/iconfont/iconfont';

第二句是引入你自己下载的本地字体和图标库。

此时编译后访问，本地添加的字体图表库已经可以显示。但是原来模块发送的字体请求还是抱错。

此时相当于你自己下载一个字体库，antd默认下载一个字体库（内网下载不成功）所有重复下载。

解决办法：将bable-plugin-import插件的按需引入css；样式功能关闭

找到开发项目主目录下的.babelrc 这是配置bable的文件，修改为style：false

<span style="">{
"plugins": [["import", {
"libraryName": "antd",
"style": false
}]],
"presets": [
["es2015", "react"]
]
}</span>

第二种结束。

第三种方法：没有成功[可省略节省时间]

25 MAY 2017 on React, Ant-Design http://www.imshuai.com/ant-design-offline-icon/

最近在使用React实现公司一套系统的前端。控件库，看中了蚂蚁金服的Ant Design。

脚手架使用的是React官方的create-react-app，创建完成后，引入了Ant Design。在我自己的笔记本调试的都很好，但放到公司的开发机器上，发现图标资源都无法加载。马上看了一下浏览器的资源请求情况，果然，Ant Design默认使用的是阿里的CDN。

公司是内网环境，显然是行不通的。官方文档果然给出了本地部署的提示。

研究了一番，发现主要是要覆盖@icon-url这个less变量，所以就要开启less支持。幸好官方在自定义主题一节，已经给出了create-react-app中如何实现主题less变量的覆盖；同理，在modifyVar节点增加@icon-url的覆盖，如下：

modifyVars: {
// 修改整体主题颜色
// "@primary-color": "#1DA57A",
// 修改图标库为本地离线，而不是阿里云CDN上的图标资源
"@icon-url": '"/iconfont/iconfont"' },

然后在/public目录增加iconfront目录，并将下载好的Web Font文件放到这个目录即可。不过还是有几个细节要注意：

要同时修改webpack.config.dev.js和webpack.config.prd.js，保证测试环境和生产环境都生效。
iconfront文件夹要放在/public目录，而不是/src目录。虽然调试环境两者都能生效，但生产环境后者是不生效的。
@icon-url的值里面有双引号。
http://www.imshuai.com/ant-design-offline-icon/

转载于:https://www.cnblogs.com/keepLeung/p/9596829.html

Ant Design离线使用Icon图标资源相关推荐

ant design分享记录-icon图标自定义菜单图标
ant design分享-icon图标自定义菜单图标本过程使用 iconfont.cn上的设置icon前缀 import { Icon } from 'ant-design-vue'; impor ...
Ant Design Pro 菜单icon图标修改或新增
由于Ant Design Pro菜单和以前不一样了,去官网查到的Icon图标无法直接使用名称了,那怎么办呢,办法总是比问题多的,进入官网的图标组件,找到你想要用的图标,进入开发模式图标 Icon - ...
Ant Design of Vue Icon 图标列表
拷贝插件 yarn add vue-clipboard2// main.js //复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipb ...
前端学习（3339）：ant design中加上icon图标
当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件. 如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 ico ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题:自定义菜单图标时收起菜单文字不隐藏问题代码: <a-menu-item v-for="item in memberMenu" :key="item.path ...
Ant Design Vue 组件或图标的引入和使用
// 组件或图标引入 <script lang="ts">import { defineComponent, reactive, ref } from 'vue';im ...
前端学习（3334）：ant design中加入icon
6000 枚Material Design风格的 icon图标下载
下载链接:https://pan.baidu.com/s/1kUAdpCr 密码: 扫描下方二维码或者搜索微信搜索[inaiyuan]关注回复6000即可获取下载密码! [关于我们] 才淇(微信公众号 ...

Ant Design离线使用Icon图标资源

第三种方法：没有成功[可省略节省时间]

Ant Design离线使用Icon图标资源相关推荐

最新文章

热门文章