mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
docs: Update icon docs
This commit is contained in:
Wei Zhu
parent
1bb1418eb7
commit
17e2002c3c
@ -31,18 +31,18 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
### Svg icons
|
||||
|
||||
We introduced svg icons in `3.9.x` version replacing font icons which brings benefits below:
|
||||
We introduced SVG icons in `3.9.0` 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.
|
||||
- Complete offline usage of icon, no dependency of 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).
|
||||
More discussion 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.
|
||||
> ⚠️ About the extra bundle size brought by all SVG icons we imported in 3.9.0, 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.
|
||||
The properties `theme`, `component` and `twoToneColor` are added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` components.
|
||||
|
||||
```jsx
|
||||
<Icon type="star" theme="filled" />
|
||||
@ -86,13 +86,13 @@ The following options are available:
|
||||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
|
||||
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
|
||||
|
||||
The property `scriptUrl` should be set to import the svg sprite symbols.
|
||||
The property `scriptUrl` should be set to import the SVG sprite symbols.
|
||||
|
||||
See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.
|
||||
|
||||
### Custom Svg Icon
|
||||
### 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).
|
||||
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
|
||||
// webpack.config.js
|
||||
|
||||
@ -36,16 +36,16 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
### Svg 图标
|
||||
|
||||
在 `3.9.x` 版本后，我们使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：
|
||||
在 `3.9.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：
|
||||
|
||||
- 完全离线化使用，不需要从支付宝 cdn 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
|
||||
- 在低端设备上 svg 有更好的清晰度。
|
||||
- 完全离线化使用，不需要从 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)。
|
||||
> ⚠️ 3.9.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。
|
||||
|
||||
其中 `theme`, `component`, `twoToneColor` 是 `3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
|
||||
|
||||
@ -70,11 +70,11 @@ Icon.getTwoToneColor(); // #eb2f96
|
||||
|
||||
### 自定义 font 图标
|
||||
|
||||
在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
|
||||
在 `3.9.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
|
||||
|
||||
```js
|
||||
const MyIcon = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
|
||||
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
|
||||
});
|
||||
|
||||
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
|
||||
@ -86,14 +86,14 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
|
||||
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - |
|
||||
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
|
||||
|
||||
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
|
||||
|
||||
见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
|
||||
|
||||
### 自定义 svg 图标
|
||||
### 自定义 SVG 图标
|
||||
|
||||
如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user