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

package/react/dist/BitmartTravel.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BitmartTravelProps extends Omit<IconBaseProps, 'children'> {}
+export interface BitmartTravelProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BitmartTravel: React.FC<BitmartTravelProps> = (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="M20.5 20V22H3.5V20H20.5ZM8.37012 3L8.65039 3.24121L15.2803 8.92383L18.1357 8.35254C19.5779 8.06411 21.0167 8.86418 21.5332 10.2412L21.6436 10.5352C22.2755 12.2208 21.2906 14.0798 19.541 14.5039L4.46191 18.1592L0.520508 10.2764L4.8291 9.41406L5.20703 9.79297L6.30664 10.8926L8.25977 10.4043L2.44238 3H8.37012ZM11.7402 11.5957L5.69336 13.1074L4.1709 11.585L3.47949 11.7236L5.53809 15.8398L19.0703 12.5605C19.6535 12.4192 19.9812 11.7992 19.7705 11.2373L19.6611 10.9434C19.489 10.4844 19.009 10.2183 18.5283 10.3145L14.7188 11.0762L14.3496 10.7588L7.63086 5H6.55762L11.7402 11.5957Z" fill="currentColor"/>
+export const BitmartTravel = React.forwardRef<SVGSVGElement, BitmartTravelProps>(
+  ({ 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="M20.5 20V22H3.5V20H20.5ZM8.37012 3L8.65039 3.24121L15.2803 8.92383L18.1357 8.35254C19.5779 8.06411 21.0167 8.86418 21.5332 10.2412L21.6436 10.5352C22.2755 12.2208 21.2906 14.0798 19.541 14.5039L4.46191 18.1592L0.520508 10.2764L4.8291 9.41406L5.20703 9.79297L6.30664 10.8926L8.25977 10.4043L2.44238 3H8.37012ZM11.7402 11.5957L5.69336 13.1074L4.1709 11.585L3.47949 11.7236L5.53809 15.8398L19.0703 12.5605C19.6535 12.4192 19.9812 11.7992 19.7705 11.2373L19.6611 10.9434C19.489 10.4844 19.009 10.2183 18.5283 10.3145L14.7188 11.0762L14.3496 10.7588L7.63086 5H6.55762L11.7402 11.5957Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BitmartTravel.displayName = 'BitmartTravel';

package/react/dist/BmDiscovery.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BmDiscoveryProps extends Omit<IconBaseProps, 'children'> {}
+export interface BmDiscoveryProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BmDiscovery: React.FC<BmDiscoveryProps> = (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 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21H7V19H12C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5H5V21H3V3H12ZM11 7C13.7614 7 16 9.23858 16 12C16 14.7614 13.7614 17 11 17H8V15H11C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9H8V7H11Z" fill="currentColor"/>
+export const BmDiscovery = React.forwardRef<SVGSVGElement, BmDiscoveryProps>(
+  ({ 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 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21H7V19H12C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5H5V21H3V3H12ZM11 7C13.7614 7 16 9.23858 16 12C16 14.7614 13.7614 17 11 17H8V15H11C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9H8V7H11Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BmDiscovery.displayName = 'BmDiscovery';

package/react/dist/BrokerProgram.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BrokerProgramProps extends Omit<IconBaseProps, 'children'> {}
+export interface BrokerProgramProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BrokerProgram: React.FC<BrokerProgramProps> = (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="M21 13V21H19V15H12.4775L14.1738 19.2412L13.707 19.707L12 21.4141L10.293 19.707L9.82617 19.2412L11.5225 15H5V21H3V13H21ZM15 7C15 5.34315 13.6569 4 12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7ZM17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7Z" fill="currentColor"/>
+export const BrokerProgram = React.forwardRef<SVGSVGElement, BrokerProgramProps>(
+  ({ 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="M21 13V21H19V15H12.4775L14.1738 19.2412L13.707 19.707L12 21.4141L10.293 19.707L9.82617 19.2412L11.5225 15H5V21H3V13H21ZM15 7C15 5.34315 13.6569 4 12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7ZM17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BrokerProgram.displayName = 'BrokerProgram';

package/react/dist/CLP.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CLPProps extends Omit<IconBaseProps, 'children'> {}
+export interface CLPProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const CLP: React.FC<CLPProps> = (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_3933)">
-      <circle cx="20" cy="20" r="20" fill="#2B73DE"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2514 11.8022C18.0109 11.8901 17.0057 12.2198 16.193 12.8132C15.1022 13.5824 14.5675 14.6813 14.5675 16.1319C14.5675 17.7582 15.2947 18.989 16.7918 19.8242L19.2514 20.7473V25.8901C18.5884 25.8022 18.0751 25.5824 17.7115 25.2308C17.2196 24.7473 16.9415 23.9121 16.856 22.7692H14.375C14.5033 24.5714 15.0166 25.9121 15.9149 26.7912C16.6849 27.5385 17.7971 27.956 19.2514 28.0659V30H20.663V28.0659C21.9677 27.978 23.0371 27.6484 23.8926 27.0769C25.0475 26.2857 25.625 25.1209 25.625 23.5604C25.625 21.956 24.8764 20.7253 23.4007 19.8681C23.2723 19.7802 22.3527 19.4286 20.663 18.7912V13.956C21.1977 14.022 21.6255 14.1758 21.9463 14.4176C22.4596 14.7912 22.7804 15.4286 22.9087 16.3516H25.347C25.1331 14.7473 24.5984 13.5824 23.7215 12.8791C22.9729 12.2637 21.9463 11.8901 20.663 11.8022V10H19.2514V11.8022ZM20.663 21.2747C20.7486 21.2967 20.8127 21.3187 20.8983 21.3626C22.3741 21.8901 23.1226 22.6593 23.1226 23.6483C23.1226 24.3736 22.8232 24.945 22.2243 25.3407C21.7966 25.6264 21.2619 25.8022 20.663 25.8901V21.2747ZM17.0699 16.1318C17.0699 16.967 17.7971 17.6703 19.2514 18.2417V13.934C18.6953 14 18.2462 14.1538 17.9254 14.3736C17.3479 14.7252 17.0699 15.3186 17.0699 16.1318Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3933">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const CLP = React.forwardRef<SVGSVGElement, CLPProps>(
+  ({ 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_3933)">
+        <circle cx="20" cy="20" r="20" fill="#2B73DE"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M19.2514 11.8022C18.0109 11.8901 17.0057 12.2198 16.193 12.8132C15.1022 13.5824 14.5675 14.6813 14.5675 16.1319C14.5675 17.7582 15.2947 18.989 16.7918 19.8242L19.2514 20.7473V25.8901C18.5884 25.8022 18.0751 25.5824 17.7115 25.2308C17.2196 24.7473 16.9415 23.9121 16.856 22.7692H14.375C14.5033 24.5714 15.0166 25.9121 15.9149 26.7912C16.6849 27.5385 17.7971 27.956 19.2514 28.0659V30H20.663V28.0659C21.9677 27.978 23.0371 27.6484 23.8926 27.0769C25.0475 26.2857 25.625 25.1209 25.625 23.5604C25.625 21.956 24.8764 20.7253 23.4007 19.8681C23.2723 19.7802 22.3527 19.4286 20.663 18.7912V13.956C21.1977 14.022 21.6255 14.1758 21.9463 14.4176C22.4596 14.7912 22.7804 15.4286 22.9087 16.3516H25.347C25.1331 14.7473 24.5984 13.5824 23.7215 12.8791C22.9729 12.2637 21.9463 11.8901 20.663 11.8022V10H19.2514V11.8022ZM20.663 21.2747C20.7486 21.2967 20.8127 21.3187 20.8983 21.3626C22.3741 21.8901 23.1226 22.6593 23.1226 23.6483C23.1226 24.3736 22.8232 24.945 22.2243 25.3407C21.7966 25.6264 21.2619 25.8022 20.663 25.8901V21.2747ZM17.0699 16.1318C17.0699 16.967 17.7971 17.6703 19.2514 18.2417V13.934C18.6953 14 18.2462 14.1538 17.9254 14.3736C17.3479 14.7252 17.0699 15.3186 17.0699 16.1318Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3933">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 CLP.displayName = 'CLP';

package/react/dist/CNY.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CNYProps extends Omit<IconBaseProps, 'children'> {}
+export interface CNYProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const CNY: React.FC<CNYProps> = (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_3978)">
-      <circle cx="20" cy="20" r="20" fill="#DB0E0E"/>
-      <path d="M12.6663 11.1675H16.0388L19.625 18.3162L23.2113 11.1675H26.5838L22.0238 19.4325H25.0638V21H21.145L21.1213 21.0237V22.995H25.0638V24.5625H21.1213V28.125H18.1288V24.5625H14.21V22.995H18.1288V21.0237L18.105 21H14.21V19.4325H17.2263L12.6663 11.1675Z" fill="#FEFF03"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3978">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const CNY = React.forwardRef<SVGSVGElement, CNYProps>(
+  ({ 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_3978)">
+        <circle cx="20" cy="20" r="20" fill="#DB0E0E"/>
+        <path d="M12.6663 11.1675H16.0388L19.625 18.3162L23.2113 11.1675H26.5838L22.0238 19.4325H25.0638V21H21.145L21.1213 21.0237V22.995H25.0638V24.5625H21.1213V28.125H18.1288V24.5625H14.21V22.995H18.1288V21.0237L18.105 21H14.21V19.4325H17.2263L12.6663 11.1675Z" fill="#FEFF03"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3978">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 CNY.displayName = 'CNY';

package/react/dist/COP.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface COPProps extends Omit<IconBaseProps, 'children'> {}
+export interface COPProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const COP: React.FC<COPProps> = (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_3959)">
-      <circle cx="20" cy="20" r="20" fill="#FEB116"/>
-      <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.2617 22.4931 23.2617 23.4203C23.2617 24.1003 22.9789 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_3959">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const COP = React.forwardRef<SVGSVGElement, COPProps>(
+  ({ 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_3959)">
+        <circle cx="20" cy="20" r="20" fill="#FEB116"/>
+        <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.2617 22.4931 23.2617 23.4203C23.2617 24.1003 22.9789 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_3959">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 COP.displayName = 'COP';

package/react/dist/Clear.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ClearProps extends Omit<IconBaseProps, 'children'> {}
+export interface ClearProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Clear: React.FC<ClearProps> = (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 6H19.6025L19.7373 6.8418L21.9873 20.8418L22.1738 22H1.82617L2.0127 20.8418L4.2627 6.8418L4.39746 6H11V2H13V6ZM4.17383 20H19.8262L18.7012 13H5.29883L4.17383 20ZM5.61914 11H18.3809L17.8984 8H6.10156L5.61914 11Z" fill="currentColor"/>
+export const Clear = React.forwardRef<SVGSVGElement, ClearProps>(
+  ({ 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 6H19.6025L19.7373 6.8418L21.9873 20.8418L22.1738 22H1.82617L2.0127 20.8418L4.2627 6.8418L4.39746 6H11V2H13V6ZM4.17383 20H19.8262L18.7012 13H5.29883L4.17383 20ZM5.61914 11H18.3809L17.8984 8H6.10156L5.61914 11Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Clear.displayName = 'Clear';

package/react/dist/Close.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CloseProps extends Omit<IconBaseProps, 'children'> {}
+export interface CloseProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Close: React.FC<CloseProps> = (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.707 6.70703L13.4141 12L18.707 17.293L17.293 18.707L12 13.4141L6.70703 18.707L5.29297 17.293L10.5859 12L5.29297 6.70703L6.70703 5.29297L12 10.5859L17.293 5.29297L18.707 6.70703Z" fill="currentColor"/>
-      <path d="M18.707 6.70703L13.4141 12L18.707 17.293L17.293 18.707L12 13.4141L6.70703 18.707L5.29297 17.293L10.5859 12L5.29297 6.70703L6.70703 5.29297L12 10.5859L17.293 5.29297L18.707 6.70703Z" fill="currentColor"/>
+export const Close = React.forwardRef<SVGSVGElement, CloseProps>(
+  ({ 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.707 6.70703L13.4141 12L18.707 17.293L17.293 18.707L12 13.4141L6.70703 18.707L5.29297 17.293L10.5859 12L5.29297 6.70703L6.70703 5.29297L12 10.5859L17.293 5.29297L18.707 6.70703Z" fill="currentColor"/>
+        <path d="M18.707 6.70703L13.4141 12L18.707 17.293L17.293 18.707L12 13.4141L6.70703 18.707L5.29297 17.293L10.5859 12L5.29297 6.70703L6.70703 5.29297L12 10.5859L17.293 5.29297L18.707 6.70703Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Close.displayName = 'Close';

package/react/dist/CloudBackup.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CloudBackupProps extends Omit<IconBaseProps, 'children'> {}
+export interface CloudBackupProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const CloudBackup: React.FC<CloudBackupProps> = (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="M15.707 13.293L14.293 14.707L13 13.4141V19.001H11V13.4141L9.70703 14.707L8.29297 13.293L12 9.58594L15.707 13.293ZM12 4C15.0783 4 17.6131 6.31884 17.958 9.30469C20.1826 10.0038 21.9998 11.8484 22 14.2256H21.999C22.0135 15.0737 21.7214 16.264 20.8252 17.2559C19.8933 18.287 18.4039 19.0009 16.2275 19.001H15V17.001H16.2275C17.9407 17.0009 18.8526 16.4563 19.3418 15.915C19.8583 15.3435 20.0098 14.6587 20 14.25V14.2256C19.9997 12.6098 18.2646 11 16 11V10C15.9997 7.79105 14.209 6 12 6C9.79102 6.00003 8.00027 7.79107 8 10H7.50098L7.32715 10.0049C5.54515 10.1058 4.00024 11.747 4 13.5947C4.00003 15.4753 5.52465 17 7.40527 17H9.16699V19H7.40527C4.42008 19 2.00003 16.5799 2 13.5947C2.00021 11.0435 3.85152 8.73224 6.29297 8.14453C7.07463 5.73926 9.33408 4.00003 12 4Z" fill="currentColor"/>
+export const CloudBackup = React.forwardRef<SVGSVGElement, CloudBackupProps>(
+  ({ 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="M15.707 13.293L14.293 14.707L13 13.4141V19.001H11V13.4141L9.70703 14.707L8.29297 13.293L12 9.58594L15.707 13.293ZM12 4C15.0783 4 17.6131 6.31884 17.958 9.30469C20.1826 10.0038 21.9998 11.8484 22 14.2256H21.999C22.0135 15.0737 21.7214 16.264 20.8252 17.2559C19.8933 18.287 18.4039 19.0009 16.2275 19.001H15V17.001H16.2275C17.9407 17.0009 18.8526 16.4563 19.3418 15.915C19.8583 15.3435 20.0098 14.6587 20 14.25V14.2256C19.9997 12.6098 18.2646 11 16 11V10C15.9997 7.79105 14.209 6 12 6C9.79102 6.00003 8.00027 7.79107 8 10H7.50098L7.32715 10.0049C5.54515 10.1058 4.00024 11.747 4 13.5947C4.00003 15.4753 5.52465 17 7.40527 17H9.16699V19H7.40527C4.42008 19 2.00003 16.5799 2 13.5947C2.00021 11.0435 3.85152 8.73224 6.29297 8.14453C7.07463 5.73926 9.33408 4.00003 12 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 CloudBackup.displayName = 'CloudBackup';

package/react/dist/CoinM.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CoinMProps extends Omit<IconBaseProps, 'children'> {}
+export interface CoinMProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const CoinM: React.FC<CoinMProps> = (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="M4 22H2V14H4V22ZM21 22H5V2H21V22ZM7 20H19V4H7V20ZM16 10H13.8574L13.6748 10.0098C12.7707 10.1072 12 10.9208 12 12C12 13.1511 12.8772 14 13.8574 14H16V16H13.8574C11.6818 16 10 14.1626 10 12C10 9.90509 11.5778 8.11488 13.6543 8.00488L13.8574 8H16V10Z" fill="currentColor"/>
+export const CoinM = React.forwardRef<SVGSVGElement, CoinMProps>(
+  ({ 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="M4 22H2V14H4V22ZM21 22H5V2H21V22ZM7 20H19V4H7V20ZM16 10H13.8574L13.6748 10.0098C12.7707 10.1072 12 10.9208 12 12C12 13.1511 12.8772 14 13.8574 14H16V16H13.8574C11.6818 16 10 14.1626 10 12C10 9.90509 11.5778 8.11488 13.6543 8.00488L13.8574 8H16V10Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 CoinM.displayName = 'CoinM';

package/react/dist/Community.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CommunityProps extends Omit<IconBaseProps, 'children'> {}
+export interface CommunityProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Community: React.FC<CommunityProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M20 20H18V12.3438L10 14.7441L2 12.3438V20H0V9.65625L10 12.6553L20 9.65625V20ZM10 0C13.866 0 17 3.13401 17 7C17 7.94575 16.8106 8.84695 16.4707 9.66992L13.5107 10.5576C14.4294 9.65101 15 8.39264 15 7C15 4.23858 12.7614 2 10 2C7.23858 2 5 4.23858 5 7C5 8.39239 5.56994 9.65105 6.48828 10.5576L3.52832 9.66992C3.18847 8.84704 3 7.94562 3 7C3 3.13401 6.13401 0 10 0ZM12 7L10 9L8 7L10 5L12 7Z" fill="currentColor"/>
+export const Community = React.forwardRef<SVGSVGElement, CommunityProps>(
+  ({ 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 20 20"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M20 20H18V12.3438L10 14.7441L2 12.3438V20H0V9.65625L10 12.6553L20 9.65625V20ZM10 0C13.866 0 17 3.13401 17 7C17 7.94575 16.8106 8.84695 16.4707 9.66992L13.5107 10.5576C14.4294 9.65101 15 8.39264 15 7C15 4.23858 12.7614 2 10 2C7.23858 2 5 4.23858 5 7C5 8.39239 5.56994 9.65105 6.48828 10.5576L3.52832 9.66992C3.18847 8.84704 3 7.94562 3 7C3 3.13401 6.13401 0 10 0ZM12 7L10 9L8 7L10 5L12 7Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Community.displayName = 'Community';

package/react/dist/Copy.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CopyProps extends Omit<IconBaseProps, 'children'> {}
+export interface CopyProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Copy: React.FC<CopyProps> = (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 22H6V6H22V22ZM8 20H20V8H8V20ZM15 4H4V15H2V2H15V4Z" fill="currentColor"/>
+export const Copy = React.forwardRef<SVGSVGElement, CopyProps>(
+  ({ 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 22H6V6H22V22ZM8 20H20V8H8V20ZM15 4H4V15H2V2H15V4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Copy.displayName = 'Copy';

package/react/dist/CopyTrading.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface CopyTradingProps extends Omit<IconBaseProps, 'children'> {}
+export interface CopyTradingProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const CopyTrading: React.FC<CopyTradingProps> = (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="M10 3C14.9706 3 19 7.02944 19 12C19 16.9706 14.9706 21 10 21C5.02944 21 1 16.9706 1 12C1 7.02944 5.02944 3 10 3ZM10 5C6.13401 5 3 8.13401 3 12C3 15.866 6.13401 19 10 19C13.866 19 17 15.866 17 12C17 8.13401 13.866 5 10 5ZM20.7559 5.3457C22.158 6.96545 23 9.37456 23 12C23 14.6254 22.158 17.0346 20.7559 18.6543L19.2441 17.3457C20.2806 16.1484 21 14.2288 21 12C21 9.77119 20.2806 7.85159 19.2441 6.6543L20.7559 5.3457ZM14 12L10 16L6 12L10 8L14 12ZM8.8291 12L10 13.1709L11.1709 12L10 10.8291L8.8291 12Z" fill="currentColor"/>
+export const CopyTrading = React.forwardRef<SVGSVGElement, CopyTradingProps>(
+  ({ 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="M10 3C14.9706 3 19 7.02944 19 12C19 16.9706 14.9706 21 10 21C5.02944 21 1 16.9706 1 12C1 7.02944 5.02944 3 10 3ZM10 5C6.13401 5 3 8.13401 3 12C3 15.866 6.13401 19 10 19C13.866 19 17 15.866 17 12C17 8.13401 13.866 5 10 5ZM20.7559 5.3457C22.158 6.96545 23 9.37456 23 12C23 14.6254 22.158 17.0346 20.7559 18.6543L19.2441 17.3457C20.2806 16.1484 21 14.2288 21 12C21 9.77119 20.2806 7.85159 19.2441 6.6543L20.7559 5.3457ZM14 12L10 16L6 12L10 8L14 12ZM8.8291 12L10 13.1709L11.1709 12L10 10.8291L8.8291 12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 CopyTrading.displayName = 'CopyTrading';