fix: color should be svg property

close ant-design#497
JounQin · Aug 30, 2021 · 7e6f7d4 · 7e6f7d4
1 parent ada40f0
commit 7e6f7d4
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 0 deletions.
diff --git a/packages/icons-react/src/components/Icon.tsx b/packages/icons-react/src/components/Icon.tsx
@@ -5,6 +5,7 @@ import Context from './Context';
 import { svgBaseProps, warning, useInsertStyles } from '../utils';
 
 export interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
+  color?: string;
   spin?: boolean;
   rotate?: number;
 }
@@ -16,6 +17,7 @@ export interface CustomIconComponentProps {
   viewBox?: string;
   className?: string;
   style?: React.CSSProperties;
+  color?: string
 }
 export interface IconComponentProps extends IconBaseProps {
   viewBox?: string;
@@ -30,6 +32,7 @@ const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref)
 
     // affect inner <svg>...</svg>
     component: Component,
+    color,
     viewBox,
     spin,
     rotate,
@@ -69,6 +72,7 @@ const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref)
 
   const innerSvgProps: CustomIconComponentProps = {
     ...svgBaseProps,
+    color,
     className: svgClassString,
     style: svgStyle,
     viewBox,

diff --git a/packages/icons-react/src/components/IconBase.tsx b/packages/icons-react/src/components/IconBase.tsx
@@ -12,6 +12,7 @@ export interface IconProps {
   icon: IconDefinition;
   className?: string;
   onClick?: React.MouseEventHandler<SVGSVGElement>;
+  color?: string;
   style?: React.CSSProperties;
   primaryColor?: string; // only for two-tone
   secondaryColor?: string; // only for two-tone

diff --git a/packages/icons-react/tests/Icon.test.tsx b/packages/icons-react/tests/Icon.test.tsx
@@ -9,6 +9,7 @@ describe('React AntdIcon Component', () => {
       style: {
         fontSize: '3rem',
       },
+      color: 'red',
       className: 'my-icon',
       extraProps: { hello: 'world' },
     } as any;

diff --git a/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap b/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`React AntdIcon Component should create SVG element. 1`] = `
 <IconReact
   className="my-icon"
+  color="red"
   extraProps={
     Object {
       "hello": "world",

diff --git a/packages/icons-react/tests/__snapshots__/index.test.tsx.snap b/packages/icons-react/tests/__snapshots__/index.test.tsx.snap
@@ -1043,6 +1043,24 @@ exports[`Icon.createFromIconfontCN() should support iconfont.cn 1`] = `
       />
     </svg>
   </span>
+  <span
+    class="anticon abc"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      color="blue"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      width="1em"
+    >
+      <use
+        href="#icon-twitter"
+      />
+    </svg>
+  </span>
 </div>
 `;
 

diff --git a/packages/icons-react/tests/index.test.tsx b/packages/icons-react/tests/index.test.tsx
@@ -300,6 +300,7 @@ describe('Icon.createFromIconfontCN()', () => {
         <IconFont type="icon-tuichu" />
         <IconFont type="icon-facebook" />
         <IconFont type="icon-twitter" />
+        <IconFont type="icon-twitter" color="blue" />
       </div>,
     );
     expect(wrapper).toMatchSnapshot();