Icon.create => Icon.createFromIconfontCN

components/icon/IconFont.tsx

@@ -6,12 +6,12 @@ const customCache = new Set<string>();
 export interface CustomIconOptions {
   namespace?: string;
   prefix?: string;
-  scriptUrl?: string;
+  cdnUrl?: string;
   extraCommonProps?: { [key: string]: any };
 }
 
 export default function create(options: CustomIconOptions = {}): React.SFC<IconProps> {
-  const { namespace, prefix = '', scriptUrl, extraCommonProps = {} } = options;
+  const { namespace, prefix = '', cdnUrl, extraCommonProps = {} } = options;
 
   /**
    * DOM API required.
@@ -21,18 +21,18 @@ export default function create(options: CustomIconOptions = {}): React.SFC<IconP
    */
   if (typeof document !== 'undefined' && typeof window !== 'undefined'
     && typeof document.createElement === 'function'
-    && typeof scriptUrl === 'string' && scriptUrl.length
+    && typeof cdnUrl === 'string' && cdnUrl.length
     && typeof namespace === 'string' && namespace.length
     && !customCache.has(namespace)
   ) {
     const script = document.createElement('script');
-    script.setAttribute('src', scriptUrl);
+    script.setAttribute('src', `https://${cdnUrl}.js`);
     script.setAttribute('data-namespace', namespace);
     customCache.add(namespace);
     document.body.appendChild(script);
   }
 
-  const Custom: React.SFC<IconProps> = (props) => {
+  const Iconfont: React.SFC<IconProps> = (props) => {
     const { type } = props;
 
     // component > children > type
@@ -53,7 +53,7 @@ export default function create(options: CustomIconOptions = {}): React.SFC<IconP
     );
   };
 
-  Custom.displayName = 'CreatedIcon';
+  Iconfont.displayName = 'Iconfont';
 
-  return Custom;
+  return Iconfont;
 }

components/icon/__tests__/index.test.js

@@ -88,10 +88,10 @@ describe('Icon', () => {
   });
 });
 
-describe('Icon.create()', () => {
-  const IconFont = Icon.create({
+describe('Icon.createFromIconfontCN()', () => {
+  const IconFont = Icon.createFromIconfontCN({
     namespace: 'iconfont-foo',
-    scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+    cdnUrl: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
     prefix: 'icon-',
   });
 

components/icon/demo/iconfont.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `create` 方法参数对象中的 `namespace` 和 `scriptUrl` 字段， 即可轻松地使用已有项目中的图标。
+对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `create` 方法参数对象中的 `namespace` 和 `cdnUrl` 字段， 即可轻松地使用已有项目中的图标。
 
 ## en-US
 
@@ -18,7 +18,7 @@ import { Icon } from 'antd';
 
 const IconFont = Icon.create({
   namespace: 'iconfont-foo',
-  scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+  cdnUrl: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
   prefix: 'icon-',
 });
 

components/icon/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { antDesignIcons } from '@ant-design/icons';
 import ReactIcon from '@ant-design/icons-react';
-import create from './IconFont';
+import createFromIconfontCN from './IconFont';
 import { getComputedSvgStyle, svgBaseProps } from './utils';
 import warning from '../_util/warning';
 
@@ -136,11 +136,11 @@ const Icon: React.SFC<IconProps> = (props) => {
   );
 };
 
-export type IconType = React.SFC<IconProps> & {
-  create: typeof create;
+export type IconType = typeof Icon & {
+  createFromIconfontCN: typeof createFromIconfontCN;
 };
 
 Icon.displayName = 'Icon';
-(Icon as IconType).create = create;
+(Icon as IconType).createFromIconfontCN = createFromIconfontCN;
 
 export default Icon as IconType;

components/icon/index.zh-CN.md

@@ -122,12 +122,12 @@ ReactDOM.render(
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
 
 
-### Icon.create(options)
+### Icon.createFromIconfontCN(options)
 
 使用方式如下：
 
 ```js
-const MyIcon = Icon.create({});
+const MyIcon = Icon.createFromIconfontCN({});
 
 // after importing SVG symbols
 ReactDOM.render(<MyIcon type="example" />, mountedNode);
@@ -141,9 +141,9 @@ ReactDOM.render(<MyIcon type="example" />, mountedNode);
 | --- | --- | --- | --- |
 | prefix | 设置图标的前缀，通常以短横线结尾，如 `icon-`、`foo-` | string | '' |
 | extraCommonProps | 给所有的 `svg` 图标设置额外的属性 | `{ [key: string]: any }` | {} |
-| namespace | 图标集合的名字空间，在 `scriptUrl` 也设置的情况下有效，用于区分已导入的图标符号集合 | string | - |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
+| namespace | 图标集合的名字空间，在 `cdnUrl` 也设置的情况下有效，用于区分已导入的图标符号集合 | string | - |
+| cdnUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
 
-在 `namespace` 和 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
+在 `namespace` 和 `cdnUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 
 见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。