feat: add color prop to icon component

src/components/Icon/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type {DOMProps, QAProps} from '../types';
+import type {CSSProperties, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 import {a11yHiddenSvgProps} from '../utils/svg';
 
@@ -29,14 +29,26 @@ export interface IconProps extends QAProps, DOMProps {
     size?: number | string;
     fill?: string;
     stroke?: string;
+    color?: CSSProperties['color'] | string;
 }
 
 const b = block('icon');
 
 export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>> &
     IconComposition = React.forwardRef<SVGSVGElement, IconProps>(
     (
-        {data, width, height, size, className, style, fill = 'currentColor', stroke = 'none', qa},
+        {
+            data,
+            width,
+            height,
+            size,
+            className,
+            style,
+            color,
+            fill = 'currentColor',
+            stroke = 'none',
+            qa,
+        },
         ref,
     ) => {
         // This component supports four different ways to load and use icons:
@@ -91,13 +103,21 @@ export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribut
             }
         }
 
+        const svgStyle =
+            color && style?.color === undefined
+                ? {
+                      ...style,
+                      color,
+                  }
+                : style;
+
         const props = {
             xmlns: 'http://www.w3.org/2000/svg',
             xmlnsXlink: 'http://www.w3.org/1999/xlink',
             width: w,
             height: h,
             className: b(null, className),
-            style,
+            style: svgStyle,
             fill,
             stroke,
             'data-qa': qa,

src/components/Icon/README.md

@@ -59,5 +59,6 @@ import CheckIcon from './check.svg';
 | size      | Both `width` and `height` SVG attributes | `number` `string` |                  |
 | fill      | `fill` SVG attribute                     |     `string`      | `"currentColor"` |
 | stroke    | `stroke` SVG attribute                   |     `string`      |     `"none"`     |
+| color     | Text color applied to the SVG icon       |     `string`      |                  |
 | className | Custom CSS class for the root element    |     `string`      |                  |
 | style     | Custom styles for the root element       |  `CSSProperties`  |                  |

src/components/Icon/__stories__/Icon.stories.tsx

@@ -14,6 +14,9 @@ const meta: Meta<typeof Icon> = {
             options: Object.keys(icons),
             mapping: icons,
         },
+        color: {
+            control: 'text',
+        },
         style: {
             control: 'object',
         },

src/components/Icon/__tests__/Icon.visual.test.tsx

@@ -3,7 +3,7 @@ import {smokeTest, test} from '~playwright/core';
 import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
 import type {IconProps} from '../Icon';
 
-import {sizeCases} from './cases';
+import {colorCases, sizeCases, styleCases} from './cases';
 import {TestIcon} from './helpersPlaywright';
 
 test.describe('Icon', {tag: '@Icon'}, () => {
@@ -12,6 +12,8 @@ test.describe('Icon', {tag: '@Icon'}, () => {
             {},
             {
                 size: sizeCases,
+                color: colorCases,
+                style: styleCases,
             },
         );
 

src/components/Icon/__tests__/cases.tsx

@@ -1,4 +1,13 @@
-import type {Cases} from '../../../stories/tests-factory/models';
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
 import type {IconProps} from '../Icon';
 
 export const sizeCases: Cases<IconProps['size']> = [10, 20, 30];
+
+export const colorCases: Cases<IconProps['color']> = [
+    'var(--g-color-text-primary)',
+    'var(--g-color-text-danger)',
+];
+
+export const styleCases: CasesWithName<IconProps['style']> = [
+    ['color: var(--g-color-text-positive)', {color: 'var(--g-color-text-positive)'}],
+];