Browse Source

site: improve icon documentation about svg icons

pull/12252/head
afc163 6 years ago
parent
commit
adb2637fdb
  1. 24
      components/icon/index.en-US.md
  2. 31
      components/icon/index.zh-CN.md

24
components/icon/index.en-US.md

@ -29,6 +29,19 @@ ReactDOM.render(<IconDisplay />, mountNode);
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
### Svg icons
We introduced svg icons in `3.9.x` version replacing font icons which brings benefits below:
- Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
- Much more display accuracy in lower-level screens.
- Support multiple colors for icon.
- No need to change built-in icons with overriding styles by providing more props in component.
More disscussion of svg icon reference to [#10353](https://github.com/ant-design/ant-design/issues/10353).
> ⚠️ About the extra bundle size brought by all svg icons we imported in antd@3.9.x, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress.
The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components.
```jsx
@ -41,6 +54,8 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
```
### Set TwoTone Color
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
```jsx
@ -48,6 +63,8 @@ Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96
```
### Custom Svg Icon
You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
```js
@ -89,12 +106,11 @@ The following properties are available for the component:
| className | The computed class name of the `svg` element | string | - |
| style | The computed style of the `svg` element | CSSProperties | - |
### Custom Font Icon
### Use custom icon with iconfont.cn
#### Icon.createFromIconfontCN(options)
We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
This method is specified for [iconfont.cn](http://iconfont.cn/).
> This method is specified for [iconfont.cn](http://iconfont.cn/).
```js
const MyIcon = Icon.createFromIconfontCN({

31
components/icon/index.zh-CN.md

@ -16,7 +16,7 @@ toc: false
> 点击图标即可复制代码。
双色图标可能略有缺失,我们还在持续补充中。
新版图标可能略有缺失,我们还在持续补充中。
```__react
import IconDisplay from 'site/theme/template/IconDisplay';
@ -32,9 +32,22 @@ ReactDOM.render(<IconDisplay />, mountNode);
| theme | 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
| spin | 是否有旋转动画 | boolean | false |
| component | 控制如何渲染图标,通常是一个渲染根标签为 `<svg>``React` 组件,**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
其中 `theme`, `component`, `twoToneColor``antd@3.9.x` 新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如:
### Svg 图标
`3.9.x` 版本后,我们使用了 svg 图标替换了原先的 font 图标,从而带来了以下优势:
- 完全离线化使用,不需要从支付宝 cdn 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
- 在低端设备上 svg 有更好的清晰度。
- 支持多色图标。
- 对于内建图标的更换可以提供更多 API,而不需要进行样式覆盖。
更多讨论可参考:[#10353](https://github.com/ant-design/ant-design/issues/10353)。
> ⚠️ 目前 3.9.x 上我们全量引入了所有图标,导致 antd 默认的包体积有一定增加,我们会在不远的未来增加新的 API 来实现图标的按需使用,更多相关讨论可关注:[#12011](https://github.com/ant-design/ant-design/issues/12011)。
其中 `theme`, `component`, `twoToneColor``3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如:
```jsx
<Icon type="star" theme="filled" />
@ -46,13 +59,17 @@ ReactDOM.render(<IconDisplay />, mountNode);
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
```
对于双色图标,可以通过使用 `Icon.getTwoToneColor()``Icon.setTwoToneColor(colorString)` 来设置图标主色。
### 双色图标主色
对于双色图标,可以通过使用 `Icon.getTwoToneColor()``Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
```jsx
Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96
```
### 自定义 svg 图标
如果使用 `webpack`,可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
```js
@ -94,11 +111,9 @@ ReactDOM.render(
| className | 计算后的 `svg` 类名 | string | - |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
### 使用 iconfont.cn 的自定义图标
#### Icon.createFromIconfontCN(options)
### 自定义 font 图标
这个方法适用于 `iconfont.cn` 的用户
`3.9.x` 里,我们提供了一个 `createFromIconfontCN` 方法,方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
```js
const MyIcon = Icon.createFromIconfontCN({

Loading…
Cancel
Save