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

package/react/dist/MXN.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MXNProps extends Omit<IconBaseProps, 'children'> {}
+export interface MXNProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MXN: React.FC<MXNProps> = (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_3956)">
-      <circle cx="20" cy="20" r="20" fill="#2B713A"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6055 12.3146C18.4339 12.397 17.4846 12.706 16.717 13.2624C15.6868 13.9835 15.1818 15.0137 15.1818 16.3736C15.1818 17.8984 15.8686 19.0522 17.2826 19.8352L19.6055 20.7005V25.522C18.9793 25.4396 18.4945 25.2335 18.1511 24.9038C17.6865 24.4505 17.424 23.6676 17.3432 22.5962H15C15.1212 24.2857 15.606 25.5426 16.4544 26.3668C17.1816 27.0673 18.2319 27.4588 19.6055 27.5618V29.375H20.9387V27.5618C22.1709 27.4794 23.1808 27.1703 23.9888 26.6346C25.0796 25.8929 25.625 24.8008 25.625 23.3379C25.625 21.8338 24.918 20.6799 23.5242 19.8764C23.403 19.794 22.5345 19.4643 20.9387 18.8668V14.3338C21.4437 14.3956 21.8477 14.5398 22.1507 14.7665C22.6355 15.1168 22.9385 15.7143 23.0596 16.5797H25.3624C25.1604 15.0755 24.6554 13.9835 23.8272 13.3242C23.1202 12.7473 22.1507 12.397 20.9387 12.3146V10.625H19.6055V12.3146ZM20.9387 21.1951C21.0195 21.2157 21.0801 21.2363 21.1609 21.2775C22.5547 21.772 23.2616 22.4931 23.2616 23.4203C23.2616 24.1003 22.9788 24.636 22.4133 25.0069C22.0093 25.2747 21.5043 25.4396 20.9387 25.522V21.1951ZM17.5452 16.3736C17.5452 17.1566 18.232 17.8159 19.6055 18.3517V14.3132C19.0803 14.375 18.6561 14.5192 18.3532 14.7253C17.8078 15.055 17.5452 15.6113 17.5452 16.3736Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3956">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const MXN = React.forwardRef<SVGSVGElement, MXNProps>(
+  ({ 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_3956)">
+        <circle cx="20" cy="20" r="20" fill="#2B713A"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M19.6055 12.3146C18.4339 12.397 17.4846 12.706 16.717 13.2624C15.6868 13.9835 15.1818 15.0137 15.1818 16.3736C15.1818 17.8984 15.8686 19.0522 17.2826 19.8352L19.6055 20.7005V25.522C18.9793 25.4396 18.4945 25.2335 18.1511 24.9038C17.6865 24.4505 17.424 23.6676 17.3432 22.5962H15C15.1212 24.2857 15.606 25.5426 16.4544 26.3668C17.1816 27.0673 18.2319 27.4588 19.6055 27.5618V29.375H20.9387V27.5618C22.1709 27.4794 23.1808 27.1703 23.9888 26.6346C25.0796 25.8929 25.625 24.8008 25.625 23.3379C25.625 21.8338 24.918 20.6799 23.5242 19.8764C23.403 19.794 22.5345 19.4643 20.9387 18.8668V14.3338C21.4437 14.3956 21.8477 14.5398 22.1507 14.7665C22.6355 15.1168 22.9385 15.7143 23.0596 16.5797H25.3624C25.1604 15.0755 24.6554 13.9835 23.8272 13.3242C23.1202 12.7473 22.1507 12.397 20.9387 12.3146V10.625H19.6055V12.3146ZM20.9387 21.1951C21.0195 21.2157 21.0801 21.2363 21.1609 21.2775C22.5547 21.772 23.2616 22.4931 23.2616 23.4203C23.2616 24.1003 22.9788 24.636 22.4133 25.0069C22.0093 25.2747 21.5043 25.4396 20.9387 25.522V21.1951ZM17.5452 16.3736C17.5452 17.1566 18.232 17.8159 19.6055 18.3517V14.3132C19.0803 14.375 18.6561 14.5192 18.3532 14.7253C17.8078 15.055 17.5452 15.6113 17.5452 16.3736Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3956">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MXN.displayName = 'MXN';

package/react/dist/MYR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MYRProps extends Omit<IconBaseProps, 'children'> {}
+export interface MYRProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MYR: React.FC<MYRProps> = (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_3958)">
-      <circle cx="20" cy="20" r="20" fill="#030166"/>
-      <path d="M8.1 14.005H10.4975L14.75 23.805H14.82L19.055 14.005H21.4525V26.5H19.405V17.89H19.335L15.66 26.5H13.8925L10.2175 17.89H10.1475V26.5H8.1V14.005ZM27.3206 13.7775V12.3425H28.4756V13.7775C29.5256 13.8475 30.3656 14.145 30.9781 14.635C31.6956 15.195 32.1331 16.1225 32.3081 17.4H30.3131C30.2081 16.665 29.9456 16.1575 29.5256 15.86C29.2631 15.6675 28.9131 15.545 28.4756 15.4925V19.3425C29.8581 19.85 30.6106 20.13 30.7156 20.2C31.9231 20.8825 32.5356 21.8625 32.5356 23.14C32.5356 24.3825 32.0631 25.31 31.1181 25.94C30.4181 26.395 29.5431 26.6575 28.4756 26.7275V28.2675H27.3206V26.7275C26.1306 26.64 25.2206 26.3075 24.5906 25.7125C23.8556 25.0125 23.4356 23.945 23.3306 22.51H25.3606C25.4306 23.42 25.6581 24.085 26.0606 24.47C26.3581 24.75 26.7781 24.925 27.3206 24.995V20.9L25.3081 20.165C24.0831 19.5 23.4881 18.52 23.4881 17.225C23.4881 16.07 23.9256 15.195 24.8181 14.5825C25.4831 14.11 26.3056 13.8475 27.3206 13.7775ZM28.4756 21.32V24.995C28.9656 24.925 29.4031 24.785 29.7531 24.5575C30.2431 24.2425 30.4881 23.7875 30.4881 23.21C30.4881 22.4225 29.8756 21.81 28.6681 21.39C28.5981 21.355 28.5456 21.3375 28.4756 21.32ZM27.3206 18.905V15.475C26.8656 15.5275 26.4981 15.65 26.2356 15.825C25.7631 16.105 25.5356 16.5775 25.5356 17.225C25.5356 17.89 26.1306 18.45 27.3206 18.905Z" fill="#FFCC01"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3958">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const MYR = React.forwardRef<SVGSVGElement, MYRProps>(
+  ({ 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_3958)">
+        <circle cx="20" cy="20" r="20" fill="#030166"/>
+        <path d="M8.1 14.005H10.4975L14.75 23.805H14.82L19.055 14.005H21.4525V26.5H19.405V17.89H19.335L15.66 26.5H13.8925L10.2175 17.89H10.1475V26.5H8.1V14.005ZM27.3206 13.7775V12.3425H28.4756V13.7775C29.5256 13.8475 30.3656 14.145 30.9781 14.635C31.6956 15.195 32.1331 16.1225 32.3081 17.4H30.3131C30.2081 16.665 29.9456 16.1575 29.5256 15.86C29.2631 15.6675 28.9131 15.545 28.4756 15.4925V19.3425C29.8581 19.85 30.6106 20.13 30.7156 20.2C31.9231 20.8825 32.5356 21.8625 32.5356 23.14C32.5356 24.3825 32.0631 25.31 31.1181 25.94C30.4181 26.395 29.5431 26.6575 28.4756 26.7275V28.2675H27.3206V26.7275C26.1306 26.64 25.2206 26.3075 24.5906 25.7125C23.8556 25.0125 23.4356 23.945 23.3306 22.51H25.3606C25.4306 23.42 25.6581 24.085 26.0606 24.47C26.3581 24.75 26.7781 24.925 27.3206 24.995V20.9L25.3081 20.165C24.0831 19.5 23.4881 18.52 23.4881 17.225C23.4881 16.07 23.9256 15.195 24.8181 14.5825C25.4831 14.11 26.3056 13.8475 27.3206 13.7775ZM28.4756 21.32V24.995C28.9656 24.925 29.4031 24.785 29.7531 24.5575C30.2431 24.2425 30.4881 23.7875 30.4881 23.21C30.4881 22.4225 29.8756 21.81 28.6681 21.39C28.5981 21.355 28.5456 21.3375 28.4756 21.32ZM27.3206 18.905V15.475C26.8656 15.5275 26.4981 15.65 26.2356 15.825C25.7631 16.105 25.5356 16.5775 25.5356 17.225C25.5356 17.89 26.1306 18.45 27.3206 18.905Z" fill="#FFCC01"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3958">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MYR.displayName = 'MYR';

package/react/dist/ManualBackup.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ManualBackupProps extends Omit<IconBaseProps, 'children'> {}
+export interface ManualBackupProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ManualBackup: React.FC<ManualBackupProps> = (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="M16.3867 4.29395L19.708 7.62695L20.3818 8.30273L19.7383 9.00684L15.082 14.1113L15.0674 14.1279L15.0518 14.1436L12.249 16.9561L11.1455 18.0625H19V20.0625H8.7373L8.0293 18.3564L10.832 15.5439L13.624 12.7412L14.4502 11.835C14.3947 11.7983 14.3418 11.7559 14.293 11.707L12.3477 9.76172L6 16.1416V20H4V15.3164L4.29102 15.0234L14.9688 4.29492L15.6777 3.58301L16.3867 4.29395ZM13.7578 8.34375L15.707 10.293C15.7335 10.3194 15.7574 10.3475 15.7803 10.376L17.6182 8.36328L15.6777 6.41602L13.7578 8.34375Z" fill="currentColor"/>
+export const ManualBackup = React.forwardRef<SVGSVGElement, ManualBackupProps>(
+  ({ 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="M16.3867 4.29395L19.708 7.62695L20.3818 8.30273L19.7383 9.00684L15.082 14.1113L15.0674 14.1279L15.0518 14.1436L12.249 16.9561L11.1455 18.0625H19V20.0625H8.7373L8.0293 18.3564L10.832 15.5439L13.624 12.7412L14.4502 11.835C14.3947 11.7983 14.3418 11.7559 14.293 11.707L12.3477 9.76172L6 16.1416V20H4V15.3164L4.29102 15.0234L14.9688 4.29492L15.6777 3.58301L16.3867 4.29395ZM13.7578 8.34375L15.707 10.293C15.7335 10.3194 15.7574 10.3475 15.7803 10.376L17.6182 8.36328L15.6777 6.41602L13.7578 8.34375Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ManualBackup.displayName = 'ManualBackup';

package/react/dist/Margin.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MarginProps extends Omit<IconBaseProps, 'children'> {}
+export interface MarginProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Margin: React.FC<MarginProps> = (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="M18 14C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22C15.7909 22 14 20.2091 14 18C14 15.7909 15.7909 14 18 14ZM22 9H20V5.41406L3.70703 21.707L2.29297 20.293L18.5859 4H15V2H22V9ZM18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16ZM6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6C2 3.79086 3.79086 2 6 2ZM6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4Z" fill="currentColor"/>
+export const Margin = React.forwardRef<SVGSVGElement, MarginProps>(
+  ({ 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="M18 14C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22C15.7909 22 14 20.2091 14 18C14 15.7909 15.7909 14 18 14ZM22 9H20V5.41406L3.70703 21.707L2.29297 20.293L18.5859 4H15V2H22V9ZM18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16ZM6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6C2 3.79086 3.79086 2 6 2ZM6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Margin.displayName = 'Margin';

package/react/dist/Markets.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MarketsProps extends Omit<IconBaseProps, 'children'> {}
+export interface MarketsProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Markets: React.FC<MarketsProps> = (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 22H3V15H5V22ZM10 22H8V12H10V22ZM16 22H14V14H16V22ZM21 22H19V7H21V22ZM13.6855 10.2773L8.51562 7.1748L3.53711 10.3438L2.46289 8.65625L8.48438 4.82422L13.3135 7.72168L16.7266 4H13V2H21.2734L13.6855 10.2773Z" fill="currentColor"/>
+export const Markets = React.forwardRef<SVGSVGElement, MarketsProps>(
+  ({ 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 22H3V15H5V22ZM10 22H8V12H10V22ZM16 22H14V14H16V22ZM21 22H19V7H21V22ZM13.6855 10.2773L8.51562 7.1748L3.53711 10.3438L2.46289 8.65625L8.48438 4.82422L13.3135 7.72168L16.7266 4H13V2H21.2734L13.6855 10.2773Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Markets.displayName = 'Markets';

package/react/dist/Medium.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MediumProps extends Omit<IconBaseProps, 'children'> {}
+export interface MediumProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Medium: React.FC<MediumProps> = (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="M13.2833 11.9833C13.2878 13.4848 12.6961 14.9266 11.6384 15.9922C10.5806 17.0578 9.14313 17.66 7.64169 17.6666C6.14024 17.66 4.70279 17.0578 3.64501 15.9922C2.58723 14.9266 1.99559 13.4848 2.00002 11.9833C1.99559 10.4819 2.58723 9.04002 3.64501 7.97443C4.70279 6.90884 6.14024 6.30661 7.64169 6.29999C9.14313 6.30661 10.5806 6.90884 11.6384 7.97443C12.6961 9.04002 13.2878 10.4819 13.2833 11.9833ZM19.4667 11.9833C19.4667 14.9333 18.2083 17.3333 16.65 17.3333C15.0917 17.3333 13.825 14.9333 13.825 11.9833C13.825 9.03332 15.0917 6.63332 16.65 6.63332C18.2083 6.63332 19.4667 9.03332 19.4667 11.9833ZM22 11.9833C22 14.625 21.5583 16.775 21.0083 16.775C20.4583 16.775 20.0167 14.625 20.0167 11.9833C20.0167 9.34165 20.4583 7.19165 21.0083 7.19165C21.5583 7.19165 22 9.34165 22 11.9833Z" fill="#0F0F0F"/>
+export const Medium = React.forwardRef<SVGSVGElement, MediumProps>(
+  ({ 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="M13.2833 11.9833C13.2878 13.4848 12.6961 14.9266 11.6384 15.9922C10.5806 17.0578 9.14313 17.66 7.64169 17.6666C6.14024 17.66 4.70279 17.0578 3.64501 15.9922C2.58723 14.9266 1.99559 13.4848 2.00002 11.9833C1.99559 10.4819 2.58723 9.04002 3.64501 7.97443C4.70279 6.90884 6.14024 6.30661 7.64169 6.29999C9.14313 6.30661 10.5806 6.90884 11.6384 7.97443C12.6961 9.04002 13.2878 10.4819 13.2833 11.9833ZM19.4667 11.9833C19.4667 14.9333 18.2083 17.3333 16.65 17.3333C15.0917 17.3333 13.825 14.9333 13.825 11.9833C13.825 9.03332 15.0917 6.63332 16.65 6.63332C18.2083 6.63332 19.4667 9.03332 19.4667 11.9833ZM22 11.9833C22 14.625 21.5583 16.775 21.0083 16.775C20.4583 16.775 20.0167 14.625 20.0167 11.9833C20.0167 9.34165 20.4583 7.19165 21.0083 7.19165C21.5583 7.19165 22 9.34165 22 11.9833Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Medium.displayName = 'Medium';

package/react/dist/Message.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MessageProps extends Omit<IconBaseProps, 'children'> {}
+export interface MessageProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Message: React.FC<MessageProps> = (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="M22 20H2V4H22V20ZM4 18H20V6H4V18ZM16.5996 10.7998L12.5996 13.7998L12 14.25L11.4004 13.7998L7.40039 10.7998L8.59961 9.2002L12 11.75L15.4004 9.2002L16.5996 10.7998Z" fill="currentColor"/>
+export const Message = React.forwardRef<SVGSVGElement, MessageProps>(
+  ({ 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="M22 20H2V4H22V20ZM4 18H20V6H4V18ZM16.5996 10.7998L12.5996 13.7998L12 14.25L11.4004 13.7998L7.40039 10.7998L8.59961 9.2002L12 11.75L15.4004 9.2002L16.5996 10.7998Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Message.displayName = 'Message';

package/react/dist/Metamask.tsx

@@ -1,44 +1,57 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MetamaskProps extends Omit<IconBaseProps, 'children'> {}
+export interface MetamaskProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Metamask: React.FC<MetamaskProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5.43579 15.6432L7.92518 16.3056V15.4394L8.12849 15.2356H9.55093V16.9679H8.02672L6.14701 16.1527L5.43627 15.6432H5.43579Z" fill="#CDBDB2"/>
-      <path d="M13.5643 15.6432L11.1257 16.3056V15.4394L10.9224 15.2356H9.5V16.9679H11.0242L12.9037 16.1527L13.5643 15.6432Z" fill="#CDBDB2"/>
-      <path d="M8.12811 13.7576L7.9248 15.4392L8.17876 15.2354H10.8206L11.1254 15.4392L10.9221 13.7576L10.5157 13.5029L8.4836 13.5538L8.12811 13.7576Z" fill="#393939"/>
-      <path d="M6.75684 2.39496L7.97621 5.2484L8.53501 13.5538H10.5162L11.1259 5.2484L12.2435 2.39496H6.75684Z" fill="#F89C35"/>
-      <path d="M1.42244 8.66234L0 12.7896L3.5561 12.5858H5.84218V10.8024L5.74041 7.13361L5.2325 7.54141L1.42244 8.66234Z" fill="#F89D35"/>
-      <path d="M4.11499 9.12079L8.28078 9.2228L7.82351 11.3629L5.84227 10.8533L4.11499 9.12079Z" fill="#D87C30"/>
-      <path d="M4.11499 9.17181L5.84227 10.8023V12.4328L4.11499 9.17181Z" fill="#EA8D3A"/>
-      <path d="M5.84229 10.8533L7.87417 11.3629L8.53474 13.5539L8.07748 13.8088L5.84229 12.4838V10.8533Z" fill="#F89D35"/>
-      <path d="M5.84241 12.4838L5.43579 15.6431L8.12849 13.7576L5.84241 12.4838Z" fill="#EB8F35"/>
-      <path d="M8.28061 9.22284L8.53457 13.5539L7.77246 11.3375L8.28061 9.22284Z" fill="#EA8E3A"/>
-      <path d="M3.50513 12.535L5.8421 12.4838L5.43548 15.6431L3.50513 12.535Z" fill="#D87C30"/>
-      <path d="M1.1176 17.0189L5.43581 15.6431L3.50522 12.535L0 12.7896L1.1176 17.0189Z" fill="#EB8F35"/>
-      <path d="M7.97593 5.24854L5.79139 7.08282L4.11499 9.12089L8.28078 9.27379L7.97593 5.24854Z" fill="#E8821E"/>
-      <path d="M5.43579 15.6429L8.12849 13.7575L7.92518 15.3882V16.3054L6.09636 15.9487L5.43603 15.6429H5.43579ZM13.5643 15.6429L10.9225 13.7575L11.1258 15.3882V16.3054L12.9544 15.9487L13.5645 15.6429H13.5643Z" fill="#DFCEC3"/>
-      <path d="M7.16244 10.14L7.72124 11.3121L5.74023 10.8025L7.16244 10.14Z" fill="#393939"/>
-      <path d="M1.06689 0L7.97603 5.24843L6.80754 2.39499L1.06689 0Z" fill="#E88F35"/>
-      <path d="M1.06638 0L0.151855 2.80256L0.660006 5.85978L0.304277 6.06356L0.812427 6.52225L0.405812 6.87893L0.964611 7.38851L0.609119 7.69407L1.42211 8.71322L5.23217 7.54141C5.23217 7.54141 8.02616 5.29932 7.97552 5.24843C7.92463 5.19707 1.06638 0 1.06638 0Z" fill="#8E5A30"/>
-      <path d="M17.5775 8.66234L19.0001 12.7896L15.4438 12.5858H13.1577V10.8024L13.2595 7.13361L13.7674 7.54141L17.5775 8.66234Z" fill="#F89D35"/>
-      <path d="M14.8848 9.12079L10.719 9.2228L11.1763 11.3629L13.1575 10.8533L14.8848 9.12079Z" fill="#D87C30"/>
-      <path d="M14.885 9.17181L13.1577 10.8023V12.4328L14.885 9.17181Z" fill="#EA8D3A"/>
-      <path d="M13.1575 10.8533L11.1257 11.3629L10.4651 13.5539L10.9224 13.8088L13.1575 12.4838V10.8533Z" fill="#F89D35"/>
-      <path d="M13.1578 12.4838L13.5644 15.6431L10.9226 13.8088L13.1578 12.4838Z" fill="#EB8F35"/>
-      <path d="M10.719 9.22284L10.4651 13.5539L11.2272 11.3375L10.719 9.22284Z" fill="#EA8E3A"/>
-      <path d="M15.4947 12.535L13.1577 12.4838L13.5643 15.6431L15.4947 12.535Z" fill="#D87C30"/>
-      <path d="M17.8822 17.0189L13.564 15.6431L15.4946 12.535L19 12.7896L17.8824 17.0189H17.8822Z" fill="#EB8F35"/>
-      <path d="M11.0238 5.24854L13.2084 7.08282L14.8848 9.12089L10.719 9.27379L11.0238 5.24854Z" fill="#E8821E"/>
-      <path d="M11.8369 10.14L11.2781 11.3121L13.2596 10.8025L11.8369 10.14Z" fill="#393939"/>
-      <path d="M17.9331 0L11.0239 5.24843L12.1924 2.39499L17.9331 0Z" fill="#E88F35"/>
-      <path d="M17.9332 0L18.8478 2.80256L18.3396 5.85978L18.6953 6.06356L18.1872 6.52225L18.5938 6.87893L18.035 7.38851L18.3905 7.69407L17.5778 8.71322L13.7672 7.54165C13.7672 7.54165 10.9732 5.29955 11.0239 5.24867C11.075 5.19707 17.9332 0 17.9332 0Z" fill="#8E5A30"/>
+export const Metamask = React.forwardRef<SVGSVGElement, MetamaskProps>(
+  ({ 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 19 18"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M5.43579 15.6432L7.92518 16.3056V15.4394L8.12849 15.2356H9.55093V16.9679H8.02672L6.14701 16.1527L5.43627 15.6432H5.43579Z" fill="#CDBDB2"/>
+        <path d="M13.5643 15.6432L11.1257 16.3056V15.4394L10.9224 15.2356H9.5V16.9679H11.0242L12.9037 16.1527L13.5643 15.6432Z" fill="#CDBDB2"/>
+        <path d="M8.12811 13.7576L7.9248 15.4392L8.17876 15.2354H10.8206L11.1254 15.4392L10.9221 13.7576L10.5157 13.5029L8.4836 13.5538L8.12811 13.7576Z" fill="#393939"/>
+        <path d="M6.75684 2.39496L7.97621 5.2484L8.53501 13.5538H10.5162L11.1259 5.2484L12.2435 2.39496H6.75684Z" fill="#F89C35"/>
+        <path d="M1.42244 8.66234L0 12.7896L3.5561 12.5858H5.84218V10.8024L5.74041 7.13361L5.2325 7.54141L1.42244 8.66234Z" fill="#F89D35"/>
+        <path d="M4.11499 9.12079L8.28078 9.2228L7.82351 11.3629L5.84227 10.8533L4.11499 9.12079Z" fill="#D87C30"/>
+        <path d="M4.11499 9.17181L5.84227 10.8023V12.4328L4.11499 9.17181Z" fill="#EA8D3A"/>
+        <path d="M5.84229 10.8533L7.87417 11.3629L8.53474 13.5539L8.07748 13.8088L5.84229 12.4838V10.8533Z" fill="#F89D35"/>
+        <path d="M5.84241 12.4838L5.43579 15.6431L8.12849 13.7576L5.84241 12.4838Z" fill="#EB8F35"/>
+        <path d="M8.28061 9.22284L8.53457 13.5539L7.77246 11.3375L8.28061 9.22284Z" fill="#EA8E3A"/>
+        <path d="M3.50513 12.535L5.8421 12.4838L5.43548 15.6431L3.50513 12.535Z" fill="#D87C30"/>
+        <path d="M1.1176 17.0189L5.43581 15.6431L3.50522 12.535L0 12.7896L1.1176 17.0189Z" fill="#EB8F35"/>
+        <path d="M7.97593 5.24854L5.79139 7.08282L4.11499 9.12089L8.28078 9.27379L7.97593 5.24854Z" fill="#E8821E"/>
+        <path d="M5.43579 15.6429L8.12849 13.7575L7.92518 15.3882V16.3054L6.09636 15.9487L5.43603 15.6429H5.43579ZM13.5643 15.6429L10.9225 13.7575L11.1258 15.3882V16.3054L12.9544 15.9487L13.5645 15.6429H13.5643Z" fill="#DFCEC3"/>
+        <path d="M7.16244 10.14L7.72124 11.3121L5.74023 10.8025L7.16244 10.14Z" fill="#393939"/>
+        <path d="M1.06689 0L7.97603 5.24843L6.80754 2.39499L1.06689 0Z" fill="#E88F35"/>
+        <path d="M1.06638 0L0.151855 2.80256L0.660006 5.85978L0.304277 6.06356L0.812427 6.52225L0.405812 6.87893L0.964611 7.38851L0.609119 7.69407L1.42211 8.71322L5.23217 7.54141C5.23217 7.54141 8.02616 5.29932 7.97552 5.24843C7.92463 5.19707 1.06638 0 1.06638 0Z" fill="#8E5A30"/>
+        <path d="M17.5775 8.66234L19.0001 12.7896L15.4438 12.5858H13.1577V10.8024L13.2595 7.13361L13.7674 7.54141L17.5775 8.66234Z" fill="#F89D35"/>
+        <path d="M14.8848 9.12079L10.719 9.2228L11.1763 11.3629L13.1575 10.8533L14.8848 9.12079Z" fill="#D87C30"/>
+        <path d="M14.885 9.17181L13.1577 10.8023V12.4328L14.885 9.17181Z" fill="#EA8D3A"/>
+        <path d="M13.1575 10.8533L11.1257 11.3629L10.4651 13.5539L10.9224 13.8088L13.1575 12.4838V10.8533Z" fill="#F89D35"/>
+        <path d="M13.1578 12.4838L13.5644 15.6431L10.9226 13.8088L13.1578 12.4838Z" fill="#EB8F35"/>
+        <path d="M10.719 9.22284L10.4651 13.5539L11.2272 11.3375L10.719 9.22284Z" fill="#EA8E3A"/>
+        <path d="M15.4947 12.535L13.1577 12.4838L13.5643 15.6431L15.4947 12.535Z" fill="#D87C30"/>
+        <path d="M17.8822 17.0189L13.564 15.6431L15.4946 12.535L19 12.7896L17.8824 17.0189H17.8822Z" fill="#EB8F35"/>
+        <path d="M11.0238 5.24854L13.2084 7.08282L14.8848 9.12089L10.719 9.27379L11.0238 5.24854Z" fill="#E8821E"/>
+        <path d="M11.8369 10.14L11.2781 11.3121L13.2596 10.8025L11.8369 10.14Z" fill="#393939"/>
+        <path d="M17.9331 0L11.0239 5.24843L12.1924 2.39499L17.9331 0Z" fill="#E88F35"/>
+        <path d="M17.9332 0L18.8478 2.80256L18.3396 5.85978L18.6953 6.06356L18.1872 6.52225L18.5938 6.87893L18.035 7.38851L18.3905 7.69407L17.5778 8.71322L13.7672 7.54165C13.7672 7.54165 10.9732 5.29955 11.0239 5.24867C11.075 5.19707 17.9332 0 17.9332 0Z" fill="#8E5A30"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Metamask.displayName = 'Metamask';

package/react/dist/Microsoft.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MicrosoftProps extends Omit<IconBaseProps, 'children'> {}
+export interface MicrosoftProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Microsoft: React.FC<MicrosoftProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M9.44556 18V9.4455H18V18H9.44556Z" fill="#FFBA15"/>
-      <path d="M0 18V9.4455H8.55449V18H0Z" fill="#0AA6F0"/>
-      <path d="M9.44556 8.55449V0H18V8.55449H9.44556Z" fill="#81BC0C"/>
-      <path d="M0 8.55449V0H8.55449V8.55449H0Z" fill="#F45326"/>
+export const Microsoft = React.forwardRef<SVGSVGElement, MicrosoftProps>(
+  ({ 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 18 18"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M9.44556 18V9.4455H18V18H9.44556Z" fill="#FFBA15"/>
+        <path d="M0 18V9.4455H8.55449V18H0Z" fill="#0AA6F0"/>
+        <path d="M9.44556 8.55449V0H18V8.55449H9.44556Z" fill="#81BC0C"/>
+        <path d="M0 8.55449V0H8.55449V8.55449H0Z" fill="#F45326"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Microsoft.displayName = 'Microsoft';

package/react/dist/MobileRecharge.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MobileRechargeProps extends Omit<IconBaseProps, 'children'> {}
+export interface MobileRechargeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MobileRecharge: React.FC<MobileRechargeProps> = (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="M18 12H16V4H6V20H14V22H4V2H18V12ZM20.707 17.293L19.293 18.707L18 17.4141V22H16V17.4141L14.707 18.707L13.293 17.293L17 13.5859L20.707 17.293ZM14 8H8V6H14V8Z" fill="currentColor"/>
+export const MobileRecharge = React.forwardRef<SVGSVGElement, MobileRechargeProps>(
+  ({ 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="M18 12H16V4H6V20H14V22H4V2H18V12ZM20.707 17.293L19.293 18.707L18 17.4141V22H16V17.4141L14.707 18.707L13.293 17.293L17 13.5859L20.707 17.293ZM14 8H8V6H14V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MobileRecharge.displayName = 'MobileRecharge';

package/react/dist/MobileRechargeAlt.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MobileRechargeAltProps extends Omit<IconBaseProps, 'children'> {}
+export interface MobileRechargeAltProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const MobileRechargeAlt: React.FC<MobileRechargeAltProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+export const MobileRechargeAlt = React.forwardRef<SVGSVGElement, MobileRechargeAltProps>(
+  ({ 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="M18 12H16V4H6V20H14V22H4V2H18V12ZM20.707 17.293L19.293 18.707L18 17.4141V22H16V17.4141L14.707 18.707L13.293 17.293L17 13.5859L20.707 17.293ZM14 8H8V6H14V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 MobileRechargeAlt.displayName = 'MobileRechargeAlt';

package/react/dist/More.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface MoreProps extends Omit<IconBaseProps, 'children'> {}
+export interface MoreProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const More: React.FC<MoreProps> = (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="M8 20H4V16H8V20ZM14 20H10V16H14V20ZM20 20H16V16H20V20ZM8 14H4V10H8V14ZM14 14H10V10H14V14ZM20 14H16V10H20V14ZM8 8H4V4H8V8ZM14 8H10V4H14V8ZM20 8H16V4H20V8Z" fill="currentColor"/>
+export const More = React.forwardRef<SVGSVGElement, MoreProps>(
+  ({ 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="M8 20H4V16H8V20ZM14 20H10V16H14V20ZM20 20H16V16H20V20ZM8 14H4V10H8V14ZM14 14H10V10H14V14ZM20 14H16V10H20V14ZM8 8H4V4H8V8ZM14 8H10V4H14V8ZM20 8H16V4H20V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 More.displayName = 'More';