桌面端自定义图标
用户需要使用自己的图标，例如在按钮中显示自定义的图标。
antd 和 antdv 的图标组件支持自定义图标和使用 iconfont.cn。
- 自定义图标：利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。
- 对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。
显示系统图标
系统自带了一些语义化的矢量图标，可以直接使用。
显示图标
react 代码
<antdpro:Icon icon="step-forward,outlined" id="icon0">
</antdpro:Icon>
vue 代码
<antdv:Icon icon="step-forward,outlined" id="icon0">
</antdv:Icon>
在按钮中显示图标
react 代码
<antdpro:Button icon="step-forward,outlined" id="button1" text="antd自带icon">
</antdpro:Button>
vue 代码
<antdv:Button icon="step-forward,outlined" id="button1" text="antd自带icon">
</antdv:Button>
显示自定义图标
采用 react 时，公共代码可以写在 UI2/pcx/common.js 文件中（没有该文件可以创建）
采用 vue 时，公共代码写在自定义的 *.vue.jsx 文件中
自定义图标
react
在 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/>
vue
在 UI2/pcx 目录下添加 icons.vue.jsx 文件，在这里封装一个个可复用的自定义图标。代码如下：
import Icon, { createFromIconfontCN } from '@ant-design/icons-vue';
export const HeartIcon = (props) => (
<Icon {...props}>
<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>
</Icon>
)
在页面的 js 文件中引用 icons.vue.jsx 文件中的图标
import { HeartIcon } from "$UI/pcx/display/icons.vue.jsx";
在 w 文件的源码中增加下面的代码，即可显示出图标
<HeartIcon/>
svg 文件小于10k，也可以直接引用文件，icons.vue.jsx 文件代码如下
import Niu from "$UI/pcx/images/niu.svg";
export const SvgIconFont = (props) => (
<img src={Niu} {...props}/>
)
在页面的 js 文件中引用 icons.vue.jsx 文件中的图标
import { HeartIcon， SvgIconFont } from "$UI/pcx/display/icons.vue.jsx";
在 w 文件的源码中增加下面的代码，即可显示出图标。
<SvgIconFont/>
在按钮中使用自定义图标
在 w 文件中添加按钮组件，修改按钮组件的源码
react 代码：添加 attr:icon 节点，在 attr:icon 节点中放置图标，代码如下
<antdpro:Button id="button3" text="本地svgicon">
<attr:icon xmlns:attr="http://www.wex5.com/attr">
<WxCommon.HeartSvg/>
</attr:icon>
</antdpro:Button>
vue 代码：删除 text 属性，图标和文本都写在按钮内部，代码如下
<antdv:Button id="button1"><HeartIcon/>本地svgicon</antdv:Button>
显示 iconfont.cn 的图标
引用 iconfont.cn 的图标
通过 createFromIconfontCN 方法，设置 scriptUrl 字段为 iconfont.cn 中已有项目的 url，即可引入图标资源，本项目中包括3个图标。代码如下：
react
写在 UI2/pcx/common.js 文件中
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/>
vue
写在 *.vue.jsx 文件中
import { createFromIconfontCN } from '@ant-design/icons-vue';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
export const RemoteTuichuIconFont = (props) => (
<IconFont type="icon-tuichu" {...props}/>
)
export const RemoteFacebookIconFont = (props) => (
<IconFont type="icon-facebook" {...props}/>
)
export const RemoteTwitterIconFont = (props) => (
<IconFont type="icon-twitter" {...props}/>
)
在页面的 js 文件中引用 icons.vue.jsx 文件中的图标
import { RemoteTuichuIconFont,RemoteFacebookIconFont,RemoteTwitterIconFont } from "$UI/pcx/icons.vue.jsx";
在 w 文件的源码中增加下面的代码，即可显示出图标
<RemoteTuichuIconFont/>
<RemoteFacebookIconFont/>
<RemoteTwitterIconFont/>
在按钮中使用 iconfont 的图标
在 w 文件中添加按钮组件，修改按钮组件的源码
react 代码：添加 attr:icon 节点，在 attr:icon 节点中放置图标，代码如下
<antdpro:Button id="button0" text="iconfont的图标">
<attr:icon xmlns:attr="http://www.wex5.com/attr">
<WxCommon.RemoteTwitterIconFont/>
</attr:icon>
</antdpro:Button>
vue 代码：删除 text 属性，图标和文本都写在按钮内部，代码如下
<antdv:Button id="button2"><RemoteTwitterIconFont/>iconfont的图标</antdv:Button>
移动端自定义图标
用户需要使用自己的图标，例如在按钮中显示自定义的图标。
vant 和 vantui 的图标组件支持自定义图标，引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用
显示系统图标
系统自带了一些语义化的矢量图标，可以直接使用。
显示图标
react 代码
<vantui:Icon id="icon1" name="success">
</vantui:Icon>
vue 代码
<vant:Icon id="icon1" name="success">
</vant:Icon>
在按钮中显示图标
react 代码
<vantui:Button icon="success" id="button1" mode="all" text="系统图标">
</vantui:Button>
vue 代码
<vant:Button icon="success" id="button1" text="按钮">
</vant:Button>
显示自定义图标
自定义图标
引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。作为公共资源，css 定义在 UI2/mobile/common.css 文件中，css 代码如下，其中 font-face 的 url 内容省略
:global {
@font-face {
font-family: 'iconfont';
src: url(data:font/ttf;charset=utf-8;base64,...) format("truetype")
}
.page-icon {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-icon-demo1::before {
content: '\ea3c';
}
.page-icon-demo2::before {
content: '\ea3d';
}
.page-icon-demo3::before {
content: '\ea3e';
}
}
上面 css 中定义的内容：一个字体 iconfont，使用该字体的样式 page-icon，以及 demo1、demo2、demo3 三个图标样式
图标组件的类名前缀设置为 page-icon，图标设置为 demo1，如下图所示
w 文件源码如下
react 代码
<vantui:Icon classPrefix="page-icon" id="icon0" name="demo1" size="30px">
</vantui:Icon>
vue 代码
<vant:Icon classPrefix="page-icon" id="icon0" name="demo1" size="30px">
</vant:Icon>
运行效果如下
在按钮中使用自定义图标
按钮组件的类前缀设置为 page-icon，图标设置为 demo2，如下图所示
w 文件源码如下
react 代码
<vantui:Button classPrefix="page-icon" icon="demo2" id="button0" mode="all" text="自定义图标">
</vantui:Button>
vue 代码
<vant:Button icon="demo2" iconPrefix="page-icon" id="button0" mode="all" text="按钮">
</vant:Button>
运行效果如下
案例位置
桌面-页面-面板展示组件-自定义图标.w
移动-页面-面板展示组件-自定义图标.w