From 6c3e7026ef1d537dff9c17fb5f94134812779c0a Mon Sep 17 00:00:00 2001
From: Tony Vi <winogradovaa@gmail.com>
Date: Thu, 8 Feb 2024 23:49:16 +0300
Subject: [PATCH] fix(BaseIcon): useMemo for styles

---
 src/components/BaseIcon.tsx | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/BaseIcon.tsx b/src/components/BaseIcon.tsx
index 5df9fb2..38fe259 100644
--- a/src/components/BaseIcon.tsx
+++ b/src/components/BaseIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 export const iconSizesMap = {
     xxs: 12,
@@ -13,26 +13,33 @@ export interface BaseIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     color?: string;
     stroke?: number;
-    className?: string;
-
-    onClick?: (e: React.MouseEvent) => void;
 }
 
 export const BaseIcon = React.forwardRef<HTMLSpanElement, BaseIconProps>(
-    ({ size, value: Component, color, stroke = 1, onClick, className = '', ...props }, ref) => {
+    ({ size, value: Component, color, stroke = 1, onClick, className, ...props }, ref) => {
         const sizePx = `${typeof size === 'string' ? iconSizesMap[size] : size}px`;
-        const classes = `TaskanyIconsWrapper${onClick ? ' TaskanyIconsWrapper_hover' : ''} ${className}`.trim();
+        let classes = 'TaskanyIconsWrapper';
+
+        if (onClick) {
+            classes += ' TaskanyIconsWrapper_hover';
+        }
+
+        if (className) {
+            classes += ` ${className}`;
+        }
+
+        const style = useMemo<React.CSSProperties>(() => ({
+            fontSize: sizePx,
+            width: sizePx,
+            height: sizePx,
+            color,
+        }), [color, sizePx]);
 
         return (
             <span
                 ref={ref}
                 className={classes}
-                style={{
-                    fontSize: sizePx,
-                    width: sizePx,
-                    height: sizePx,
-                    color,
-                }}
+                style={style}
                 onClick={onClick}
                 {...props}
             >