显示自定义图标

场景描述

用户需要使用自己的图标，例如在按钮中显示自定义的图标。

实现思路

antd 的图标组件支持自定义图标和使用 iconfont.cn。

• 自定义图标：利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。
• 对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。

实现步骤

1. 显示antd自带的图标

antd 自带了一些语义化的矢量图标，可以直接使用。

• 显示图标

    <antd:Icon icon="step-forward,outlined" id="icon0" theme="outlined" type="step-forward"/>
  

• 在按钮中显示图标

    <antd:Button btnIcon="step-forward,outlined" id="button0" text="antd自带icon"/>
  

2. 显示自定义图标

• 自定义图标

在 UI2/pcx 目录下添加 common.js 文件，在这里利用 Icon 组件的 component 属性封装一个个可复用的自定义图标。代码如下：

import Icon,{ createFromIconfontCN } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const HeartSvg = (props) => (
    <Icon component={()=>{
        return <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
            <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
        </svg>
    }} {...props} />
);

export default{
    HeartSvg
}

在 w 文件的源码中增加下面的代码，即可显示出图标。其中 WxCommon 特指 common.js 文件

<WxCommon.HeartSvg/>

svg文件小于10k，也可以直接引用文件，代码如下

import Niu from "./niu.svg";

let SvgIconFont = ()=>{
    return <Space>
        <img src={Niu}/>
    </Space>
}

在输出中，增加这个图标的输出，代码如下

export default{
    HeartSvg,
    SvgIconFont
}

在 w 文件的源码中增加下面的代码，即可显示出图标。

<WxCommon.SvgIconFont/>

• 在按钮中使用自定义图标

在 w 文件中添加按钮组件，在按钮组件的源码中，添加 mode 属性和 attr:icon 节点，在 attr:icon 节点中放置图标，代码如下

<antd:Button mode="standard">
    <attr:icon xmlns:attr="$UI/comp/react/components/attr">
        <WxCommon.HeartSvg/>
    </attr:icon>
    本地svgicon
</antd:Button>

3. 显示 iconfont.cn 的图标

• 引用 iconfont.cn 的图标

在 UI2/pcx 目录下添加 common.js 文件，在这里设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段为 iconfont.cn 中已有项目的url，即可引入图标资源，本项目中包括3个图标。代码如下：

import Icon,{ createFromIconfontCN } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

let RemoteTuichuIconFont = ()=>{
    return <IconFont type="icon-tuichu" />
}

let RemoteFacebookIconFont = ()=>{
    return <IconFont type="icon-facebook" />
}

let RemoteTwitterIconFont = ()=>{
    return <IconFont type="icon-twitter" />
}

export default{
    RemoteTuichuIconFont,
    RemoteFacebookIconFont,
    RemoteTwitterIconFont
}

在 w 文件的源码中增加下面的代码，即可显示出图标。其中 WxCommon 特指 common.js 文件

<WxCommon.RemoteTuichuIconFont/>
<WxCommon.RemoteFacebookIconFont/>
<WxCommon.RemoteTwitterIconFont/>

• 在按钮中使用 iconfont 的图标

在 w 文件中添加按钮组件，在按钮组件的源码中，添加 mode 属性和 attr:icon 节点，在 attr:icon 节点中放置图标，代码如下

<antd:Button mode="standard" theme="outlined" type="step-forward" xmlns:antd="$UI/comp/antd/components">
    <attr:icon xmlns:attr="$UI/comp/react/components/attr">
        <WxCommon.RemoteTwitterIconFont/>
    </attr:icon>
    远程icon
</antd:Button>