网上找了很多解决方案都是针对Antd 旧版本,通过自己摸索,终于搞定……话不多说,直接贴图上代码
我的环境
Ant Design Pro 2.2.1
Antd:3.13.6
创建图标
Ant Design自带了一些图标,这个地址可以查看(https://ant.design/components/icon-cn/),但是符合项目中的图标很少,需要自己去设计或者去网上下载字体图标,这里推荐去这个网站下载自己想要的图片,具体操作请参考这个网友的博客/p/2934316a5899
但值得注意的是,在新建项目的时候看下图说明,因为人家博客中的可能是低版本的做法,当然你FontClass前缀不取名icon-也是可以的,只不过要改改框架的代码,否则识别不了图标。
使用图标
这里使用图标有两种方式,
1、在线使用字体
将这个地址复制到你项目中
module.exports = {navTheme: 'dark', // theme for nav menuprimaryColor: '#1890FF', // primary color of ant designlayout: 'sidemenu', // nav menu position: sidemenu or topmenucontentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenufixedHeader: false, // sticky headerautoHideHeader: false, // auto hide headerfixSiderbar: false, // sticky siderbarmenu: {disableLocal: false,},pwa: true,// your iconfont Symbol Scrip Url// 注意:如果需要图标多色,Iconfont图标项目里要进行批量去色处理iconfontUrl: '///t/font_1058494_nw4mdj6da9e.js'};
在组件中使用
引入
import IconFont from '@/components/IconFont';
使用
<IconFont type="icon-ctl-term" />;
import React from 'react';import { connect } from 'dva';import { Icon, Row } from 'antd';import IconFont from '@/components/IconFont';function IndexPage() {return (<div style={{ fontSize: 30 }}><Row type="flex" align="middle" justify="center"><span>默认字体:</span><Icon type="apple" /><Icon type="windows" /><Icon type="android" /></Row><Row type="flex" align="middle" justify="center"><span>自定义字体:</span><IconFont type="icon-ctl-term" />;</Row></div>);}IndexPage.propTypes = {};export default connect()(IndexPage);
效果
2、离线使用自定义字体
正确应该是这么引用本地文件
iconfontUrl: require('../public/fonts/iconfonts/iconfont.js')
先按前面那位博主介绍的将字体下载到本地然后在defaultSettings.js这个配置文件中更改iconfontUrl值为你存放在项目中的相对路径这里值得注意的是defaultSettings.js文件在src目录下所有引用本地文件需要import或require否则就无需,浏览器控制台还会报错
框架中左侧菜单栏具体使用图标代码