optimize CustomIcon, modify option field scriptLink => scriptUrl.

components/icon/CustomIcon.tsx

@@ -9,14 +9,29 @@ export interface CustomIconProps extends Omit<IconProps, 'type'> {
   component?: React.ComponentType<CustomIconComponentProps>;
 }
 
-export interface CustomIconComponentProps extends Omit<CustomIconProps, 'component'> {
+export interface CustomIconComponentProps {
+  width: string;
+  height: string;
+  fill: string;
+  viewBox: string;
 }
 
+// These props make sure that the SVG behaviours like general text.
+// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+const svgBaseProps = {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  ['aria-hidden']: 'true',
+};
+
 const CustomIcon: React.SFC<CustomIconProps> = (props) => {
   const {
     className = '',
     spin,
-    viewBox = '0 0 24 24',
+    // ⬇️ Todo, what's the best default value?
+    // ⬇️       "0 0 24 24" for material-ui or "0 0 1024 1024" for ant-design
+    viewBox = '0 0 1024 1024',
     children,
     component: Component,
   } = props;
@@ -27,31 +42,13 @@ const CustomIcon: React.SFC<CustomIconProps> = (props) => {
   }, className);
 
   let content = (
-    <svg
-      {...omit(props, ['type', 'spin'])}
-      width={'1em'}
-      height={'1em'}
-      fill={'currentColor'}
-      aria-hidden={'true'}
-      viewBox={viewBox}
-    >
+    <svg {...omit(props, ['type', 'spin'])} {...svgBaseProps} viewBox={viewBox}>
       {children}
     </svg>
   );
 
   if (Component) {
-    content = (
-      <Component
-        {...omit(props, ['type', 'spin', 'component'])}
-        width={'1em'}
-        height={'1em'}
-        fill={'currentColor'}
-        aria-hidden={'true'}
-        viewBox={viewBox}
-      >
-        {children}
-      </Component>
-    );
+    content = <Component {...svgBaseProps} viewBox={viewBox}>{children}</Component>;
   }
 
   return (
@@ -66,13 +63,12 @@ const customCache = new Set<string>();
 export interface CustomIconOptions {
   namespace?: string;
   prefix?: string;
-  scriptLink?: string;
-
+  scriptUrl?: string;
   [key: string]: any;
 }
 
 export function create(options: CustomIconOptions = {}): React.ComponentClass<IconProps> {
-  const { namespace, prefix = '', scriptLink, ...extraCommonProps } = options;
+  const { namespace, prefix = '', scriptUrl, ...extraCommonProps } = options;
 
   class Custom extends React.Component<IconProps> {
     render() {
@@ -86,12 +82,9 @@ export function create(options: CustomIconOptions = {}): React.ComponentClass<Ic
           <svg
             {...extraCommonProps}
             {...omit(this.props, ['type', 'spin'])}
-            width={'1em'}
-            height={'1em'}
-            fill={'currentColor'}
-            aria-hidden={'true'}
+            {...svgBaseProps}
           >
-            <use xlinkHref={`#${prefix}${type}`}/>
+            <use xlinkHref={`#${prefix}${type}`} />
           </svg>
         </i>
       );
@@ -104,14 +97,14 @@ export function create(options: CustomIconOptions = {}): React.ComponentClass<Ic
        * The Custom Icon will create a <script/>
        * that loads SVG symbols and insert the SVG Element into the document body.
        */
-      if (typeof document === 'object' && typeof window === 'object'
+      if (typeof document !== 'undefined' && typeof window !== 'undefined'
         && typeof document.createElement === 'function'
-        && typeof scriptLink === 'string' && scriptLink.length
+        && typeof scriptUrl === 'string' && scriptUrl.length
         && typeof namespace === 'string' && namespace.length
         && !customCache.has(namespace)
       ) {
         const script = document.createElement('script');
-        script.setAttribute('src', scriptLink);
+        script.setAttribute('src', scriptUrl);
         script.setAttribute('data-namespace', namespace);
         customCache.add(namespace);
         document.body.appendChild(script);

components/icon/demo/basic.md

@@ -21,6 +21,7 @@ ReactDOM.render(
     <Icon type="home" />
     <Icon type="setting" />
     <Icon type="smile" />
+    <Icon type="reload" spin />
   </div>,
   mountNode
 );

components/icon/demo/iconfont.md

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

components/icon/demo/svg-sprite.md

@@ -37,7 +37,7 @@ const messageSymbol = `
 </symbol>`;
 
 // insert SVG symbols into document.body
-if (typeof document === 'object') {
+if (typeof document !== 'undefined') {
   const nodeId = '__SVG_SPRITE_NODE__';
   const spriteContent = svgSpriteRenderer(nodeId, messageSymbol);
   const existing = document.getElementById(nodeId);