一、周所周知
在 Antd Design 中也有一些图标，但是要找到自己想要的图标不是很方便，需要一个一个的找。而且提供的图标数量也不是很多！
而阿里图标库可以通过搜索找到自己想要的图标，图标的数量和样式都比较的多，非常的方便快捷。那问题来了，如何在React中引入阿里图标库的图标！
二、如何引入
在 Antd Design 的 Icon图标 给了我们答案

image.png

而我们可以把这个封装成一个组件，方便在其他组件中使用，代码如下：

IconFont.jsx

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2235432_bfzmqr9xg9h.js',
    // scriptUrl的值是从阿里图标库中复制过来的，每次添加了图标都要重新复制新的链接
});

export default IconFont;

scriptUrl怎么来的

把想要的图标都加入到项目库之后

image.png

如何使用呢
在需要的组件中引入，传入 type

import IconFont from './../components/IconFont';
// 路径写自己的
// 使用组件  type也是从图标库复制过来的
<IconFont type = "icon-order" />

type从哪里来

鼠标 hover 的时候就可以点击复制代码了

image.png

1、操作步骤
阿里矢量图标网站
将图标加入购物车
添加至项目
选择Symbol方式引入，复制代码

2、react 引用 iconFont

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: [
 '//at.alicdn.com/t/font_2196242_dq7mz11miut.js', // icon-home  icon-gouwucheman
  ],
});

7

<IconFont type="icon-home" />
<IconFont type={item.icon} />

3、引用 Menu

import { Menu } from 'antd';
import menuList from './menu'
const { SubMenu } = Menu;

class Slider extends React.Component {
  render() {
    return (
      <HashRouter>
        <Menu theme="dark" defaultOpenKeys={['home']} defaultSelectedKeys={['home']} mode="inline">
          {
            menuList.map((item)=>{
              if(item.subs){
                return (
                  <SubMenu key={item.index} title={item.name} icon={<IconFont type={item.icon} />}>
                    {
                      item.subs.map((subItem) => {
                        return (
                          <Menu.Item key={subItem.index}>
                            <Link to={subItem.path}>{subItem.name}</Link>
                          </Menu.Item>
                        )
                      })
                    }
                  </SubMenu>
                )
              }else{
                return (
                  <Menu.Item key={item.index} icon={<IconFont type={item.icon} />}>
                    <Link to={item.path}>{item.name}</Link>
                  </Menu.Item>
                )
              }
            })
          }
        </Menu>
      </HashRouter>
    );
  }
}

export default Slider;

4、menu.js文件

const menuList =  [
  {
    path: '/home',
    name: '首页',
    index: 'home',
    icon: 'icon-home'
  },
  {
    path: '/order_mag',
    name: '订单管理',
    index: 'order_mag',
    icon: 'icon-gouwucheman',
    subs: [
      {
        path: '/promotion',
        name: '股东活动订单',
        index: 'promotion',
      },
      {
        path: '/couponOrder',
        name: '优惠券订单',
        index: 'couponOrder',
      }
    ]
  }
]

export default menuList;

5、router/index.js

import React from 'react'
import {Switch, Route, HashRouter} from 'react-router-dom'

import App from '../App'
import Login from '../views/login'

class MRoute extends React.Component {
  render (){
    return(
      <HashRouter>
        <Switch>
          <Route path="/login" component={ Login } />
          <App />
        </Switch>
      </HashRouter>
    )
  }
}

export default MRoute;