filled, outlined and two-tone

components/icon/__tests__/index.test.js

@@ -12,7 +12,7 @@ describe('Icon', () => {
 
   it('should support two-tone icon', () => {
     const wrapper = render(
-      <Icon type="check-circle" theme="twotone" primaryColor="#f5222d" />
+      <Icon type="check-circle" theme="two-tone" primaryColor="#f5222d" />
     );
     expect(wrapper).toMatchSnapshot();
   });

components/icon/demo/basic.md

@@ -19,8 +19,8 @@ import { Icon } from 'antd';
 ReactDOM.render(
   <div className="icons-list">
     <Icon type="home" />
-    <Icon type="setting" theme="fill" />
-    <Icon type="smile" theme="outline" />
+    <Icon type="setting" theme="filled" />
+    <Icon type="smile" theme="outlined" />
     <Icon type="sync" spin />
     <Icon type="loading" />
   </div>,

components/icon/demo/two-tone.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-可以通过设置 `theme` 属性为 `twotone` 来渲染双色图标，并且可以设置全局性的主题色。
+可以通过设置 `theme` 属性为 `two-tone` 来渲染双色图标，并且可以设置全局性的主题色。
 
 ## en-US
 
-Specific them property `theme` to `twotone` to render two-tone icons. You can also set the primary color globally.
+Specific them property `theme` to `two-tone` to render two-tone icons. You can also set the primary color globally.
 
 ````jsx
 import { Icon } from 'antd';
@@ -20,9 +20,9 @@ Icon.setTwoTonePrimaryColor('#1890ff');
 
 ReactDOM.render(
   <div className="icons-list">
-    <Icon type="dollar" theme="twotone" />
-    <Icon type="euro" theme="twotone" />
-    <Icon type="check-circle" theme="twotone" primaryColor="#f5222d" />
+    <Icon type="dollar" theme="two-tone" />
+    <Icon type="euro" theme="two-tone" />
+    <Icon type="check-circle" theme="two-tone" primaryColor="#f5222d" />
   </div>,
   mountNode
 );

components/icon/index.en-US.md

@@ -59,7 +59,7 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
 | --- | --- | --- | --- |
 | type | Type of the ant design icon | string | - |
 | style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
-| theme | Theme of the ant design icon  | 'fill' \| 'outline' \| 'twotone' | - |
+| theme | Theme of the ant design icon  | 'filled' \| 'outlined' \| 'two-tone' | - |
 | svgStyle | Inline style to apply to the SVG element | CSSProperties | - |
 | svgClassName | Define extra class name for the SVG element | string | - |
 | spin | Rotate icon with animation | boolean | false |

components/icon/index.tsx

@@ -19,7 +19,7 @@ export interface CustomIconComponentProps {
   ['aria-hidden']?: string;
 }
 
-export type ThemeType = 'fill' | 'outline' | 'twotone';
+export type ThemeType = 'filled' | 'outlined' | 'two-tone';
 
 export interface IconProps {
   type?: string;

components/icon/index.zh-CN.md

@@ -63,7 +63,7 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
 | --- | --- | --- | --- |
 | type | 图标类型。遵循图标的命名规范 | string | - |
 | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |
-| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'fill' \| 'outline' \| 'twotone' | - |
+| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'two-tone' | - |
 | svgStyle | 设置图标本身`<svg>`标签的样式 | CSSProperties | - |
 | svgClassName | 为图标本身`<svg>`标签设置额外的类名 | string | - |
 | spin | 是否有旋转动画 | boolean | false |

components/icon/utils.ts

@@ -17,11 +17,11 @@ const twoToneTester = /-twotone$/;
 export function getThemeFromTypeName(type: string): ThemeType | null {
   let result: ThemeType | null = null;
   if (fillTester.test(type)) {
-    result = 'fill';
+    result = 'filled';
   } else if (outlineTester.test(type)) {
-    result = 'outline';
+    result = 'outlined';
   } else if (twoToneTester.test(type)) {
-    result = 'twotone';
+    result = 'two-tone';
   }
   return result;
 }
@@ -33,11 +33,11 @@ export function withThemeSuffix(type: string, theme: ThemeType) {
     ` The prop 'theme' will be ignored.`);
   let result = type;
   if (!alreadyHaveTheme) {
-    if (theme === 'fill') {
+    if (theme === 'filled') {
       result += '-fill';
-    } else if (theme === 'outline') {
+    } else if (theme === 'outlined') {
       result += '-o';
-    } else if (theme === 'twotone') {
+    } else if (theme === 'two-tone') {
       result += '-twotone';
     } else {
       warning(false, `This icon '${type}' has unknown theme '${theme}'`);