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-也是能夠的，只不過要改改框架的代碼，不然識別不了圖標。

• 使用圖標

這裏使用圖標有兩種方式，

一、在線使用字體

將這個地址複製到你項目中

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);

效果

二、離線使用自定義字體

正確應該是這麼引用本地文件

iconfontUrl: require('../public/fonts/iconfonts/iconfont.js')

 

• 先按前面那位博主介紹的將字體下載到本地
• 而後在defaultSettings.js這個配置文件中更改iconfontUrl值爲你存放在項目中的相對路徑
• 這裏值得注意的是defaultSettings.js文件在src目錄下全部引用本地文件須要import或require不然就無需，瀏覽器控制檯還會報錯

 框架中左側菜單欄具體使用圖標代碼