这是我参与8月更文挑战的第四天 活动详情查看：8月更文挑战
1 安装
npm install --save @ant-design/icons
使用 (结构出后，与组件的使用方法一致)，需要什么图标去官网复制。
import { StepForwardOutlined } from '@ant-design/icons';
<div>
<StepForwardOutlined/>
</div>
2 图标类型：官网分为三种风格
- 线框风格结尾是Outlined：
<StepForwardOutlined /> - 实底风格结尾是Filled ：
<StepForwardFilled /> - 双色风格结尾是TwoTone：
<DownCircleTwoTone />
3 图标旋转: spin旋转动画，rotate旋转角度
<SyncOutlined spin />
<SmileOutlined rotate={180} />
4 多色图标: (只适用于双色风格)用于双色图标改变颜色。
<HeartTwoTone twoToneColor="#eb2f96" />
<HeartTwoTone />
如图,默认是蓝色的
5 自定义图标
5.1 使用iconfont 的 svg 代码
不能与其它已有图标一样解构
import { StarTwoTone ,ForkOutlined} from '@ant-design/icons';
import Icon from '@ant-design/icons'
声明一个函数式组件 （svg代码是在阿里iconfont中复制的）
const PandaSvg = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
<path
d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"
fill="#6B676E"
p-id="1143"
/>
<path
d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"
fill="#FFEBD2"
p-id="1144"
/>
<path
d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"
fill="#E9D7C3"
p-id="1145"
/>
<path
d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"
fill="#FFFFFF"
p-id="1146"
/>
<path
d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"
fill="#6B676E"
p-id="1147"
/>
<path
d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"
fill="#464655"
p-id="1148"
/>
<path
d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
fill="#464655"
p-id="1149"
/>
<path
d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
fill="#464655"
p-id="1150"
/>
</svg>
);
声明回调函数 将Pandasvg作为参数传给父组件Icon，接下来就可以使用组件PandaIcon
const PandaIcon = props => <Icon component={PandaSvg} {...props} />;
<PandaIcon/>
5.2 使用个人的图标项目
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2503482_i88n1525tqb.js',
});
<IconFont type="iconPensyumaobi" />
scriptUrl对应的是这个.js
IconFont的type属性对应下面图标的名称。
