feat(Icon): add style prop (#2406)

Author: KrotovPetr

src/components/Icon/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type {QAProps} from '../types';
+import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 import {a11yHiddenSvgProps} from '../utils/svg';
 
@@ -22,21 +22,23 @@ interface IconComposition {
     prefix?: string;
 }
 
-export interface IconProps extends QAProps {
+export interface IconProps extends QAProps, DOMProps {
     data: IconData;
     width?: number | string;
     height?: number | string;
     size?: number | string;
     fill?: string;
     stroke?: string;
-    className?: string;
 }
 
 const b = block('icon');
 
 export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>> &
     IconComposition = React.forwardRef<SVGSVGElement, IconProps>(
-    ({data, width, height, size, className, fill = 'currentColor', stroke = 'none', qa}, ref) => {
+    (
+        {data, width, height, size, className, style, fill = 'currentColor', stroke = 'none', qa},
+        ref,
+    ) => {
         // This component supports four different ways to load and use icons:
         // - svg-react-loader
         // - svg-sprite-loader
@@ -95,6 +97,7 @@ export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribut
             width: w,
             height: h,
             className: b(null, className),
+            style,
             fill,
             stroke,
             'data-qa': qa,

src/components/Icon/README-ru.md

@@ -60,3 +60,4 @@ import CheckIcon from './check.svg';
 | fill      | Атрибут `fill` для SVG.                        |     `string`      |   `"currentColor"`    |
 | stroke    | Атрибут `stroke` для SVG.                      |     `string`      |       `"none"`        |
 | className | Пользовательский CSS-класс корневого элемента. |     `string`      |                       |
+| style     | Пользовательские стили для корневого элемента. |  `CSSProperties`  |                       |

src/components/Icon/README.md

@@ -60,3 +60,4 @@ import CheckIcon from './check.svg';
 | 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`  |                  |

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

@@ -14,6 +14,9 @@ const meta: Meta<typeof Icon> = {
             options: Object.keys(icons),
             mapping: icons,
         },
+        style: {
+            control: 'object',
+        },
     },
     args: {
         data: 'Gear',
@@ -41,6 +44,10 @@ type Story = StoryObj<typeof Icon>;
 export const Default: Story = {};
 
 export const Size: Story = {
+    args: {
+        style: {},
+    },
+
     render: (args) => (
         <Showcase>
             <Icon {...args} size={16} />