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

package/react/dist/Down.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface DownProps extends Omit<IconBaseProps, 'children'> {}
+export interface DownProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Down: React.FC<DownProps> = (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 7.375L12 18.625L3 7.375H21Z" fill="currentColor"/>
+export const Down = React.forwardRef<SVGSVGElement, DownProps>(
+  ({ 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 7.375L12 18.625L3 7.375H21Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Down.displayName = 'Down';

package/react/dist/Download.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface DownloadProps extends Omit<IconBaseProps, 'children'> {}
+export interface DownloadProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Download: React.FC<DownloadProps> = (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 19H20V13H22V21H2V13H4V19ZM13 11.5859L15.293 9.29297L16.707 10.707L12 15.4141L7.29297 10.707L8.70703 9.29297L11 11.5859V3H13V11.5859Z" fill="currentColor"/>
+export const Download = React.forwardRef<SVGSVGElement, DownloadProps>(
+  ({ 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 19H20V13H22V21H2V13H4V19ZM13 11.5859L15.293 9.29297L16.707 10.707L12 15.4141L7.29297 10.707L8.70703 9.29297L11 11.5859V3H13V11.5859Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Download.displayName = 'Download';

package/react/dist/Drag.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface DragProps extends Omit<IconBaseProps, 'children'> {}
+export interface DragProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Drag: React.FC<DragProps> = (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.0312 19.25L12 23L8.96875 19.25H15.0312ZM21 18H3V16H21V18ZM21 13H3V11H21V13ZM21 8H3V6H21V8ZM15.0312 4.75H8.96875L12 1L15.0312 4.75Z" fill="currentColor"/>
+export const Drag = React.forwardRef<SVGSVGElement, DragProps>(
+  ({ 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.0312 19.25L12 23L8.96875 19.25H15.0312ZM21 18H3V16H21V18ZM21 13H3V11H21V13ZM21 8H3V6H21V8ZM15.0312 4.75H8.96875L12 1L15.0312 4.75Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Drag.displayName = 'Drag';

package/react/dist/EGP.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface EGPProps extends Omit<IconBaseProps, 'children'> {}
+export interface EGPProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const EGP: React.FC<EGPProps> = (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_3969)">
-      <circle cx="20" cy="20" r="20" fill="#CF1227"/>
-      <path d="M14.3313 13.225C15.8688 13.225 17.0125 13.7312 17.8 14.7625C18.3625 15.5125 18.6625 16.4125 18.6625 17.425H16.45C16.3938 16.6 16.225 16.0187 15.925 15.6812C15.5875 15.2875 15.0438 15.1 14.2938 15.1C13.5813 15.1 13.0375 15.3062 12.6625 15.7562C12.325 16.1312 12.1563 16.6187 12.1563 17.2187C12.1563 17.7437 12.25 18.55 12.4563 19.6375H15.9438V20.875H12.6625C12.7188 21.3625 12.7563 21.7562 12.7563 22.0563C12.7563 23.1812 12.4 24.175 11.6875 25H18.2875V26.875H9.1V25.0562C10.1875 24.4562 10.7313 23.5375 10.7313 22.2625C10.7313 21.9062 10.675 21.4375 10.5813 20.875H8.85625V19.6375H10.3188C10.075 18.55 9.9625 17.725 9.9625 17.1812C9.9625 16.0937 10.3375 15.175 11.0875 14.425C11.8938 13.6187 12.9813 13.225 14.3313 13.225ZM20.5313 13.4875H30.1875V15.3625H22.725V19.075H29.7375V20.95H22.725V25H30.5063V26.875H20.5313V13.4875Z" fill="#CBAB40"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3969">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const EGP = React.forwardRef<SVGSVGElement, EGPProps>(
+  ({ 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_3969)">
+        <circle cx="20" cy="20" r="20" fill="#CF1227"/>
+        <path d="M14.3313 13.225C15.8688 13.225 17.0125 13.7312 17.8 14.7625C18.3625 15.5125 18.6625 16.4125 18.6625 17.425H16.45C16.3938 16.6 16.225 16.0187 15.925 15.6812C15.5875 15.2875 15.0438 15.1 14.2938 15.1C13.5813 15.1 13.0375 15.3062 12.6625 15.7562C12.325 16.1312 12.1563 16.6187 12.1563 17.2187C12.1563 17.7437 12.25 18.55 12.4563 19.6375H15.9438V20.875H12.6625C12.7188 21.3625 12.7563 21.7562 12.7563 22.0563C12.7563 23.1812 12.4 24.175 11.6875 25H18.2875V26.875H9.1V25.0562C10.1875 24.4562 10.7313 23.5375 10.7313 22.2625C10.7313 21.9062 10.675 21.4375 10.5813 20.875H8.85625V19.6375H10.3188C10.075 18.55 9.9625 17.725 9.9625 17.1812C9.9625 16.0937 10.3375 15.175 11.0875 14.425C11.8938 13.6187 12.9813 13.225 14.3313 13.225ZM20.5313 13.4875H30.1875V15.3625H22.725V19.075H29.7375V20.95H22.725V25H30.5063V26.875H20.5313V13.4875Z" fill="#CBAB40"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3969">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 EGP.displayName = 'EGP';

package/react/dist/EUR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface EURProps extends Omit<IconBaseProps, 'children'> {}
+export interface EURProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const EUR: React.FC<EURProps> = (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_3962)">
-      <circle cx="20" cy="20" r="20" fill="#0052B1"/>
-      <path d="M20.92 11.37C22.63 11.37 24.0475 11.8425 25.1725 12.7875C26.2525 13.6875 26.9275 14.9025 27.1975 16.455H24.5875C24.3175 15.4875 23.8675 14.79 23.215 14.34C22.6075 13.89 21.82 13.6875 20.875 13.6875C19.435 13.6875 18.355 14.2275 17.59 15.3525C17.185 15.9375 16.8925 16.6575 16.7125 17.5125H24.3625L23.9125 18.9975H16.5325C16.51 19.2225 16.51 19.47 16.51 19.74C16.51 19.9875 16.51 20.235 16.5325 20.4825H23.485L23.035 21.9675H16.69C16.825 22.7325 17.0725 23.3625 17.3875 23.9025C18.1075 25.1175 19.3 25.7475 20.9425 25.7475C21.91 25.7475 22.72 25.4775 23.35 24.9375C23.9575 24.4425 24.4075 23.7 24.7 22.71H27.355C26.95 24.42 26.14 25.7475 24.9475 26.715C23.8225 27.615 22.495 28.065 20.965 28.065C18.5575 28.065 16.735 27.21 15.52 25.545C14.7775 24.555 14.2825 23.3625 14.0575 21.9675H11.875L12.325 20.4825H13.9C13.8775 20.235 13.8775 19.9875 13.8775 19.74C13.8775 19.47 13.8775 19.2225 13.9 18.9975H11.875L12.325 17.5125H14.0575C14.2825 15.9825 14.8 14.7225 15.61 13.71C16.8475 12.135 18.625 11.37 20.92 11.37Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3962">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const EUR = React.forwardRef<SVGSVGElement, EURProps>(
+  ({ 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_3962)">
+        <circle cx="20" cy="20" r="20" fill="#0052B1"/>
+        <path d="M20.92 11.37C22.63 11.37 24.0475 11.8425 25.1725 12.7875C26.2525 13.6875 26.9275 14.9025 27.1975 16.455H24.5875C24.3175 15.4875 23.8675 14.79 23.215 14.34C22.6075 13.89 21.82 13.6875 20.875 13.6875C19.435 13.6875 18.355 14.2275 17.59 15.3525C17.185 15.9375 16.8925 16.6575 16.7125 17.5125H24.3625L23.9125 18.9975H16.5325C16.51 19.2225 16.51 19.47 16.51 19.74C16.51 19.9875 16.51 20.235 16.5325 20.4825H23.485L23.035 21.9675H16.69C16.825 22.7325 17.0725 23.3625 17.3875 23.9025C18.1075 25.1175 19.3 25.7475 20.9425 25.7475C21.91 25.7475 22.72 25.4775 23.35 24.9375C23.9575 24.4425 24.4075 23.7 24.7 22.71H27.355C26.95 24.42 26.14 25.7475 24.9475 26.715C23.8225 27.615 22.495 28.065 20.965 28.065C18.5575 28.065 16.735 27.21 15.52 25.545C14.7775 24.555 14.2825 23.3625 14.0575 21.9675H11.875L12.325 20.4825H13.9C13.8775 20.235 13.8775 19.9875 13.8775 19.74C13.8775 19.47 13.8775 19.2225 13.9 18.9975H11.875L12.325 17.5125H14.0575C14.2825 15.9825 14.8 14.7225 15.61 13.71C16.8475 12.135 18.625 11.37 20.92 11.37Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3962">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 EUR.displayName = 'EUR';

package/react/dist/EarnOverview.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface EarnOverviewProps extends Omit<IconBaseProps, 'children'> {}
+export interface EarnOverviewProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const EarnOverview: React.FC<EarnOverviewProps> = (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 21.999H3V19.999H21V21.999ZM12 5.99902C15.4853 5.99902 17.829 7.82093 19.252 10.2129C20.6481 12.5601 21.1815 15.4742 21.1816 17.8877H19.1816C19.1815 15.7166 18.6925 13.1859 17.5322 11.2354C16.3984 9.32952 14.6507 7.99902 12 7.99902C9.34933 7.99902 7.60164 9.32952 6.46777 11.2354C5.30747 13.1859 4.81846 15.7166 4.81836 17.8877H2.81836C2.81845 15.4742 3.35187 12.5601 4.74805 10.2129C6.17103 7.82093 8.51469 5.99902 12 5.99902ZM15.8096 13.5713L12 17.8564L8.19043 13.5713L12 9.28418L15.8096 13.5713ZM10.8662 13.5703L12 14.8457L13.1328 13.5703L12 12.2949L10.8662 13.5703ZM12 2C13.1599 2.00001 14.0965 2.15439 14.7529 2.31348C15.0811 2.39303 15.3402 2.4747 15.5225 2.53809C15.6135 2.56975 15.6861 2.59645 15.7383 2.61719C15.7643 2.62751 15.7857 2.63678 15.8018 2.64355L15.8291 2.65527L15.832 2.65625L15.833 2.65723H15.834C15.8343 2.65735 15.8348 2.6577 15.4287 3.57129C15.0615 4.39742 15.0256 4.47668 15.0225 4.48438C15.0179 4.48251 15.0099 4.48051 15 4.47656C14.9735 4.46606 14.9279 4.44856 14.8652 4.42676C14.7395 4.38303 14.5428 4.32099 14.2822 4.25781C13.7602 4.13127 12.9822 4.00001 12 4C11.0177 4.00002 10.2398 4.13126 9.71777 4.25781C9.4569 4.32106 9.25953 4.38302 9.13379 4.42676C9.07127 4.44851 9.02635 4.4661 9 4.47656C8.98877 4.481 8.97996 4.48255 8.97559 4.48438L8.16602 2.65723L8.16797 2.65625L8.1709 2.65527L8.19824 2.64355C8.21431 2.63679 8.23569 2.62753 8.26172 2.61719C8.31391 2.59646 8.3866 2.56972 8.47754 2.53809C8.65971 2.47473 8.91814 2.393 9.24609 2.31348C9.90253 2.15434 10.8397 2.00002 12 2Z" fill="currentColor"/>
+export const EarnOverview = React.forwardRef<SVGSVGElement, EarnOverviewProps>(
+  ({ 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 21.999H3V19.999H21V21.999ZM12 5.99902C15.4853 5.99902 17.829 7.82093 19.252 10.2129C20.6481 12.5601 21.1815 15.4742 21.1816 17.8877H19.1816C19.1815 15.7166 18.6925 13.1859 17.5322 11.2354C16.3984 9.32952 14.6507 7.99902 12 7.99902C9.34933 7.99902 7.60164 9.32952 6.46777 11.2354C5.30747 13.1859 4.81846 15.7166 4.81836 17.8877H2.81836C2.81845 15.4742 3.35187 12.5601 4.74805 10.2129C6.17103 7.82093 8.51469 5.99902 12 5.99902ZM15.8096 13.5713L12 17.8564L8.19043 13.5713L12 9.28418L15.8096 13.5713ZM10.8662 13.5703L12 14.8457L13.1328 13.5703L12 12.2949L10.8662 13.5703ZM12 2C13.1599 2.00001 14.0965 2.15439 14.7529 2.31348C15.0811 2.39303 15.3402 2.4747 15.5225 2.53809C15.6135 2.56975 15.6861 2.59645 15.7383 2.61719C15.7643 2.62751 15.7857 2.63678 15.8018 2.64355L15.8291 2.65527L15.832 2.65625L15.833 2.65723H15.834C15.8343 2.65735 15.8348 2.6577 15.4287 3.57129C15.0615 4.39742 15.0256 4.47668 15.0225 4.48438C15.0179 4.48251 15.0099 4.48051 15 4.47656C14.9735 4.46606 14.9279 4.44856 14.8652 4.42676C14.7395 4.38303 14.5428 4.32099 14.2822 4.25781C13.7602 4.13127 12.9822 4.00001 12 4C11.0177 4.00002 10.2398 4.13126 9.71777 4.25781C9.4569 4.32106 9.25953 4.38302 9.13379 4.42676C9.07127 4.44851 9.02635 4.4661 9 4.47656C8.98877 4.481 8.97996 4.48255 8.97559 4.48438L8.16602 2.65723L8.16797 2.65625L8.1709 2.65527L8.19824 2.64355C8.21431 2.63679 8.23569 2.62753 8.26172 2.61719C8.31391 2.59646 8.3866 2.56972 8.47754 2.53809C8.65971 2.47473 8.91814 2.393 9.24609 2.31348C9.90253 2.15434 10.8397 2.00002 12 2Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 EarnOverview.displayName = 'EarnOverview';

package/react/dist/Edit.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface EditProps extends Omit<IconBaseProps, 'children'> {}
+export interface EditProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Edit: React.FC<EditProps> = (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 6H5V19H18V11H20V21H3V4H13V6ZM21.707 3.70703L10.707 14.707L9.29297 13.293L20.293 2.29297L21.707 3.70703Z" fill="currentColor"/>
+export const Edit = React.forwardRef<SVGSVGElement, EditProps>(
+  ({ 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 6H5V19H18V11H20V21H3V4H13V6ZM21.707 3.70703L10.707 14.707L9.29297 13.293L20.293 2.29297L21.707 3.70703Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Edit.displayName = 'Edit';

package/react/dist/EventsCenter.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface EventsCenterProps extends Omit<IconBaseProps, 'children'> {}
+export interface EventsCenterProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const EventsCenter: React.FC<EventsCenterProps> = (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.0078 7.70898L22.5098 10.3301L18.625 16.2012V22.3467L12 20.3438L5.375 22.3467V16.2012L1.49023 10.3301L7.99121 7.70898L12 2.3252L16.0078 7.70898ZM9.25977 9.35547L8.99902 9.46094L4.50977 11.2695L7.375 15.5986V19.6533L11.7109 18.3428L12 18.2549L12.2891 18.3428L16.625 19.6533V15.5986L19.4893 11.2695L15.001 9.46094L14.7402 9.35547L12 5.67285L9.25977 9.35547ZM10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12H16C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12H10Z" fill="currentColor"/>
+export const EventsCenter = React.forwardRef<SVGSVGElement, EventsCenterProps>(
+  ({ 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.0078 7.70898L22.5098 10.3301L18.625 16.2012V22.3467L12 20.3438L5.375 22.3467V16.2012L1.49023 10.3301L7.99121 7.70898L12 2.3252L16.0078 7.70898ZM9.25977 9.35547L8.99902 9.46094L4.50977 11.2695L7.375 15.5986V19.6533L11.7109 18.3428L12 18.2549L12.2891 18.3428L16.625 19.6533V15.5986L19.4893 11.2695L15.001 9.46094L14.7402 9.35547L12 5.67285L9.25977 9.35547ZM10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12H16C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12H10Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 EventsCenter.displayName = 'EventsCenter';

package/react/dist/Exchange.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ExchangeProps extends Omit<IconBaseProps, 'children'> {}
+export interface ExchangeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Exchange: React.FC<ExchangeProps> = (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.5449 2.16113L21.7109 8.11133L22.167 8.40723V10.7998H19V19H22V21H2V19H5V10.7998H1.83301V8.40723L2.28906 8.11133L11.4551 2.16113L12 1.80762L12.5449 2.16113ZM7 10.7998V19H11V10.7998H7ZM13 10.7998V19H17V10.7998H13ZM4.90234 8.7998H19.0977L12 4.19238L4.90234 8.7998Z" fill="currentColor"/>
+export const Exchange = React.forwardRef<SVGSVGElement, ExchangeProps>(
+  ({ 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.5449 2.16113L21.7109 8.11133L22.167 8.40723V10.7998H19V19H22V21H2V19H5V10.7998H1.83301V8.40723L2.28906 8.11133L11.4551 2.16113L12 1.80762L12.5449 2.16113ZM7 10.7998V19H11V10.7998H7ZM13 10.7998V19H17V10.7998H13ZM4.90234 8.7998H19.0977L12 4.19238L4.90234 8.7998Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Exchange.displayName = 'Exchange';

package/react/dist/Facebook.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface FacebookProps extends Omit<IconBaseProps, 'children'> {}
+export interface FacebookProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Facebook: React.FC<FacebookProps> = (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="M22 12C22 6.4758 17.5242 2 12 2C6.47581 2 2 6.4758 2 12C2 16.9911 5.65685 21.1282 10.4375 21.879V14.8907H7.89718V12H10.4375V9.79677C10.4375 7.29072 11.9294 5.90645 14.2145 5.90645C15.3089 5.90645 16.4532 6.10161 16.4532 6.10161V8.56129H15.1919C13.95 8.56129 13.5625 9.33225 13.5625 10.123V12H16.3359L15.8923 14.8907H13.5625V21.879C18.3431 21.1282 22 16.9911 22 12Z" fill="#0F0F0F"/>
+export const Facebook = React.forwardRef<SVGSVGElement, FacebookProps>(
+  ({ 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="M22 12C22 6.4758 17.5242 2 12 2C6.47581 2 2 6.4758 2 12C2 16.9911 5.65685 21.1282 10.4375 21.879V14.8907H7.89718V12H10.4375V9.79677C10.4375 7.29072 11.9294 5.90645 14.2145 5.90645C15.3089 5.90645 16.4532 6.10161 16.4532 6.10161V8.56129H15.1919C13.95 8.56129 13.5625 9.33225 13.5625 10.123V12H16.3359L15.8923 14.8907H13.5625V21.879C18.3431 21.1282 22 16.9911 22 12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Facebook.displayName = 'Facebook';

package/react/dist/Fail.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface FailProps extends Omit<IconBaseProps, 'children'> {}
+export interface FailProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Fail: React.FC<FailProps> = (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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z" fill="currentColor"/>
+export const Fail = React.forwardRef<SVGSVGElement, FailProps>(
+  ({ 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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Fail.displayName = 'Fail';

package/react/dist/FailFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface FailFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface FailFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const FailFilled: React.FC<FailFilledProps> = (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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 10.5859L9.70703 8.29297L8.29297 9.70703L10.5859 12L8.29297 14.293L9.70703 15.707L12 13.4141L14.293 15.707L15.707 14.293L13.4141 12L15.707 9.70703L14.293 8.29297L12 10.5859Z" fill="currentColor"/>
+export const FailFilled = React.forwardRef<SVGSVGElement, FailFilledProps>(
+  ({ 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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 10.5859L9.70703 8.29297L8.29297 9.70703L10.5859 12L8.29297 14.293L9.70703 15.707L12 13.4141L14.293 15.707L15.707 14.293L13.4141 12L15.707 9.70703L14.293 8.29297L12 10.5859Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 FailFilled.displayName = 'FailFilled';

package/react/dist/FiatConvert.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface FiatConvertProps extends Omit<IconBaseProps, 'children'> {}
+export interface FiatConvertProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const FiatConvert: React.FC<FiatConvertProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="21" height="18" viewBox="0 0 21 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M16.8154 7C18.2702 7.00009 19.61 7.50664 20.6367 8.35352L19.3633 9.89648C18.6925 9.34328 17.8026 9.00009 16.8154 9C15.7579 9 14.8267 9.38758 14.1484 10H17V12H13.0391C13.0131 12.164 13 12.331 13 12.5C13 12.669 13.0131 12.836 13.0391 13H17V15H14.1484C14.8267 15.6124 15.7579 16 16.8154 16C17.8026 15.9999 18.6925 15.6567 19.3633 15.1035L20.6367 16.6465C19.61 17.4934 18.2702 17.9999 16.8154 18C14.5902 18 12.6052 16.7992 11.6328 15H10V13H11.0244C11.0089 12.8356 11 12.6689 11 12.5C11 12.3311 11.0089 12.1644 11.0244 12H10V10H11.6328C12.6052 8.20078 14.5902 7 16.8154 7ZM20 6H18V2H2V14H8V16H0V0H20V6ZM10 6H4V4H10V6Z" fill="currentColor"/>
+export const FiatConvert = React.forwardRef<SVGSVGElement, FiatConvertProps>(
+  ({ 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 18"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M16.8154 7C18.2702 7.00009 19.61 7.50664 20.6367 8.35352L19.3633 9.89648C18.6925 9.34328 17.8026 9.00009 16.8154 9C15.7579 9 14.8267 9.38758 14.1484 10H17V12H13.0391C13.0131 12.164 13 12.331 13 12.5C13 12.669 13.0131 12.836 13.0391 13H17V15H14.1484C14.8267 15.6124 15.7579 16 16.8154 16C17.8026 15.9999 18.6925 15.6567 19.3633 15.1035L20.6367 16.6465C19.61 17.4934 18.2702 17.9999 16.8154 18C14.5902 18 12.6052 16.7992 11.6328 15H10V13H11.0244C11.0089 12.8356 11 12.6689 11 12.5C11 12.3311 11.0089 12.1644 11.0244 12H10V10H11.6328C12.6052 8.20078 14.5902 7 16.8154 7ZM20 6H18V2H2V14H8V16H0V0H20V6ZM10 6H4V4H10V6Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 FiatConvert.displayName = 'FiatConvert';

package/react/dist/FiatConvertOutline.tsx

@@ -1,20 +1,33 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface FiatConvertOutlineProps extends Omit<IconBaseProps, 'children'> {}
+export interface FiatConvertOutlineProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const FiatConvertOutline: React.FC<FiatConvertOutlineProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="21" height="18" viewBox="0 0 21 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8 15H1V1H19V6" stroke="currentColor" stroke-width="2"/>
-      <path d="M10 5L4 5" stroke="currentColor" stroke-width="2"/>
-      <path d="M17 11L10 11" stroke="currentColor" stroke-width="2"/>
-      <path d="M17 14L10 14" stroke="currentColor" stroke-width="2"/>
-      <path d="M20 9.125C19.1512 8.42484 18.0362 8 16.8151 8C14.1558 8 12 10.0147 12 12.5C12 14.9853 14.1558 17 16.8151 17C18.0362 17 19.1512 16.5752 20 15.875" stroke="currentColor" stroke-width="2"/>
+export const FiatConvertOutline = React.forwardRef<SVGSVGElement, FiatConvertOutlineProps>(
+  ({ 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 18"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M8 15H1V1H19V6" stroke="currentColor" strokeWidth="2"/>
+        <path d="M10 5L4 5" stroke="currentColor" strokeWidth="2"/>
+        <path d="M17 11L10 11" stroke="currentColor" strokeWidth="2"/>
+        <path d="M17 14L10 14" stroke="currentColor" strokeWidth="2"/>
+        <path d="M20 9.125C19.1512 8.42484 18.0362 8 16.8151 8C14.1558 8 12 10.0147 12 12.5C12 14.9853 14.1558 17 16.8151 17C18.0362 17 19.1512 16.5752 20 15.875" stroke="currentColor" strokeWidth="2"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 FiatConvertOutline.displayName = 'FiatConvertOutline';