upgrade icon docs

components/icon/IconFont.tsx

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

components/icon/__tests__/__snapshots__/index.test.js.snap

@@ -52,7 +52,6 @@ exports[`Icon should render correctly with rotate, flip, viewBox props 1`] = `
     data-icon="setting"
     fill="currentColor"
     height="1em"
-    style="transform:rotate(127deg) scaleX(-1) scaleY(-1)"
     viewBox="0 0 1024 1024"
     width="1em"
   >

components/icon/__tests__/index.test.js

@@ -91,7 +91,7 @@ describe('Icon', () => {
 describe('Icon.createFromIconfontCN()', () => {
   const IconFont = Icon.createFromIconfontCN({
     namespace: 'iconfont-foo',
-    cdnUrl: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
+    url: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
     prefix: 'icon-',
   });
 

components/icon/demo/basic.md

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

components/icon/demo/iconfont.md

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

components/icon/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { antDesignIcons } from '@ant-design/icons';
 import ReactIcon from '@ant-design/icons-react';
 import createFromIconfontCN from './IconFont';
-import { getComputedSvgStyle, svgBaseProps } from './utils';
+import { svgBaseProps } from './utils';
 import warning from '../_util/warning';
 
 ReactIcon.add(...antDesignIcons);
@@ -29,16 +29,12 @@ export interface IconProps {
   style?: React.CSSProperties;
   svgStyle?: React.CSSProperties;
   svgClassName?: string;
-  rotate?: number;
-  flip?: 'horizontal' | 'vertical' | 'both';
-  tag?: string;
   prefixCls?: string;
 }
 
 const Icon: React.SFC<IconProps> = (props) => {
   const {
     // affect outter <i>...</i>
-    tag: Tag = 'i',
     title,
     className,
     onClick,
@@ -49,9 +45,7 @@ const Icon: React.SFC<IconProps> = (props) => {
     component: Component,
     viewBox,
     spin,
-    flip,
     svgClassName,
-    rotate = 0,
     svgStyle = {},
 
     // children
@@ -72,17 +66,12 @@ const Icon: React.SFC<IconProps> = (props) => {
     [`anticon-spin`]: !!spin || type === 'loading',
   }, svgClassName);
 
-  const computedSvgStyle = getComputedSvgStyle(
-    { rotate, flip },
-    svgStyle,
-  );
-
   // component > children > type
   if (Component) {
     const innerSvgProps: CustomIconComponentProps = {
       ...svgBaseProps,
       className: svgClassString,
-      style: computedSvgStyle,
+      style: svgStyle,
       viewBox,
     };
     if (!viewBox) {
@@ -90,11 +79,11 @@ const Icon: React.SFC<IconProps> = (props) => {
     }
 
     return (
-      <Tag className={classString} title={title} style={style} onClick={onClick}>
+      <i className={classString} title={title} style={style} onClick={onClick}>
         <Component {...innerSvgProps} >
           {children}
         </Component>
-      </Tag>
+      </i>
     );
   }
 
@@ -107,31 +96,31 @@ const Icon: React.SFC<IconProps> = (props) => {
     const innerSvgProps: CustomIconComponentProps = {
       ...svgBaseProps,
       className: svgClassString,
-      style: computedSvgStyle,
+      style: svgStyle,
     };
     return (
-      <Tag className={classString} title={title} style={style} onClick={onClick}>
+      <i className={classString} title={title} style={style} onClick={onClick}>
         <svg {...innerSvgProps} viewBox={viewBox}>
           {children}
         </svg>
-      </Tag>
+      </i>
     );
   }
 
   if (type) {
     return (
-      <Tag className={classString} title={title} style={style} onClick={onClick}>
+      <i className={classString} title={title} style={style} onClick={onClick}>
         <ReactIcon
           className={svgClassString}
           type={type}
-          style={computedSvgStyle}
+          style={svgStyle}
         />
-      </Tag>
+      </i>
     );
   }
 
   return (
-    <Tag className={classString} title={title} style={style} onClick={onClick} />
+    <i className={classString} title={title} style={style} onClick={onClick} />
   );
 };
 

components/icon/index.zh-CN.md

@@ -21,7 +21,7 @@ toc: false
 
 ## 图标列表
 
-> Click the icon and copy the code。
+> 点击图标即可复制代码。
 
 ### 方向性图标
 
@@ -58,15 +58,11 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 图标类型，遵循图标的命名规范 | string | - |
-| rotate | 设置图标顺时针旋转的角度，使用角度制 | number | - |
-| flip | 翻转图标，可进行水平、垂直翻转 | 'horizontal' \| 'vertical' \| 'both' | - |
-| tag | 设置图标容器的标签 | string | 'i' |
 | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |
-| svgStyle | 设置图标本身`<svg>`标签的样式，会覆盖`flip`和`rotate`的效果 | CSSProperties | - |
+| svgStyle | 设置图标本身`<svg>`标签的样式 | CSSProperties | - |
 | svgClassName | 为图标本身`<svg>`标签设置额外的类名 | string | - |
 | spin | 是否有旋转动画 | boolean | false |
-| viewBox | 设置自定义图标[视图容器盒](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)的大小，对自定义图标有效，**对 Ant Design 内置图标无效** | string | '0 0 1024 1024' |
-| component | 控制如何渲染图标，通常是一个渲染为 `<svg>` 标签的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
+| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
 
 所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
 
@@ -74,7 +70,7 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
 <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
 ```
 
-如果您使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入
+如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
 
 ```js
 // webpack.config.js
@@ -110,14 +106,13 @@ ReactDOM.render(
 
 #### CustomIconComponentProps
 
-`Icon` 中的 `component` 组件属性如下：
+`Icon` 中的 `component` 组件的属性如下：
 
 | 字段 | 说明 | 类型 | 只读值 |
 | --- | --- | --- | --- |
 | width | `svg` 元素宽度 | string \| number | '1em' |
 | height | `svg` 元素高度 | string \| number | '1em' |
 | fill | `svg` 元素填充的颜色 | string | 'currentColor' |
-| viewBox | 图标[视图容器盒](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)的大小，继承自自定义组件的 `viewBox` 属性 | string | - |
 | className | 计算后的 `svg` 类名 | string | - |
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
 
@@ -127,9 +122,12 @@ ReactDOM.render(
 使用方式如下：
 
 ```js
-const MyIcon = Icon.createFromIconfontCN({});
+const MyIcon = Icon.createFromIconfontCN({
+  namespace: 'foo', // identifier
+  url: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi', // generated by iconfont.cn
+  prefix: 'icon-',
+});
 
-// after importing SVG symbols
 ReactDOM.render(<MyIcon type="example" />, mountedNode);
 ```
 
@@ -140,10 +138,10 @@ ReactDOM.render(<MyIcon type="example" />, mountedNode);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | prefix | 设置图标的前缀，通常以短横线结尾，如 `icon-`、`foo-` | string | '' |
-| extraCommonProps | 给所有的 `svg` 图标设置额外的属性 | `{ [key: string]: any }` | {} |
-| namespace | 图标集合的名字空间，在 `cdnUrl` 也设置的情况下有效，用于区分已导入的图标符号集合 | string | - |
-| cdnUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
+| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
+| namespace | 图标集合的名字空间，在 `url` 也设置的情况下有效，用于区分已导入的图标符号集合 | string | - |
+| url | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - |
 
-在 `namespace` 和 `cdnUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
+在 `namespace` 和 `url` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 
 见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。

components/icon/utils.ts

@@ -1,25 +1,3 @@
-import * as React from 'react';
-import { IconProps } from './index';
-
-type TransformInformation = Pick<IconProps, 'rotate' | 'flip'>;
-
-export function getComputedSvgStyle(
-  { rotate, flip }: TransformInformation,
-  svgStyle: React.CSSProperties,
-): React.CSSProperties {
-
-  if (!(rotate || flip)) {
-    return { ...svgStyle };
-  }
-
-  return {
-    transform: `${rotate ? `rotate(${rotate}deg)` : ''} `
-      + `${(flip === 'horizontal' || flip === 'both') ? `scaleX(-1)` : ''} `
-      + `${(flip === 'vertical' || flip === 'both') ? `scaleY(-1)` : ''}`,
-    ...svgStyle,
-  };
-}
-
 // 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
 export const svgBaseProps = {