antd design react 使用 IconFont 图标库

一、注册使用 iconfont 图标库

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

iconfont 平台提供海量的图标供开发者使用，在这里可以找到更多不同类型的图标，方便使用。

注册登录后，搜索栏处搜索关键字，找到适合的图标后添加至购物车。

点开购物车添加至项目。

点击生成链接。

二、antd design中引入 iconfont 图标

在 utils 目录下创建 iconfontUrl.js 文件保存图标链接，供全局使用。

export default {
  scriptUrl: '//at.alicdn.com/t/c/font_xxxxxxxxxx_xxxxxxxxxxxxx.js',
}

在组件中使用iconfont：

/* eslint-disable no-tabs */
import React from 'react';
import { Icon } from 'antd';
import IconfontUrl from '@/utils/iconfontUrl';

const { Component } = React;
class Weather extends Component {
  constructor(props) {
    super(props);

	this.state = {
      ...props,
	}

  render() {
    const IconFont = Icon.createFromIconfontCN({
		scriptUrl: IconfontUrl.scriptUrl,
	});
		
    return (
      <div>
        <IconFont type="icon-diliweizhi" style={{ fontSize: '32px' }} />
      </div>
    )
  }
}

export default Weather;