From e3ff836388e073907a5ed80f511f221d980833b5 Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Thu, 3 Oct 2024 18:23:01 +0300
Subject: [PATCH] fix(icons-sprite): id & viewBox (#994)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- closed #943

---

## Описание

Свойствами `viewBox` и `id` нельзя управлять, хотя он есть в типах. Вместо того чтобы убирать из типов, даем возможность изменять `viewBox` и выставлять `id`
---
 packages/icons-sprite/src/SvgIcon.tsx | 30 +++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/icons-sprite/src/SvgIcon.tsx b/packages/icons-sprite/src/SvgIcon.tsx
index 62f07e5c..41ba49b3 100644
--- a/packages/icons-sprite/src/SvgIcon.tsx
+++ b/packages/icons-sprite/src/SvgIcon.tsx
@@ -8,17 +8,22 @@ export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
   height?: number;
   getRootRef?: React.Ref<SVGSVGElement>;
   title?: string;
+  /**
+   * @ignore
+   */
+  iconId?: string;
 }
 
 const SvgIcon = ({
   width = 0,
   height = 0,
-  viewBox,
-  id,
-  className = '',
+  display = 'block',
+  'aria-hidden': ariaHidden = true,
+  iconId,
+  className,
   fill,
   getRootRef,
-  style: propsStyle = {},
+  'style': propsStyle,
   title,
   children,
   ...restProps
@@ -37,28 +42,27 @@ const SvgIcon = ({
 
   return (
     <svg
-      aria-hidden="true"
-      display="block"
-      {...restProps}
+      aria-hidden={ariaHidden}
+      display={display}
       className={[
         'vkuiIcon',
         `vkuiIcon--${size}`,
         `vkuiIcon--w-${width}`,
         `vkuiIcon--h-${height}`,
-        `vkuiIcon--${id}`,
+        `vkuiIcon--${iconId}`,
         className,
       ]
         .join(' ')
         .trim()}
-      viewBox={viewBox}
       width={width}
       height={height}
       style={style}
       ref={getRootRef}
+      {...restProps}
     >
       {title && <title>{title}</title>}
       {hasIconChildren && children}
-      <use xlinkHref={`#${id}`} style={{ fill: 'currentColor', color: fill }}>
+      <use xlinkHref={`#${iconId}`} style={{ fill: 'currentColor', color: fill }}>
         {!hasIconChildren && children}
       </use>
     </svg>
@@ -67,7 +71,7 @@ const SvgIcon = ({
 
 export function makeIcon<Props extends SvgIconProps = SvgIconProps, Subcomponents = {}>(
   componentName: string,
-  id: string,
+  iconId: string,
   viewBox: string,
   content: string,
   width: number,
@@ -97,9 +101,9 @@ export function makeIcon<Props extends SvgIconProps = SvgIconProps, Subcomponent
     return (
       <SvgIcon
         {...attrs}
-        {...props}
         viewBox={viewBox}
-        id={id}
+        iconId={iconId}
+        {...props}
         width={props.width !== undefined && !isNaN(props.width) ? +props.width : width}
         height={props.height !== undefined && !isNaN(props.height) ? +props.height : height}
       />