diff --git a/packages/icons/src/components/AntdIcon.tsx b/packages/icons/src/components/AntdIcon.tsx
index 2998316fb..50eab110a 100644
--- a/packages/icons/src/components/AntdIcon.tsx
+++ b/packages/icons/src/components/AntdIcon.tsx
@@ -5,19 +5,15 @@ import { IconDefinition } from '../types';
 
 import { IconBaseProps } from './Icon';
 import ReactIcon from './IconBase';
-import {
-    getTwoToneColor,
-    TwoToneColor,
-    setTwoToneColor,
-} from './twoTonePrimaryColor';
+import { getTwoToneColor, TwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
 import { normalizeTwoToneColors } from './utils';
 
 export interface AntdIconProps extends IconBaseProps {
-    twoToneColor?: TwoToneColor;
+  twoToneColor?: TwoToneColor;
 }
 
 export interface IconComponentProps extends AntdIconProps {
-    icon: IconDefinition;
+  icon: IconDefinition;
 }
 
 // Initial setting
@@ -26,76 +22,70 @@ setTwoToneColor('#1890ff');
 
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720
 interface IconBaseComponent<Props>
-    extends React.ForwardRefExoticComponent<
-        Props & React.RefAttributes<HTMLSpanElement>
-    > {
-    getTwoToneColor: typeof getTwoToneColor;
-    setTwoToneColor: typeof setTwoToneColor;
+  extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>> {
+  getTwoToneColor: typeof getTwoToneColor;
+  setTwoToneColor: typeof setTwoToneColor;
 }
 
-const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(
-    (props, ref) => {
-        const {
-            // affect outter <i>...</i>
-            className,
-
-            // affect inner <svg>...</svg>
-            icon,
-            spin,
-            rotate,
-
-            tabIndex,
-            onClick,
-
-            // other
-            twoToneColor,
-
-            ...restProps
-        } = props;
-
-        const classString = classNames(
-            'anticon',
-            { [`anticon-${icon.name}`]: Boolean(icon.name) },
-            { 'anticon-spin': !!spin || icon.name === 'loading' },
-            className,
-        );
-
-        let iconTabIndex = tabIndex;
-        if (iconTabIndex === undefined && onClick) {
-            iconTabIndex = -1;
-        }
-
-        const svgStyle = rotate
-            ? {
-                  msTransform: `rotate(${rotate}deg)`,
-                  transform: `rotate(${rotate}deg)`,
-              }
-            : undefined;
-
-        const [primaryColor, secondaryColor] = normalizeTwoToneColors(
-            twoToneColor,
-        );
-
-        return (
-            <span
-                role="img"
-                aria-label={icon.name}
-                {...restProps}
-                ref={ref}
-                tabIndex={iconTabIndex}
-                onClick={onClick}
-                className={classString}
-            >
-                <ReactIcon
-                    icon={icon}
-                    primaryColor={primaryColor}
-                    secondaryColor={secondaryColor}
-                    style={svgStyle}
-                />
-            </span>
-        );
-    },
-) as IconBaseComponent<IconComponentProps>;
+const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
+
+    // affect inner <svg>...</svg>
+    icon,
+    spin,
+    rotate,
+
+    tabIndex,
+    onClick,
+
+    // other
+    twoToneColor,
+
+    ...restProps
+  } = props;
+
+  const classString = classNames(
+    'anticon',
+    { [`anticon-${icon.name}`]: Boolean(icon.name) },
+    { 'anticon-spin': !!spin || icon.name === 'loading' },
+    className
+  );
+
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
+  }
+
+  const svgStyle = rotate
+    ? {
+        msTransform: `rotate(${rotate}deg)`,
+        transform: `rotate(${rotate}deg)`,
+      }
+    : undefined;
+
+  const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
+
+  return (
+    <span
+      role="img"
+      aria-label={icon.name}
+      {...restProps}
+      ref={ref}
+      tabIndex={iconTabIndex}
+      onClick={onClick}
+      className={classString}
+    >
+      <ReactIcon
+        icon={icon}
+        primaryColor={primaryColor}
+        secondaryColor={secondaryColor}
+        style={svgStyle}
+      />
+    </span>
+  );
+}) as IconBaseComponent<IconComponentProps>;
 
 Icon.displayName = 'AntdIcon';
 Icon.getTwoToneColor = getTwoToneColor;
diff --git a/packages/icons/src/components/Icon.tsx b/packages/icons/src/components/Icon.tsx
index d0db06693..393f3cc6d 100644
--- a/packages/icons/src/components/Icon.tsx
+++ b/packages/icons/src/components/Icon.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
-import classNames from "classnames";
+import * as React from 'react';
+import classNames from 'classnames';
 
-import { warning, svgBaseProps } from "./utils";
+import { warning, svgBaseProps } from './utils';
 
 export interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
   spin?: boolean;
@@ -19,113 +19,109 @@ export interface CustomIconComponentProps {
 
 export interface IconComponentProps extends IconBaseProps {
   viewBox?: string;
-  component?: React.ComponentType<
-    CustomIconComponentProps | React.SVGProps<SVGSVGElement>
-  >;
-  ariaLabel?: React.AriaAttributes["aria-label"];
+  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
+  ariaLabel?: React.AriaAttributes['aria-label'];
 }
 
-const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(
-  (props, ref) => {
-    const {
-      // affect outter <i>...</i>
-      className,
+const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
 
-      // affect inner <svg>...</svg>
-      component: Component,
-      viewBox,
-      spin,
-      rotate,
+    // affect inner <svg>...</svg>
+    component: Component,
+    viewBox,
+    spin,
+    rotate,
 
-      tabIndex,
-      onClick,
+    tabIndex,
+    onClick,
 
-      // children
-      children,
-      ...restProps
-    } = props;
+    // children
+    children,
+    ...restProps
+  } = props;
 
-    if (!!Component || !!children) {
-      console.error("Should have `component` prop or `children`.");
-    }
-    // warning(
-    //   Boolean(Component || children),
-    //   'Should have `component` prop or `children`.',
-    // );
-
-    // useInsertStyles();
-
-    const classString = classNames("anticon", className);
-
-    const svgClassString = classNames({
-      "anticon-spin": !!spin,
-    });
-
-    const svgStyle = rotate
-      ? {
-          msTransform: `rotate(${rotate}deg)`,
-          transform: `rotate(${rotate}deg)`,
-        }
-      : undefined;
-
-    const innerSvgProps: CustomIconComponentProps = {
-      ...svgBaseProps,
-      className: svgClassString,
-      style: svgStyle,
-      viewBox,
-    };
-
-    if (!viewBox) {
-      delete innerSvgProps.viewBox;
-    }
+  if (!!Component || !!children) {
+    console.error('Should have `component` prop or `children`.');
+  }
+  // warning(
+  //   Boolean(Component || children),
+  //   'Should have `component` prop or `children`.',
+  // );
 
-    // component > children
-    const renderInnerNode = () => {
-      if (Component) {
-        // @ts-ignore
-        return <Component {...innerSvgProps}>{children}</Component>;
-      }
+  // useInsertStyles();
+
+  const classString = classNames('anticon', className);
+
+  const svgClassString = classNames({
+    'anticon-spin': !!spin,
+  });
 
-      if (children) {
-        warning(
-          Boolean(viewBox) ||
-            (React.Children.count(children) === 1 &&
-              React.isValidElement(children) &&
-              React.Children.only(children).type === "use"),
-          "Make sure that you provide correct `viewBox`" +
-            " prop (default `0 0 1024 1024`) to the icon."
-        );
-
-        return (
-          <svg {...innerSvgProps} viewBox={viewBox}>
-            {children}
-          </svg>
-        );
+  const svgStyle = rotate
+    ? {
+        msTransform: `rotate(${rotate}deg)`,
+        transform: `rotate(${rotate}deg)`,
       }
+    : undefined;
 
-      return null;
-    };
+  const innerSvgProps: CustomIconComponentProps = {
+    ...svgBaseProps,
+    className: svgClassString,
+    style: svgStyle,
+    viewBox,
+  };
 
-    let iconTabIndex = tabIndex;
-    if (iconTabIndex === undefined && onClick) {
-      iconTabIndex = -1;
+  if (!viewBox) {
+    delete innerSvgProps.viewBox;
+  }
+
+  // component > children
+  const renderInnerNode = () => {
+    if (Component) {
+      // @ts-ignore
+      return <Component {...innerSvgProps}>{children}</Component>;
     }
 
-    return (
-      <span
-        role="img"
-        {...restProps}
-        ref={ref}
-        tabIndex={iconTabIndex}
-        onClick={onClick}
-        className={classString}
-      >
-        {renderInnerNode()}
-      </span>
-    );
+    if (children) {
+      warning(
+        Boolean(viewBox) ||
+          (React.Children.count(children) === 1 &&
+            React.isValidElement(children) &&
+            React.Children.only(children).type === 'use'),
+        'Make sure that you provide correct `viewBox`' +
+          ' prop (default `0 0 1024 1024`) to the icon.'
+      );
+
+      return (
+        <svg {...innerSvgProps} viewBox={viewBox}>
+          {children}
+        </svg>
+      );
+    }
+
+    return null;
+  };
+
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
   }
-);
 
-Icon.displayName = "AntdIcon";
+  return (
+    <span
+      role="img"
+      {...restProps}
+      ref={ref}
+      tabIndex={iconTabIndex}
+      onClick={onClick}
+      className={classString}
+    >
+      {renderInnerNode()}
+    </span>
+  );
+});
+
+Icon.displayName = 'AntdIcon';
 
 export default Icon;
diff --git a/packages/icons/src/components/IconBase.tsx b/packages/icons/src/components/IconBase.tsx
index 35ff5d113..527087929 100644
--- a/packages/icons/src/components/IconBase.tsx
+++ b/packages/icons/src/components/IconBase.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
-import { AbstractNode, IconDefinition } from "../types";
+import * as React from 'react';
+import { AbstractNode, IconDefinition } from '../types';
 import {
   generate,
   getSecondaryColor,
   isIconDefinition,
   warning,
   // useInsertStyles,
-} from "./utils";
+} from './utils';
 
 export interface IconProps {
   icon: IconDefinition;
@@ -28,18 +28,14 @@ export interface TwoToneColorPalette extends TwoToneColorPaletteSetter {
 }
 
 const twoToneColorPalette: TwoToneColorPalette = {
-  primaryColor: "#333",
-  secondaryColor: "#E6E6E6",
+  primaryColor: '#333',
+  secondaryColor: '#E6E6E6',
   calculated: false,
 };
 
-function setTwoToneColors({
-  primaryColor,
-  secondaryColor,
-}: TwoToneColorPaletteSetter) {
+function setTwoToneColors({ primaryColor, secondaryColor }: TwoToneColorPaletteSetter) {
   twoToneColorPalette.primaryColor = primaryColor;
-  twoToneColorPalette.secondaryColor =
-    secondaryColor || getSecondaryColor(primaryColor);
+  twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
   twoToneColorPalette.calculated = !!secondaryColor;
 }
 
@@ -54,16 +50,8 @@ interface IconBaseComponent<P> extends React.FC<P> {
   setTwoToneColors: typeof setTwoToneColors;
 }
 
-const IconBase: IconBaseComponent<IconProps> = (props) => {
-  const {
-    icon,
-    className,
-    onClick,
-    style,
-    primaryColor,
-    secondaryColor,
-    ...restProps
-  } = props;
+const IconBase: IconBaseComponent<IconProps> = props => {
+  const { icon, className, onClick, style, primaryColor, secondaryColor, ...restProps } = props;
 
   let colors: TwoToneColorPalette = twoToneColorPalette;
   if (primaryColor) {
@@ -75,17 +63,14 @@ const IconBase: IconBaseComponent<IconProps> = (props) => {
 
   // useInsertStyles();
 
-  warning(
-    isIconDefinition(icon),
-    `icon should be icon definiton, but got ${icon}`
-  );
+  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`);
 
   if (!isIconDefinition(icon)) {
     return null;
   }
 
   let target = icon;
-  if (target && typeof target.icon === "function") {
+  if (target && typeof target.icon === 'function') {
     target = {
       ...target,
       icon: target.icon(colors.primaryColor, colors.secondaryColor),
@@ -95,16 +80,16 @@ const IconBase: IconBaseComponent<IconProps> = (props) => {
     className,
     onClick,
     style,
-    "data-icon": target.name,
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    "aria-hidden": "true",
+    'data-icon': target.name,
+    width: '1em',
+    height: '1em',
+    fill: 'currentColor',
+    'aria-hidden': 'true',
     ...restProps,
   });
 };
 
-IconBase.displayName = "IconReact";
+IconBase.displayName = 'IconReact';
 IconBase.getTwoToneColors = getTwoToneColors;
 IconBase.setTwoToneColors = setTwoToneColors;
 
diff --git a/packages/icons/src/components/IconFont.tsx b/packages/icons/src/components/IconFont.tsx
index 4ca89cea5..df15deb6b 100644
--- a/packages/icons/src/components/IconFont.tsx
+++ b/packages/icons/src/components/IconFont.tsx
@@ -4,91 +4,80 @@ import Icon, { IconBaseProps } from './Icon';
 const customCache = new Set<string>();
 
 export interface CustomIconOptions {
-    scriptUrl?: string | string[];
-    extraCommonProps?: { [key: string]: any };
+  scriptUrl?: string | string[];
+  extraCommonProps?: { [key: string]: any };
 }
 
 export interface IconFontProps extends IconBaseProps {
-    type: string;
+  type: string;
 }
 
 function isValidCustomScriptUrl(scriptUrl: string): boolean {
-    return Boolean(
-        typeof scriptUrl === 'string' &&
-            scriptUrl.length &&
-            !customCache.has(scriptUrl),
-    );
+  return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl));
 }
 
-function createScriptUrlElements(
-    scriptUrls: string[],
-    index: number = 0,
-): void {
-    const currentScriptUrl = scriptUrls[index];
-    if (isValidCustomScriptUrl(currentScriptUrl)) {
-        const script = document.createElement('script');
-        script.setAttribute('src', currentScriptUrl);
-        script.setAttribute('data-namespace', currentScriptUrl);
-        if (scriptUrls.length > index + 1) {
-            script.onload = () => {
-                createScriptUrlElements(scriptUrls, index + 1);
-            };
-            script.onerror = () => {
-                createScriptUrlElements(scriptUrls, index + 1);
-            };
-        }
-        customCache.add(currentScriptUrl);
-        document.body.appendChild(script);
+function createScriptUrlElements(scriptUrls: string[], index: number = 0): void {
+  const currentScriptUrl = scriptUrls[index];
+  if (isValidCustomScriptUrl(currentScriptUrl)) {
+    const script = document.createElement('script');
+    script.setAttribute('src', currentScriptUrl);
+    script.setAttribute('data-namespace', currentScriptUrl);
+    if (scriptUrls.length > index + 1) {
+      script.onload = () => {
+        createScriptUrlElements(scriptUrls, index + 1);
+      };
+      script.onerror = () => {
+        createScriptUrlElements(scriptUrls, index + 1);
+      };
     }
+    customCache.add(currentScriptUrl);
+    document.body.appendChild(script);
+  }
 }
 
-export default function create(
-    options: CustomIconOptions = {},
-): React.FC<IconFontProps> {
-    const { scriptUrl, extraCommonProps = {} } = options;
+export default function create(options: CustomIconOptions = {}): React.FC<IconFontProps> {
+  const { scriptUrl, extraCommonProps = {} } = options;
 
-    /**
-     * DOM API required.
-     * Make sure in browser environment.
-     * The Custom Icon will create a <script/>
-     * that loads SVG symbols and insert the SVG Element into the document body.
-     */
-    if (
-        scriptUrl &&
-        typeof document !== 'undefined' &&
-        typeof window !== 'undefined' &&
-        typeof document.createElement === 'function'
-    ) {
-        if (Array.isArray(scriptUrl)) {
-            // 因为iconfont资源会把svg插入before，所以前加载相同type会覆盖后加载，为了数组覆盖顺序，倒叙插入
-            createScriptUrlElements(scriptUrl.reverse());
-        } else {
-            createScriptUrlElements([scriptUrl]);
-        }
+  /**
+   * DOM API required.
+   * Make sure in browser environment.
+   * The Custom Icon will create a <script/>
+   * that loads SVG symbols and insert the SVG Element into the document body.
+   */
+  if (
+    scriptUrl &&
+    typeof document !== 'undefined' &&
+    typeof window !== 'undefined' &&
+    typeof document.createElement === 'function'
+  ) {
+    if (Array.isArray(scriptUrl)) {
+      // 因为iconfont资源会把svg插入before，所以前加载相同type会覆盖后加载，为了数组覆盖顺序，倒叙插入
+      createScriptUrlElements(scriptUrl.reverse());
+    } else {
+      createScriptUrlElements([scriptUrl]);
     }
+  }
 
-    const Iconfont = React.forwardRef<HTMLSpanElement, IconFontProps>(
-        (props, ref) => {
-            const { type, children, ...restProps } = props;
+  const Iconfont = React.forwardRef<HTMLSpanElement, IconFontProps>((props, ref) => {
+    const { type, children, ...restProps } = props;
 
-            // children > type
-            let content: React.ReactNode = null;
-            if (props.type) {
-                content = <use xlinkHref={`#${type}`} />;
-            }
-            if (children) {
-                content = children;
-            }
-            return (
-                <Icon {...extraCommonProps} {...restProps} ref={ref}>
-                    {content}
-                </Icon>
-            );
-        },
+    // children > type
+    let content: React.ReactNode = null;
+    if (props.type) {
+      content = <use xlinkHref={`#${type}`} />;
+    }
+    if (children) {
+      content = children;
+    }
+    return (
+      <Icon {...extraCommonProps} {...restProps} ref={ref}>
+        {content}
+      </Icon>
     );
+  });
 
-    Iconfont.displayName = 'Iconfont';
+  Iconfont.displayName = 'Iconfont';
 
-    // @ts-ignore
-    return Iconfont;
+  // @ts-ignore
+  return Iconfont;
 }
diff --git a/packages/icons/src/components/twoTonePrimaryColor.ts b/packages/icons/src/components/twoTonePrimaryColor.ts
index f1cf4c45e..018902bcf 100644
--- a/packages/icons/src/components/twoTonePrimaryColor.ts
+++ b/packages/icons/src/components/twoTonePrimaryColor.ts
@@ -4,17 +4,17 @@ import { normalizeTwoToneColors } from './utils';
 export type TwoToneColor = string | [string, string];
 
 export function setTwoToneColor(twoToneColor: TwoToneColor): void {
-    const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
-    return ReactIcon.setTwoToneColors({
-        primaryColor,
-        secondaryColor,
-    });
+  const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
+  return ReactIcon.setTwoToneColors({
+    primaryColor,
+    secondaryColor,
+  });
 }
 
 export function getTwoToneColor(): TwoToneColor {
-    const colors = ReactIcon.getTwoToneColors();
-    if (!colors.calculated) {
-        return colors.primaryColor;
-    }
-    return [colors.primaryColor, colors.secondaryColor];
+  const colors = ReactIcon.getTwoToneColors();
+  if (!colors.calculated) {
+    return colors.primaryColor;
+  }
+  return [colors.primaryColor, colors.secondaryColor];
 }
diff --git a/packages/icons/src/components/utils.ts b/packages/icons/src/components/utils.ts
index bcbe53223..58f1bea7d 100644
--- a/packages/icons/src/components/utils.ts
+++ b/packages/icons/src/components/utils.ts
@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 // import { insertCss } from 'insert-css';
-import { generate as generateColor } from "@ant-design/colors";
+import { generate as generateColor } from '@ant-design/colors';
 // import warn from 'rc-util/lib/warning';
-import { AbstractNode, IconDefinition } from "../types";
+import { AbstractNode, IconDefinition } from '../types';
 
 export function warning(valid: boolean, message: string) {
   //   warn(valid, `[@ant-design/icons] ${message}`);
@@ -13,10 +13,10 @@ export function warning(valid: boolean, message: string) {
 
 export function isIconDefinition(target: any): target is IconDefinition {
   return (
-    typeof target === "object" &&
-    typeof target.name === "string" &&
-    typeof target.theme === "string" &&
-    (typeof target.icon === "object" || typeof target.icon === "function")
+    typeof target === 'object' &&
+    typeof target.name === 'string' &&
+    typeof target.theme === 'string' &&
+    (typeof target.icon === 'object' || typeof target.icon === 'function')
   );
 }
 
@@ -24,7 +24,7 @@ export function normalizeAttrs(attrs: Attrs = {}): Attrs {
   return Object.keys(attrs).reduce((acc: Attrs, key) => {
     const val = attrs[key];
     switch (key) {
-      case "class":
+      case 'class':
         acc.className = val;
         delete acc.class;
         break;
@@ -48,9 +48,7 @@ export function generate(
     return React.createElement(
       node.tag,
       { key, ...normalizeAttrs(node.attrs) },
-      (node.children || []).map((child, index) =>
-        generate(child, `${key}-${node.tag}-${index}`)
-      )
+      (node.children || []).map((child, index) => generate(child, `${key}-${node.tag}-${index}`))
     );
   }
   return React.createElement(
@@ -60,9 +58,7 @@ export function generate(
       ...normalizeAttrs(node.attrs),
       ...rootProps,
     },
-    (node.children || []).map((child, index) =>
-      generate(child, `${key}-${node.tag}-${index}`)
-    )
+    (node.children || []).map((child, index) => generate(child, `${key}-${node.tag}-${index}`))
   );
 }
 
@@ -84,11 +80,11 @@ export function normalizeTwoToneColors(
 // 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 = {
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true",
-  focusable: "false",
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  'aria-hidden': 'true',
+  focusable: 'false',
 };
 
 export const iconStyles = `
diff --git a/packages/icons/src/types.ts b/packages/icons/src/types.ts
index 324e2f100..83fe7f4f5 100644
--- a/packages/icons/src/types.ts
+++ b/packages/icons/src/types.ts
@@ -9,15 +9,8 @@ export interface AbstractNode {
 export interface IconDefinition {
   name: string; // kebab-case-style
   theme: ThemeType;
-  icon:
-    | ((primaryColor: string, secondaryColor: string) => AbstractNode)
-    | AbstractNode;
+  icon: ((primaryColor: string, secondaryColor: string) => AbstractNode) | AbstractNode;
 }
 
-export type ThemeType = "filled" | "outlined" | "twotone" | "colored" | "svg";
-export type ThemeTypeUpperCase =
-  | "Filled"
-  | "Outlined"
-  | "TwoTone"
-  | "Colored"
-  | "Svg";
+export type ThemeType = 'filled' | 'outlined' | 'twotone' | 'colored' | 'svg';
+export type ThemeTypeUpperCase = 'Filled' | 'Outlined' | 'TwoTone' | 'Colored' | 'Svg';