feat: add color prop to icon component

src/components/Icon/Icon.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import type {ColorTextBaseProps} from '../Text/colorText/colorText';
+import {colorText} from '../Text/colorText/colorText';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 import {a11yHiddenSvgProps} from '../utils/svg';
@@ -22,7 +24,7 @@ interface IconComposition {
     prefix?: string;
 }
 
-export interface IconProps extends QAProps, DOMProps {
+export interface IconProps extends QAProps, DOMProps, ColorTextBaseProps {
     data: IconData;
     width?: number | string;
     height?: number | string;
@@ -36,7 +38,18 @@ 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,12 +104,17 @@ export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribut
             }
         }
 
+        const hasStyleColor = style?.color !== undefined;
+
+        const svgClassName =
+            color && !hasStyleColor ? colorText({color}, b(null, className)) : b(null, className);
+
         const props = {
             xmlns: 'http://www.w3.org/2000/svg',
             xmlnsXlink: 'http://www.w3.org/1999/xlink',
             width: w,
             height: h,
-            className: b(null, className),
+            className: svgClassName,
             style,
             fill,
             stroke,

src/components/Icon/README-ru.md

@@ -51,13 +51,14 @@ import CheckIcon from './check.svg';
 
 ## Свойства
 
-| Имя       | Описание                                       |        Тип        | Значение по умолчанию |
-| :-------- | :--------------------------------------------- | :---------------: | :-------------------: |
-| data      | Источник SVG-иконки.                           |    `IconData`     |                       |
-| width     | Атрибут `width` для SVG.                       | `number` `string` |                       |
-| height    | Атрибут `height` для SVG.                      | `number` `string` |                       |
-| size      | Атрибуты `width` и `height` для SVG.           | `number` `string` |                       |
-| fill      | Атрибут `fill` для SVG.                        |     `string`      |   `"currentColor"`    |
-| stroke    | Атрибут `stroke` для SVG.                      |     `string`      |       `"none"`        |
-| className | Пользовательский CSS-класс корневого элемента. |     `string`      |                       |
-| style     | Пользовательские стили для корневого элемента. |  `CSSProperties`  |                       |
+| Имя       | Описание                                       |                             Тип                              | Значение по умолчанию |
+| :-------- | :--------------------------------------------- | :----------------------------------------------------------: | :-------------------: |
+| data      | Источник SVG-иконки.                           |                          `IconData`                          |                       |
+| width     | Атрибут `width` для SVG.                       |                      `number` `string`                       |                       |
+| height    | Атрибут `height` для SVG.                      |                      `number` `string`                       |                       |
+| size      | Атрибуты `width` и `height` для SVG.           |                      `number` `string`                       |                       |
+| fill      | Атрибут `fill` для SVG.                        |                           `string`                           |   `"currentColor"`    |
+| stroke    | Атрибут `stroke` для SVG.                      |                           `string`                           |       `"none"`        |
+| color     | Цвет текста иконки.                            | `string` (см. значения в разделе **Цвет** компонента `Text`) |                       |
+| className | Пользовательский CSS-класс корневого элемента. |                           `string`                           |                       |
+| style     | Пользовательские стили для корневого элемента. |                       `CSSProperties`                        |                       |

src/components/Icon/README.md

@@ -51,13 +51,14 @@ import CheckIcon from './check.svg';
 
 ## Properties
 
-| Name      | Description                              |       Type        |     Default      |
-| :-------- | :--------------------------------------- | :---------------: | :--------------: |
-| data      | Source of SVG icon                       |    `IconData`     |                  |
-| width     | `width` SVG attribute                    | `number` `string` |                  |
-| height    | `height` SVG attribute                   | `number` `string` |                  |
-| size      | Both `width` and `height` SVG attributes | `number` `string` |                  |
-| fill      | `fill` SVG attribute                     |     `string`      | `"currentColor"` |
-| stroke    | `stroke` SVG attribute                   |     `string`      |     `"none"`     |
-| className | Custom CSS class for the root element    |     `string`      |                  |
-| style     | Custom styles for the root element       |  `CSSProperties`  |                  |
+| Name      | Description                              |                             Type                             |     Default      |
+| :-------- | :--------------------------------------- | :----------------------------------------------------------: | :--------------: |
+| data      | Source of SVG icon                       |                          `IconData`                          |                  |
+| width     | `width` SVG attribute                    |                      `number` `string`                       |                  |
+| height    | `height` SVG attribute                   |                      `number` `string`                       |                  |
+| 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` (see the values in the **Color** section of `Text`) |                  |
+| className | Custom CSS class for the root element    |                           `string`                           |                  |
+| style     | Custom styles for the root element       |                       `CSSProperties`                        |                  |

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

@@ -2,6 +2,7 @@ import {Envelope, Gear, Rocket} from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react-webpack5';
 
 import {Showcase} from '../../../demo/Showcase';
+import {TEXT_COLORS} from '../../Text/colorText/colorText';
 import {Icon} from '../Icon';
 
 const icons = {Gear, Envelope, Rocket};
@@ -14,6 +15,10 @@ const meta: Meta<typeof Icon> = {
             options: Object.keys(icons),
             mapping: icons,
         },
+        color: {
+            control: 'select',
+            options: TEXT_COLORS,
+        },
         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,10 @@
-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']> = ['primary', 'danger'];
+
+export const styleCases: CasesWithName<IconProps['style']> = [
+    ['color: var(--g-color-text-positive)', {color: 'var(--g-color-text-positive)'}],
+];