ant-design-pro中菜单图标/业务组件，iconfon

• 在菜单中使用图标

// config/defaultSettings.js
const proSettings = {
  ...
  ...
  iconfontUrl: '//at.alicdn.com/t/font_1365062_ivqrhyip9xa.js', // 改地址为iconfont中的项目地址，可根据实际情况修改
};
export default proSettings;

说明：

在config.js中使用路由routes时，路由上的icon默认是可以使用antd中的icon，通过icon字段来设置。但是，很多情况下我们需要使用自定义的图标，如iconFont，此时我们可以设置如上的的iconfontUrl，来使用我们iconFont中的图标，如图：

至此，可以将图标下方的type，如：icon-weixin，设置到路由中的icon上，即可设置成功。

• 在业务组件中使用iconfont

// 在本项目中使用iconfont图标

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

export default createFromIconfontCN({
  // 该地址为iconfont中的项目地址，根据实际进行修改
  scriptUrl: '//at.alicdn.com/t/font_1365062_ivqrhyip9xa.js'
});

说明：

其中scriptUrl也是iconfont中的项目地址。

使用：

import SvgIcon from '@/components/svgIcon' // 自定义组件

const DemoTest = () => {

 return <PageContainer>
   <Card>
     <SvgIcon type="icon-zhifubao" />
   </Card>
 </PageContainer>
}

export default DemoTest;

说明：

将通用icon组件引入，设置type即可使用在iconfont项目中的图标。