@bm-fe/icons 0.1.0-beta.0 → 0.2.0-beta.0

package/react/dist/JOD.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface JODProps extends Omit<IconBaseProps, 'children'> {}
+export interface JODProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const JOD: React.FC<JODProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3934)">
-      <circle cx="20" cy="20" r="20" fill="#CF1227"/>
-      <path d="M13.435 15.29H15.07V22.55C15.07 23.75 14.815 24.65 14.32 25.25C13.75 25.88 12.85 26.21 11.62 26.21C10.555 26.21 9.745 25.91 9.205 25.325C8.635 24.725 8.35 23.915 8.35 22.865V22.505H9.985V22.85C9.985 24.125 10.54 24.77 11.65 24.77C12.28 24.77 12.73 24.575 13.015 24.215C13.285 23.855 13.435 23.285 13.435 22.49V15.29ZM17.173 15.29H21.073C22.798 15.29 24.103 15.77 25.003 16.745C25.843 17.645 26.263 18.95 26.263 20.645C26.263 22.325 25.828 23.63 24.973 24.56C24.073 25.52 22.768 26 21.043 26H17.173V15.29ZM18.808 16.685V24.605H20.743C22.093 24.605 23.098 24.275 23.728 23.63C24.343 22.985 24.658 21.995 24.658 20.645C24.658 19.265 24.343 18.275 23.743 17.645C23.113 17 22.123 16.685 20.773 16.685H18.808ZM31.375 18.035C31.765 18.035 32.11 18.095 32.38 18.23V19.82C31.99 19.7 31.615 19.655 31.255 19.655C30.775 19.655 30.34 19.85 29.965 20.24C29.56 20.66 29.365 21.215 29.365 21.89V26H27.775V18.245H29.365V19.415C29.56 18.995 29.815 18.68 30.115 18.47C30.475 18.17 30.895 18.035 31.375 18.035Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3934">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const JOD = React.forwardRef<SVGSVGElement, JODProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3934)">
+        <circle cx="20" cy="20" r="20" fill="#CF1227"/>
+        <path d="M13.435 15.29H15.07V22.55C15.07 23.75 14.815 24.65 14.32 25.25C13.75 25.88 12.85 26.21 11.62 26.21C10.555 26.21 9.745 25.91 9.205 25.325C8.635 24.725 8.35 23.915 8.35 22.865V22.505H9.985V22.85C9.985 24.125 10.54 24.77 11.65 24.77C12.28 24.77 12.73 24.575 13.015 24.215C13.285 23.855 13.435 23.285 13.435 22.49V15.29ZM17.173 15.29H21.073C22.798 15.29 24.103 15.77 25.003 16.745C25.843 17.645 26.263 18.95 26.263 20.645C26.263 22.325 25.828 23.63 24.973 24.56C24.073 25.52 22.768 26 21.043 26H17.173V15.29ZM18.808 16.685V24.605H20.743C22.093 24.605 23.098 24.275 23.728 23.63C24.343 22.985 24.658 21.995 24.658 20.645C24.658 19.265 24.343 18.275 23.743 17.645C23.113 17 22.123 16.685 20.773 16.685H18.808ZM31.375 18.035C31.765 18.035 32.11 18.095 32.38 18.23V19.82C31.99 19.7 31.615 19.655 31.255 19.655C30.775 19.655 30.34 19.85 29.965 20.24C29.56 20.66 29.365 21.215 29.365 21.89V26H27.775V18.245H29.365V19.415C29.56 18.995 29.815 18.68 30.115 18.47C30.475 18.17 30.895 18.035 31.375 18.035Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3934">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 JOD.displayName = 'JOD';

package/react/dist/JPY.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface JPYProps extends Omit<IconBaseProps, 'children'> {}
+export interface JPYProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const JPY: React.FC<JPYProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3961)">
-      <circle cx="20" cy="20" r="20" fill="#BE003F"/>
-      <path d="M15.9563 13.4875H18.15V22.5437C18.15 24.0812 17.8313 25.2062 17.1938 25.9562C16.4813 26.7437 15.3563 27.1375 13.8 27.1375C12.45 27.1375 11.4188 26.7625 10.725 26.0125C10.0125 25.2625 9.65625 24.2312 9.65625 22.9187V22.4875H11.85V22.9C11.85 24.4375 12.5063 25.2062 13.8375 25.2062C14.5688 25.2062 15.1125 24.9812 15.45 24.55C15.7875 24.1188 15.9563 23.425 15.9563 22.4687V13.4875ZM19.5954 13.4875H22.2579L25.0891 19.1312L27.9204 13.4875H30.5829L26.9829 20.0125H29.3829V21.25H26.2891L26.2704 21.2687V22.825H29.3829V24.0625H26.2704V26.875H23.9079V24.0625H20.8141V22.825H23.9079V21.2687L23.8891 21.25H20.8141V20.0125H23.1954L19.5954 13.4875Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3961">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const JPY = React.forwardRef<SVGSVGElement, JPYProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3961)">
+        <circle cx="20" cy="20" r="20" fill="#BE003F"/>
+        <path d="M15.9563 13.4875H18.15V22.5437C18.15 24.0812 17.8313 25.2062 17.1938 25.9562C16.4813 26.7437 15.3563 27.1375 13.8 27.1375C12.45 27.1375 11.4188 26.7625 10.725 26.0125C10.0125 25.2625 9.65625 24.2312 9.65625 22.9187V22.4875H11.85V22.9C11.85 24.4375 12.5063 25.2062 13.8375 25.2062C14.5688 25.2062 15.1125 24.9812 15.45 24.55C15.7875 24.1188 15.9563 23.425 15.9563 22.4687V13.4875ZM19.5954 13.4875H22.2579L25.0891 19.1312L27.9204 13.4875H30.5829L26.9829 20.0125H29.3829V21.25H26.2891L26.2704 21.2687V22.825H29.3829V24.0625H26.2704V26.875H23.9079V24.0625H20.8141V22.825H23.9079V21.2687L23.8891 21.25H20.8141V20.0125H23.1954L19.5954 13.4875Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3961">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 JPY.displayName = 'JPY';

package/react/dist/KES.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface KESProps extends Omit<IconBaseProps, 'children'> {}
+export interface KESProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const KES: React.FC<KESProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3950)">
-      <circle cx="20" cy="20" r="20" fill="#2B713A"/>
-      <path d="M13.41 14.665H15.63L10.92 19.255L16.335 25.375H13.965L9.735 20.41L8.43 21.685V25.375H6.675V14.665H8.43V19.72L13.41 14.665ZM21.163 14.455C22.423 14.455 23.413 14.71 24.118 15.235C24.868 15.79 25.303 16.66 25.408 17.83H23.668C23.518 17.17 23.233 16.69 22.843 16.405C22.453 16.105 21.853 15.97 21.073 15.97C20.398 15.97 19.888 16.06 19.528 16.255C19.078 16.48 18.868 16.855 18.868 17.365C18.868 17.815 19.108 18.19 19.618 18.46C19.843 18.58 20.458 18.805 21.448 19.12C22.903 19.57 23.833 19.93 24.253 20.17C25.183 20.725 25.648 21.49 25.648 22.48C25.648 23.44 25.273 24.205 24.523 24.76C23.773 25.3 22.708 25.585 21.343 25.585C20.023 25.585 18.988 25.33 18.253 24.82C17.353 24.19 16.858 23.2 16.783 21.835H18.523C18.643 22.645 18.928 23.23 19.393 23.575C19.813 23.875 20.458 24.04 21.343 24.04C22.123 24.04 22.753 23.905 23.203 23.65C23.653 23.38 23.893 23.035 23.893 22.585C23.893 22.015 23.548 21.565 22.888 21.235C22.678 21.13 21.988 20.89 20.803 20.53C19.483 20.11 18.658 19.81 18.343 19.63C17.518 19.135 17.113 18.415 17.113 17.47C17.113 16.525 17.503 15.775 18.313 15.235C19.063 14.71 20.008 14.455 21.163 14.455ZM27.0035 14.455H28.7135V18.655C28.9985 18.22 29.3585 17.905 29.7785 17.695C30.1535 17.5 30.5885 17.41 31.0835 17.41C32.0285 17.41 32.7335 17.68 33.1985 18.235C33.6335 18.76 33.8585 19.54 33.8585 20.575V25.375H32.1485V20.875C32.1485 20.215 32.0135 19.705 31.7585 19.36C31.4585 18.985 31.0235 18.805 30.4385 18.805C29.8985 18.805 29.4785 19.015 29.1785 19.435C28.8635 19.855 28.7135 20.38 28.7135 21.04V25.375H27.0035V14.455Z" fill="black"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3950">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const KES = React.forwardRef<SVGSVGElement, KESProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3950)">
+        <circle cx="20" cy="20" r="20" fill="#2B713A"/>
+        <path d="M13.41 14.665H15.63L10.92 19.255L16.335 25.375H13.965L9.735 20.41L8.43 21.685V25.375H6.675V14.665H8.43V19.72L13.41 14.665ZM21.163 14.455C22.423 14.455 23.413 14.71 24.118 15.235C24.868 15.79 25.303 16.66 25.408 17.83H23.668C23.518 17.17 23.233 16.69 22.843 16.405C22.453 16.105 21.853 15.97 21.073 15.97C20.398 15.97 19.888 16.06 19.528 16.255C19.078 16.48 18.868 16.855 18.868 17.365C18.868 17.815 19.108 18.19 19.618 18.46C19.843 18.58 20.458 18.805 21.448 19.12C22.903 19.57 23.833 19.93 24.253 20.17C25.183 20.725 25.648 21.49 25.648 22.48C25.648 23.44 25.273 24.205 24.523 24.76C23.773 25.3 22.708 25.585 21.343 25.585C20.023 25.585 18.988 25.33 18.253 24.82C17.353 24.19 16.858 23.2 16.783 21.835H18.523C18.643 22.645 18.928 23.23 19.393 23.575C19.813 23.875 20.458 24.04 21.343 24.04C22.123 24.04 22.753 23.905 23.203 23.65C23.653 23.38 23.893 23.035 23.893 22.585C23.893 22.015 23.548 21.565 22.888 21.235C22.678 21.13 21.988 20.89 20.803 20.53C19.483 20.11 18.658 19.81 18.343 19.63C17.518 19.135 17.113 18.415 17.113 17.47C17.113 16.525 17.503 15.775 18.313 15.235C19.063 14.71 20.008 14.455 21.163 14.455ZM27.0035 14.455H28.7135V18.655C28.9985 18.22 29.3585 17.905 29.7785 17.695C30.1535 17.5 30.5885 17.41 31.0835 17.41C32.0285 17.41 32.7335 17.68 33.1985 18.235C33.6335 18.76 33.8585 19.54 33.8585 20.575V25.375H32.1485V20.875C32.1485 20.215 32.0135 19.705 31.7585 19.36C31.4585 18.985 31.0235 18.805 30.4385 18.805C29.8985 18.805 29.4785 19.015 29.1785 19.435C28.8635 19.855 28.7135 20.38 28.7135 21.04V25.375H27.0035V14.455Z" fill="black"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3950">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 KES.displayName = 'KES';

package/react/dist/KZT.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface KZTProps extends Omit<IconBaseProps, 'children'> {}
+export interface KZTProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const KZT: React.FC<KZTProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3943)">
-      <circle cx="20" cy="20" r="20" fill="#248FD6"/>
-      <path d="M21.4725 29.875H19.11V17.275H13.5713V15.2275H27.0113V17.275H21.4725V29.875ZM13.5713 11.1325H27.0113V13.18H13.5713V11.1325Z" fill="#F4E04F"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3943">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const KZT = React.forwardRef<SVGSVGElement, KZTProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3943)">
+        <circle cx="20" cy="20" r="20" fill="#248FD6"/>
+        <path d="M21.4725 29.875H19.11V17.275H13.5713V15.2275H27.0113V17.275H21.4725V29.875ZM13.5713 11.1325H27.0113V13.18H13.5713V11.1325Z" fill="#F4E04F"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3943">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 KZT.displayName = 'KZT';

package/react/dist/LaunchPrime.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface LaunchPrimeProps extends Omit<IconBaseProps, 'children'> {}
+export interface LaunchPrimeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const LaunchPrime: React.FC<LaunchPrimeProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5.5 15.0003C7.433 15.0003 9 16.5673 9 18.5003C8.99985 20.4331 7.4329 22.0003 5.5 22.0003H2V18.5003C2 16.5673 3.567 15.0003 5.5 15.0003ZM14.707 19.2932L13.293 20.7073L3.29297 10.7073L4.70703 9.29324L14.707 19.2932ZM5.5 17.0003C4.67157 17.0003 4 17.6718 4 18.5003V20.0003H5.5C6.32833 20.0003 6.99985 19.3286 7 18.5003C7 17.6718 6.32843 17.0003 5.5 17.0003ZM9.22656 4.70438C12.1962 1.73479 16.769 1.07997 20.4531 3.09598L20.7178 3.24051L20.8584 3.50711C22.7289 7.0577 22.0692 11.4135 19.2314 14.2513L15.8154 17.6673L14.4014 16.2522L17.8174 12.8362C19.9637 10.6897 20.5155 7.43224 19.2236 4.70926C16.368 3.29366 12.9103 3.84978 10.6406 6.11942L7.4541 9.30594L6.04004 7.89188L9.22656 4.70438ZM12.1299 6.86942C13.4297 5.57 15.5371 5.57 16.8369 6.86942C18.1367 8.16916 18.1374 10.2775 16.8379 11.5774C15.538 12.8773 13.4288 12.8773 12.1289 11.5774C10.8294 10.2775 10.8301 8.16916 12.1299 6.86942ZM15.4229 8.28348C14.9041 7.76511 14.0627 7.76511 13.5439 8.28348C13.0252 8.8022 13.0254 9.64453 13.5439 10.1634C14.0627 10.6816 14.9041 10.6816 15.4229 10.1634C15.9414 9.64453 15.9416 8.8022 15.4229 8.28348Z" fill="currentColor"/>
+export const LaunchPrime = React.forwardRef<SVGSVGElement, LaunchPrimeProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M5.5 15.0003C7.433 15.0003 9 16.5673 9 18.5003C8.99985 20.4331 7.4329 22.0003 5.5 22.0003H2V18.5003C2 16.5673 3.567 15.0003 5.5 15.0003ZM14.707 19.2932L13.293 20.7073L3.29297 10.7073L4.70703 9.29324L14.707 19.2932ZM5.5 17.0003C4.67157 17.0003 4 17.6718 4 18.5003V20.0003H5.5C6.32833 20.0003 6.99985 19.3286 7 18.5003C7 17.6718 6.32843 17.0003 5.5 17.0003ZM9.22656 4.70438C12.1962 1.73479 16.769 1.07997 20.4531 3.09598L20.7178 3.24051L20.8584 3.50711C22.7289 7.0577 22.0692 11.4135 19.2314 14.2513L15.8154 17.6673L14.4014 16.2522L17.8174 12.8362C19.9637 10.6897 20.5155 7.43224 19.2236 4.70926C16.368 3.29366 12.9103 3.84978 10.6406 6.11942L7.4541 9.30594L6.04004 7.89188L9.22656 4.70438ZM12.1299 6.86942C13.4297 5.57 15.5371 5.57 16.8369 6.86942C18.1367 8.16916 18.1374 10.2775 16.8379 11.5774C15.538 12.8773 13.4288 12.8773 12.1289 11.5774C10.8294 10.2775 10.8301 8.16916 12.1299 6.86942ZM15.4229 8.28348C14.9041 7.76511 14.0627 7.76511 13.5439 8.28348C13.0252 8.8022 13.0254 9.64453 13.5439 10.1634C14.0627 10.6816 14.9041 10.6816 15.4229 10.1634C15.9414 9.64453 15.9416 8.8022 15.4229 8.28348Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 LaunchPrime.displayName = 'LaunchPrime';

package/react/dist/LightMode.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface LightModeProps extends Omit<IconBaseProps, 'children'> {}
+export interface LightModeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const LightMode: React.FC<LightModeProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M13 22H11V20H13V22ZM7.0498 18.3643L5.63574 19.7783L4.22168 18.3643L5.63574 16.9502L7.0498 18.3643ZM19.7783 18.3643L18.3643 19.7783L16.9502 18.3643L18.3643 16.9502L19.7783 18.3643ZM12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM4 13H2V11H4V13ZM22 13H20V11H22V13ZM7.05078 5.63574L5.63574 7.0498L4.22168 5.63574L5.63574 4.22168L7.05078 5.63574ZM19.7783 5.63574L18.3643 7.0498L16.9502 5.63574L18.3643 4.22168L19.7783 5.63574ZM13 4H11V2H13V4Z" fill="currentColor"/>
+export const LightMode = React.forwardRef<SVGSVGElement, LightModeProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M13 22H11V20H13V22ZM7.0498 18.3643L5.63574 19.7783L4.22168 18.3643L5.63574 16.9502L7.0498 18.3643ZM19.7783 18.3643L18.3643 19.7783L16.9502 18.3643L18.3643 16.9502L19.7783 18.3643ZM12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM4 13H2V11H4V13ZM22 13H20V11H22V13ZM7.05078 5.63574L5.63574 7.0498L4.22168 5.63574L5.63574 4.22168L7.05078 5.63574ZM19.7783 5.63574L18.3643 7.0498L16.9502 5.63574L18.3643 4.22168L19.7783 5.63574ZM13 4H11V2H13V4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 LightMode.displayName = 'LightMode';

package/react/dist/Linkedin.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface LinkedinProps extends Omit<IconBaseProps, 'children'> {}
+export interface LinkedinProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Linkedin: React.FC<LinkedinProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M19.2002 3C20.1942 3.00011 20.9999 3.80585 21 4.7998V19.2002C20.9999 20.1942 20.1942 20.9999 19.2002 21H4.7998C3.80585 20.9999 3.00011 20.1942 3 19.2002V4.7998C3.00011 3.80585 3.80585 3.00011 4.7998 3H19.2002ZM6.3457 9.65039V17.5967H8.81641V9.65039H6.3457ZM15.1035 9.45215C13.9008 9.45216 13.0956 10.1121 12.7666 10.7363H12.7334V9.65039H10.3643V17.5967H12.8311V13.665C12.8311 12.6286 13.0285 11.6251 14.3125 11.625C15.5799 11.625 15.5967 12.8095 15.5967 13.7314V17.5967H18.0654V13.2383C18.0654 11.0988 17.6052 9.45215 15.1035 9.45215ZM7.58203 5.7002C6.79118 5.7002 6.15043 6.34099 6.15039 7.13184C6.15039 7.92271 6.79116 8.56348 7.58203 8.56348C8.37077 8.56341 9.01159 7.92267 9.01367 7.13184C9.01364 6.34103 8.37074 5.70027 7.58203 5.7002Z" fill="#0F0F0F"/>
+export const Linkedin = React.forwardRef<SVGSVGElement, LinkedinProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M19.2002 3C20.1942 3.00011 20.9999 3.80585 21 4.7998V19.2002C20.9999 20.1942 20.1942 20.9999 19.2002 21H4.7998C3.80585 20.9999 3.00011 20.1942 3 19.2002V4.7998C3.00011 3.80585 3.80585 3.00011 4.7998 3H19.2002ZM6.3457 9.65039V17.5967H8.81641V9.65039H6.3457ZM15.1035 9.45215C13.9008 9.45216 13.0956 10.1121 12.7666 10.7363H12.7334V9.65039H10.3643V17.5967H12.8311V13.665C12.8311 12.6286 13.0285 11.6251 14.3125 11.625C15.5799 11.625 15.5967 12.8095 15.5967 13.7314V17.5967H18.0654V13.2383C18.0654 11.0988 17.6052 9.45215 15.1035 9.45215ZM7.58203 5.7002C6.79118 5.7002 6.15043 6.34099 6.15039 7.13184C6.15039 7.92271 6.79116 8.56348 7.58203 8.56348C8.37077 8.56341 9.01159 7.92267 9.01367 7.13184C9.01364 6.34103 8.37074 5.70027 7.58203 5.7002Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Linkedin.displayName = 'Linkedin';

package/react/dist/Loading.tsx

@@ -1,23 +1,36 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface LoadingProps extends Omit<IconBaseProps, 'children'> {}
+export interface LoadingProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Loading: React.FC<LoadingProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="21" height="22" viewBox="0 0 21 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="10.5" cy="10.6" r="9.5" stroke="currentColor" stroke-width="2"/>
-      <path d="M1.47424 7.63592C2.10004 5.73032 3.31291 4.07168 4.93909 2.89762C6.56528 1.72355 8.52134 1.0943 10.5271 1.10001C12.5328 1.10573 14.4852 1.74611 16.1047 2.92941C17.7242 4.11272 18.9276 5.77824 19.5425 7.68737" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
-      <defs>
-      <radialGradient id="paint0_radial_99181_600" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.2692 7.6769) rotate(177.614) scale(17.5537)">
-      <stop stop-color="#0F0F0F"/>
-      <stop offset="1" stop-color="#F4F4F4"/>
-      </radialGradient>
-      </defs>
+export const Loading = React.forwardRef<SVGSVGElement, LoadingProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 21 22"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <circle cx="10.5" cy="10.6" r="9.5" stroke="currentColor" strokeWidth="2"/>
+        <path d="M1.47424 7.63592C2.10004 5.73032 3.31291 4.07168 4.93909 2.89762C6.56528 1.72355 8.52134 1.0943 10.5271 1.10001C12.5328 1.10573 14.4852 1.74611 16.1047 2.92941C17.7242 4.11272 18.9276 5.77824 19.5425 7.68737" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
+        <defs>
+        <radialGradient id="paint0_radial_99181_600" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.2692 7.6769) rotate(177.614) scale(17.5537)">
+        <stop stopColor="#0F0F0F"/>
+        <stop offset="1" stopColor="#F4F4F4"/>
+        </radialGradient>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Loading.displayName = 'Loading';

package/react/dist/Lock.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface LockProps extends Omit<IconBaseProps, 'children'> {}
+export interface LockProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Lock: React.FC<LockProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 3.02539C14.9591 3.02539 17.4138 5.17637 17.8896 8H21V21H3V8H6.11035C6.58621 5.17637 9.04095 3.02539 12 3.02539ZM4.9502 19.0498H19.0498V9.9502H4.9502V19.0498ZM13 17H11V14H13V17ZM12 4.97461C10.1223 4.97461 8.54537 6.26081 8.10059 8H15.8994C15.4546 6.26081 13.8777 4.97461 12 4.97461Z" fill="currentColor"/>
+export const Lock = React.forwardRef<SVGSVGElement, LockProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M12 3.02539C14.9591 3.02539 17.4138 5.17637 17.8896 8H21V21H3V8H6.11035C6.58621 5.17637 9.04095 3.02539 12 3.02539ZM4.9502 19.0498H19.0498V9.9502H4.9502V19.0498ZM13 17H11V14H13V17ZM12 4.97461C10.1223 4.97461 8.54537 6.26081 8.10059 8H15.8994C15.4546 6.26081 13.8777 4.97461 12 4.97461Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Lock.displayName = 'Lock';

package/react/dist/MAD.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MADProps extends Omit<IconBaseProps, 'children'> {}
+export interface MADProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MAD: React.FC<MADProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3951)">
-      <circle cx="20" cy="20" r="20" fill="#C2262D"/>
-      <path d="M8.1 14.005H12.65C14.6625 14.005 16.185 14.565 17.235 15.7025C18.215 16.7525 18.705 18.275 18.705 20.2525C18.705 22.2125 18.1975 23.735 17.2 24.82C16.15 25.94 14.6275 26.5 12.615 26.5H8.1V14.005ZM10.0075 15.6325V24.8725H12.265C13.84 24.8725 15.0125 24.4875 15.7475 23.735C16.465 22.9825 16.8325 21.8275 16.8325 20.2525C16.8325 18.6425 16.465 17.4875 15.765 16.7525C15.03 16 13.875 15.6325 12.3 15.6325H10.0075ZM20.6439 14.005H22.5514V19.2725H29.0964V14.005H31.0039V26.5H29.0964V20.9H22.5514V26.5H20.6439V14.005Z" fill="#006233"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3951">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const MAD = React.forwardRef<SVGSVGElement, MADProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3951)">
+        <circle cx="20" cy="20" r="20" fill="#C2262D"/>
+        <path d="M8.1 14.005H12.65C14.6625 14.005 16.185 14.565 17.235 15.7025C18.215 16.7525 18.705 18.275 18.705 20.2525C18.705 22.2125 18.1975 23.735 17.2 24.82C16.15 25.94 14.6275 26.5 12.615 26.5H8.1V14.005ZM10.0075 15.6325V24.8725H12.265C13.84 24.8725 15.0125 24.4875 15.7475 23.735C16.465 22.9825 16.8325 21.8275 16.8325 20.2525C16.8325 18.6425 16.465 17.4875 15.765 16.7525C15.03 16 13.875 15.6325 12.3 15.6325H10.0075ZM20.6439 14.005H22.5514V19.2725H29.0964V14.005H31.0039V26.5H29.0964V20.9H22.5514V26.5H20.6439V14.005Z" fill="#006233"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3951">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MAD.displayName = 'MAD';

package/react/dist/MRU.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MRUProps extends Omit<IconBaseProps, 'children'> {}
+export interface MRUProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MRU: React.FC<MRUProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_72_3960)">
-      <circle cx="20" cy="20" r="20" fill="#459948"/>
-      <path d="M5.6875 13.4875H7.88125V21.8312C7.88125 22.9937 8.14375 23.8375 8.6875 24.4C9.2125 24.9437 10.075 25.225 11.2563 25.225C12.4188 25.225 13.2813 24.9437 13.825 24.4C14.35 23.8375 14.6313 22.9937 14.6313 21.8312V13.4875H16.825V21.7937C16.825 23.5375 16.3375 24.8687 15.3625 25.7875C14.3875 26.6875 13.0188 27.1375 11.2563 27.1375C9.475 27.1375 8.10625 26.6875 7.16875 25.8062C6.175 24.8687 5.6875 23.5375 5.6875 21.7937V13.4875ZM19.457 13.4875H22.0258L26.582 23.9875H26.657L31.1945 13.4875H33.7633V26.875H31.5695V17.65H31.4945L27.557 26.875H25.6633L21.7258 17.65H21.6508V26.875H19.457V13.4875Z" fill="#F5CD37"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3960">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const MRU = React.forwardRef<SVGSVGElement, MRUProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <g clipPath="url(#clip0_72_3960)">
+        <circle cx="20" cy="20" r="20" fill="#459948"/>
+        <path d="M5.6875 13.4875H7.88125V21.8312C7.88125 22.9937 8.14375 23.8375 8.6875 24.4C9.2125 24.9437 10.075 25.225 11.2563 25.225C12.4188 25.225 13.2813 24.9437 13.825 24.4C14.35 23.8375 14.6313 22.9937 14.6313 21.8312V13.4875H16.825V21.7937C16.825 23.5375 16.3375 24.8687 15.3625 25.7875C14.3875 26.6875 13.0188 27.1375 11.2563 27.1375C9.475 27.1375 8.10625 26.6875 7.16875 25.8062C6.175 24.8687 5.6875 23.5375 5.6875 21.7937V13.4875ZM19.457 13.4875H22.0258L26.582 23.9875H26.657L31.1945 13.4875H33.7633V26.875H31.5695V17.65H31.4945L27.557 26.875H25.6633L21.7258 17.65H21.6508V26.875H19.457V13.4875Z" fill="#F5CD37"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3960">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MRU.displayName = 'MRU';