Ant Design 自定义离线图标

网上找了很多解决方案都是针对Antd 旧版本，通过自己摸索，终于搞定……话不多说，直接贴图上代码

• 我的环境

Ant Design Pro 2.2.1

Antd：3.13.6

• 创建图标

Ant Design自带了一些图标，这个地址可以查看（https://ant.design/components/icon-cn/），但是符合项目中的图标很少，需要自己去设计或者去网上下载字体图标，这里推荐去https://www.iconfont.cn这个网站下载自己想要的图片，具体操作请参考这个网友的博客https://www.jianshu.com/p/2934316a5899

但值得注意的是，在新建项目的时候看下图说明，因为人家博客中的可能是低版本的做法，当然你FontClass前缀不取名icon-也是可以的，只不过要改改框架的代码，否则识别不了图标。

• 使用图标

这里使用图标有两种方式，

1、在线使用字体

将这个地址复制到你项目中

module.exports = {
  navTheme: 'dark', // theme for nav menu
  primaryColor: '#1890FF', // primary color of ant design
  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
  contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
  fixedHeader: false, // sticky header
  autoHideHeader: false, // auto hide header
  fixSiderbar: false, // sticky siderbar
  menu: {
    disableLocal: false,
  },
  pwa: true,
  // your iconfont Symbol Scrip Url
  // 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
  iconfontUrl: '//at.alicdn.com/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否则就无需，浏览器控制台还会报错

 框架中左侧菜单栏具体使用图标代码