Find the decision for multiline iconed label [v2] (#taskany/bricks/863)

src/components/BaseIcon.tsx

@@ -10,28 +10,36 @@ export const iconSizesMap = {
 
 export interface BaseIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     size: keyof typeof iconSizesMap | number;
-    value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    value: React.FC<React.SVGAttributes<SVGElement>>;
     color?: string;
     stroke?: number;
 }
 
-export const BaseIcon = React.forwardRef<HTMLSpanElement, BaseIconProps>(
-    ({ size, value: Component, color, stroke = 1, onClick, className, ...props }, ref) => {
-        const sizePx = `${typeof size === 'string' ? iconSizesMap[size] : size}px`;
-        let classes = 'TaskanyIconsWrapper';
+const calculateClasses = (map: Record<string, boolean>): string => {
+    let classNames = '';
 
-        if (onClick) {
-            classes += ' TaskanyIconsWrapper_hover';
+    for (const key in map) {
+        if (key in map) {
+            if (map[key]) {
+                classNames += `${key} `;
+            }
         }
+    }
 
-        if (className) {
-            classes += ` ${className}`;
-        }
+    return classNames;
+};
+
+export const BaseIcon = React.forwardRef<HTMLSpanElement, BaseIconProps>(
+    ({ size, value: Component, color, stroke = 1, onClick, className, ...props }, ref) => {
+        const sizePx = `${typeof size === 'string' ? iconSizesMap[size] : size}px`;
+        const classes = calculateClasses({
+            TaskanyIconsWrapper: true,
+            TaskanyIconsWrapper_hover: !!onClick,
+            ...(className ? { [className]: true } : null),
+        });
 
         const style = useMemo<React.CSSProperties>(() => ({
-            fontSize: sizePx,
-            width: sizePx,
-            height: sizePx,
+            '--taskany-icons-font-size': sizePx,
             color,
         }), [color, sizePx]);
 
@@ -43,7 +51,7 @@ export const BaseIcon = React.forwardRef<HTMLSpanElement, BaseIconProps>(
                 onClick={onClick}
                 {...props}
             >
-                <Component className="TaskanyIconsInner" width={sizePx} height={sizePx} strokeWidth={stroke} />
+                <Component className="TaskanyIconsInner" width="1em" height="1em" strokeWidth={stroke} />
             </span>
         );
     },

style.css

@@ -1,11 +1,15 @@
 .TaskanyIconsWrapper {
     display: inline-block;
+    width: 1em;
+    height: 1em;
+    font-size: var(--taskany-icons-font-size, 1em);
+    line-height: 1;
 }
 
 .TaskanyIconsWrapper_hover {
     cursor: pointer;
 }
 
 .TaskanyIconsInner {
-    vertical-align: middle;
+    vertical-align: -0.125em;
 }