doc: move font icon doc before svg icon

components/icon/index.en-US.md

@@ -63,6 +63,33 @@ Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```
 
+### Custom Font Icon
+
+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/).
+
+```js
+const MyIcon = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
+});
+
+ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
+```
+
+It create a component that uses SVG sprites in essence.
+
+The following options are available:
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| 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.
+
+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
 
 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).
@@ -105,30 +132,3 @@ The following properties are available for the component:
 | fill | Define the color used to paint the `svg` element | string | 'currentColor' |
 | className | The computed class name of the `svg` element | string | - |
 | style | The computed style of the `svg` element | CSSProperties | - |
-
-### Custom Font Icon
-
-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/).
-
-```js
-const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
-});
-
-ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
-```
-
-It create a component that uses SVG sprites in essence.
-
-The following options are available:
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| 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.
-
-See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.

components/icon/index.zh-CN.md

@@ -68,6 +68,31 @@ Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```
 
+### 自定义 font 图标
+
+在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
+
+```js
+const MyIcon = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
+});
+
+ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
+```
+
+其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
+
+`options` 的配置项如下：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | 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 图标
 
 如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
@@ -110,28 +135,3 @@ ReactDOM.render(
 | fill | `svg` 元素填充的颜色 | string | 'currentColor' |
 | className | 计算后的 `svg` 类名 | string | - |
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
-
-### 自定义 font 图标
-
-在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
-
-```js
-const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
-});
-
-ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
-```
-
-其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
-
-`options` 的配置项如下：
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | 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` 地址。