simpify Icon api

components/icon/demo/two-tone.md

@@ -20,7 +20,7 @@ ReactDOM.render(
   <div className="icons-list">
     <Icon type="dollar" theme="twoTone" />
     <Icon type="euro" theme="twoTone" />
-    <Icon type="check-circle" theme="twoTone" primaryColor="#eb2f96" />
+    <Icon type="check-circle" theme="twoTone" twoToneColor="#eb2f96" />
   </div>,
   mountNode
 );

components/icon/index.en-US.md

@@ -29,8 +29,7 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | svgClassName | Define extra class name for the SVG element | string | - |
 | spin | Rotate icon with animation | boolean | false |
 | component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
-| primaryColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
+| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
-| secondaryColor | Only support the two-tone icon. Specific the secondary color. | string (hex color) | - |
 
 All the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.
 

components/icon/index.tsx

@@ -5,13 +5,11 @@ import ReactIcon from '@ant-design/icons-react';
 import createFromIconfontCN from './IconFont';
 import { svgBaseProps, withThemeSuffix } from './utils';
 import warning from '../_util/warning';
-import { getTwoToneColors, setTwoToneColors } from './twoTonePrimaryColor';
+import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
 
 // Initial setting
 ReactIcon.add(...Object.keys(allIcons).map((key) => (allIcons as any)[key]));
-ReactIcon.setTwoToneColors({
+setTwoToneColor('#1890ff');
-  primaryColor: '#1890ff',
-});
 
 export interface CustomIconComponentProps {
   width: string | number;
@@ -32,8 +30,7 @@ export interface IconProps {
   title?: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
   component?: React.ComponentType<CustomIconComponentProps>;
-  primaryColor?: string;
+  twoToneColor?: string;
-  secondaryColor?: string;
   viewBox?: string;
   spin?: boolean;
   style?: React.CSSProperties;
@@ -62,9 +59,8 @@ const Icon: React.SFC<IconProps> = (props) => {
     children,
 
     // other
-    theme,
+    theme, // default to outlined
-    primaryColor,
+    twoToneColor,
-    secondaryColor,
   } = props;
 
   warning(
@@ -127,20 +123,18 @@ const Icon: React.SFC<IconProps> = (props) => {
     if (theme) {
       computedType = withThemeSuffix(type, theme);
     }
-    if (secondaryColor) {
+    // default outlined
-      warning(
+    const computedType = withThemeSuffix(
-        Boolean(!primaryColor),
+      getTypeWithoutTheme(type),
-        `two-tone icon should be provided with the property 'primaryColor' at least.`,
+      theme || 'outlined',
-      );
+    );
-    }
     return (
       <i className={classString} title={title} style={style} onClick={onClick}>
         <ReactIcon
           className={svgClassString}
           type={computedType}
           style={svgStyle}
-          primaryColor={primaryColor}
+          primaryColor={twoToneColor}
-          secondaryColor={secondaryColor}
         />
       </i>
     );
@@ -153,13 +147,13 @@ const Icon: React.SFC<IconProps> = (props) => {
 
 export type IconType = typeof Icon & {
   createFromIconfontCN: typeof createFromIconfontCN;
-  getTwoToneColors: typeof getTwoToneColors;
+  getTwoToneColor: typeof getTwoToneColor;
-  setTwoToneColors: typeof setTwoToneColors;
+  setTwoToneColor: typeof setTwoToneColor;
 };
 
 Icon.displayName = 'Icon';
 (Icon as IconType).createFromIconfontCN = createFromIconfontCN;
-(Icon as IconType).getTwoToneColors = getTwoToneColors;
+(Icon as IconType).getTwoToneColor = getTwoToneColor;
-(Icon as IconType).setTwoToneColors = setTwoToneColors;
+(Icon as IconType).setTwoToneColor = setTwoToneColor;
 
 export default Icon as IconType;

components/icon/index.zh-CN.md

@@ -34,8 +34,7 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | svgClassName | 为图标本身`<svg>`标签设置额外的类名 | string | - |
 | spin | 是否有旋转动画 | boolean | false |
 | component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
-| primaryColor | 仅适用双色图标。设置双色图标的主要颜色。 | string (十六进制颜色) | - |
+| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色。 | string (十六进制颜色) | - |
-| secondaryColor | 仅适用双色图标。设置双色图标的次要颜色。 | string (十六进制颜色) | - |
 
 所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
 

components/icon/twoTonePrimaryColor.ts

@@ -1,9 +1,12 @@
-import ReactIcon, { TwoToneColorPalette, TwoToneColorPaletteSetter } from '@ant-design/icons-react';
+import ReactIcon from '@ant-design/icons-react';
 
-export function setTwoToneColors(colors: TwoToneColorPaletteSetter): void {
+export function setTwoToneColor(primaryColor: string): void {
-  return ReactIcon.setTwoToneColors(colors);
+  return ReactIcon.setTwoToneColors({
+    primaryColor,
+  });
 }
 
-export function getTwoToneColors(): TwoToneColorPalette {
+export function getTwoToneColor(): string {
-  return ReactIcon.getTwoToneColors();
+  const colors = ReactIcon.getTwoToneColors();
+  return colors.primaryColor;
 }