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

package/react/dist/ShopOutline.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ShopOutlineProps extends Omit<IconBaseProps, 'children'> {}
+export interface ShopOutlineProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ShopOutline: React.FC<ShopOutlineProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="20" height="18" viewBox="0 0 20 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.95703 12V17H16.957V12" stroke="currentColor" stroke-width="2"/>
-      <path d="M0.957031 7.61656L0.325149 8.39163L-0.000194609 7.32722L0.957031 7.61656ZM6.95703 7.61656L6.25824 6.90124L6.84622 6.32685L7.52356 6.79252L6.95703 7.61656ZM12.957 7.61656L12.3905 6.79252L13.0678 6.3269L13.6557 6.90116L12.957 7.61656ZM18.957 7.61656L19.9143 7.32722L19.6003 8.38216L18.957 7.61656ZM16.957 1V0H17.6994L17.9143 0.710657L16.957 1ZM2.95703 1L1.99981 0.710657L2.21462 0H2.95703V1ZM0.957031 7.61656L1.58891 6.8415C2.07146 7.2349 2.78876 7.71871 3.59777 7.87057C4.3328 8.00855 5.24088 7.89509 6.25824 6.90124L6.95703 7.61656L7.65582 8.33189C6.17319 9.78026 4.60627 10.0948 3.22879 9.83624C1.9253 9.59156 0.892604 8.85425 0.325149 8.39163L0.957031 7.61656ZM12.957 7.61656L13.6557 6.90116C14.7152 7.93593 15.5704 8.07601 16.2299 7.97021C16.9703 7.85145 17.6713 7.39074 18.3137 6.85096L18.957 7.61656L19.6003 8.38216C18.8927 8.97677 17.8438 9.7369 16.5467 9.94497C15.1687 10.166 13.6988 9.7389 12.2583 8.33196L12.957 7.61656ZM6.95703 7.61656C7.52356 6.79252 7.52341 6.79242 7.52327 6.79232C7.52323 6.7923 7.5231 6.7922 7.52302 6.79215C7.52286 6.79204 7.52273 6.79195 7.52262 6.79188C7.52241 6.79173 7.52229 6.79165 7.52227 6.79164C7.52223 6.79161 7.52257 6.79184 7.52329 6.79233C7.52473 6.79331 7.52768 6.7953 7.53208 6.79824C7.54087 6.80413 7.55543 6.81379 7.57528 6.82669C7.61505 6.85251 7.67572 6.89111 7.75358 6.93821C7.91014 7.03293 8.13173 7.15936 8.38928 7.28502C8.93692 7.55222 9.51749 7.75094 9.95703 7.75094V8.75094V9.75094C9.04657 9.75094 8.12714 9.38247 7.51229 9.08249C7.18858 8.92455 6.91329 8.76738 6.7183 8.64941C6.62038 8.59017 6.54159 8.54014 6.48585 8.50393C6.45795 8.48581 6.43574 8.47109 6.41971 8.46036C6.41169 8.455 6.4052 8.45062 6.40032 8.4473C6.39788 8.44565 6.39583 8.44425 6.39419 8.44313C6.39337 8.44258 6.39266 8.44208 6.39204 8.44166C6.39173 8.44145 6.39145 8.44126 6.39119 8.44108C6.39107 8.44099 6.39089 8.44087 6.39083 8.44083C6.39066 8.44072 6.3905 8.44061 6.95703 7.61656ZM9.95703 8.75094V7.75094C10.3966 7.75094 10.9771 7.55222 11.5248 7.28502C11.7823 7.15936 12.0039 7.03293 12.1605 6.93821C12.2383 6.89111 12.299 6.85251 12.3388 6.82669C12.3586 6.81379 12.3732 6.80413 12.382 6.79824C12.3864 6.7953 12.3893 6.79331 12.3908 6.79233C12.3915 6.79184 12.3918 6.79161 12.3918 6.79164C12.3918 6.79165 12.3917 6.79173 12.3914 6.79188C12.3913 6.79195 12.3912 6.79204 12.391 6.79215C12.391 6.7922 12.3908 6.7923 12.3908 6.79232C12.3906 6.79242 12.3905 6.79252 12.957 7.61656C13.5236 8.44061 13.5234 8.44072 13.5232 8.44083C13.5232 8.44087 13.523 8.44099 13.5229 8.44108C13.5226 8.44126 13.5223 8.44145 13.522 8.44166C13.5214 8.44208 13.5207 8.44257 13.5199 8.44313C13.5182 8.44425 13.5162 8.44565 13.5137 8.4473C13.5089 8.45062 13.5024 8.455 13.4944 8.46036C13.4783 8.47109 13.4561 8.48581 13.4282 8.50393C13.3725 8.54014 13.2937 8.59017 13.1958 8.64941C13.0008 8.76738 12.7255 8.92455 12.4018 9.08249C11.7869 9.38247 10.8675 9.75094 9.95703 9.75094V8.75094ZM18.957 7.61656L17.9998 7.90591L15.9998 1.28934L16.957 1L17.9143 0.710657L19.9143 7.32722L18.957 7.61656ZM16.957 1V2H2.95703V1V0H16.957V1ZM2.95703 1L3.91426 1.28934L1.91426 7.90591L0.957031 7.61656L-0.000194609 7.32722L1.99981 0.710657L2.95703 1Z" fill="currentColor"/>
+export const ShopOutline = React.forwardRef<SVGSVGElement, ShopOutlineProps>(
+  ({ 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 18"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M2.95703 12V17H16.957V12" stroke="currentColor" strokeWidth="2"/>
+        <path d="M0.957031 7.61656L0.325149 8.39163L-0.000194609 7.32722L0.957031 7.61656ZM6.95703 7.61656L6.25824 6.90124L6.84622 6.32685L7.52356 6.79252L6.95703 7.61656ZM12.957 7.61656L12.3905 6.79252L13.0678 6.3269L13.6557 6.90116L12.957 7.61656ZM18.957 7.61656L19.9143 7.32722L19.6003 8.38216L18.957 7.61656ZM16.957 1V0H17.6994L17.9143 0.710657L16.957 1ZM2.95703 1L1.99981 0.710657L2.21462 0H2.95703V1ZM0.957031 7.61656L1.58891 6.8415C2.07146 7.2349 2.78876 7.71871 3.59777 7.87057C4.3328 8.00855 5.24088 7.89509 6.25824 6.90124L6.95703 7.61656L7.65582 8.33189C6.17319 9.78026 4.60627 10.0948 3.22879 9.83624C1.9253 9.59156 0.892604 8.85425 0.325149 8.39163L0.957031 7.61656ZM12.957 7.61656L13.6557 6.90116C14.7152 7.93593 15.5704 8.07601 16.2299 7.97021C16.9703 7.85145 17.6713 7.39074 18.3137 6.85096L18.957 7.61656L19.6003 8.38216C18.8927 8.97677 17.8438 9.7369 16.5467 9.94497C15.1687 10.166 13.6988 9.7389 12.2583 8.33196L12.957 7.61656ZM6.95703 7.61656C7.52356 6.79252 7.52341 6.79242 7.52327 6.79232C7.52323 6.7923 7.5231 6.7922 7.52302 6.79215C7.52286 6.79204 7.52273 6.79195 7.52262 6.79188C7.52241 6.79173 7.52229 6.79165 7.52227 6.79164C7.52223 6.79161 7.52257 6.79184 7.52329 6.79233C7.52473 6.79331 7.52768 6.7953 7.53208 6.79824C7.54087 6.80413 7.55543 6.81379 7.57528 6.82669C7.61505 6.85251 7.67572 6.89111 7.75358 6.93821C7.91014 7.03293 8.13173 7.15936 8.38928 7.28502C8.93692 7.55222 9.51749 7.75094 9.95703 7.75094V8.75094V9.75094C9.04657 9.75094 8.12714 9.38247 7.51229 9.08249C7.18858 8.92455 6.91329 8.76738 6.7183 8.64941C6.62038 8.59017 6.54159 8.54014 6.48585 8.50393C6.45795 8.48581 6.43574 8.47109 6.41971 8.46036C6.41169 8.455 6.4052 8.45062 6.40032 8.4473C6.39788 8.44565 6.39583 8.44425 6.39419 8.44313C6.39337 8.44258 6.39266 8.44208 6.39204 8.44166C6.39173 8.44145 6.39145 8.44126 6.39119 8.44108C6.39107 8.44099 6.39089 8.44087 6.39083 8.44083C6.39066 8.44072 6.3905 8.44061 6.95703 7.61656ZM9.95703 8.75094V7.75094C10.3966 7.75094 10.9771 7.55222 11.5248 7.28502C11.7823 7.15936 12.0039 7.03293 12.1605 6.93821C12.2383 6.89111 12.299 6.85251 12.3388 6.82669C12.3586 6.81379 12.3732 6.80413 12.382 6.79824C12.3864 6.7953 12.3893 6.79331 12.3908 6.79233C12.3915 6.79184 12.3918 6.79161 12.3918 6.79164C12.3918 6.79165 12.3917 6.79173 12.3914 6.79188C12.3913 6.79195 12.3912 6.79204 12.391 6.79215C12.391 6.7922 12.3908 6.7923 12.3908 6.79232C12.3906 6.79242 12.3905 6.79252 12.957 7.61656C13.5236 8.44061 13.5234 8.44072 13.5232 8.44083C13.5232 8.44087 13.523 8.44099 13.5229 8.44108C13.5226 8.44126 13.5223 8.44145 13.522 8.44166C13.5214 8.44208 13.5207 8.44257 13.5199 8.44313C13.5182 8.44425 13.5162 8.44565 13.5137 8.4473C13.5089 8.45062 13.5024 8.455 13.4944 8.46036C13.4783 8.47109 13.4561 8.48581 13.4282 8.50393C13.3725 8.54014 13.2937 8.59017 13.1958 8.64941C13.0008 8.76738 12.7255 8.92455 12.4018 9.08249C11.7869 9.38247 10.8675 9.75094 9.95703 9.75094V8.75094ZM18.957 7.61656L17.9998 7.90591L15.9998 1.28934L16.957 1L17.9143 0.710657L19.9143 7.32722L18.957 7.61656ZM16.957 1V2H2.95703V1V0H16.957V1ZM2.95703 1L3.91426 1.28934L1.91426 7.90591L0.957031 7.61656L-0.000194609 7.32722L1.99981 0.710657L2.95703 1Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ShopOutline.displayName = 'ShopOutline';

package/react/dist/Show.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ShowProps extends Omit<IconBaseProps, 'children'> {}
+export interface ShowProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Show: React.FC<ShowProps> = (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 5C14.8015 5 17.2705 6.34512 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C9.19846 19 6.72946 17.6549 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C7.80036 15.9445 9.83098 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C16.1996 8.05547 14.169 7 12 7ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z" fill="currentColor"/>
+export const Show = React.forwardRef<SVGSVGElement, ShowProps>(
+  ({ 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 5C14.8015 5 17.2705 6.34512 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C9.19846 19 6.72946 17.6549 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C7.80036 15.9445 9.83098 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C16.1996 8.05547 14.169 7 12 7ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Show.displayName = 'Show';

package/react/dist/Sidebar.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SidebarProps extends Omit<IconBaseProps, 'children'> {}
+export interface SidebarProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Sidebar: React.FC<SidebarProps> = (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 18H8V16H22V18ZM22 13H2V11H22V13ZM22 8H2V6H22V8Z" fill="currentColor"/>
+export const Sidebar = React.forwardRef<SVGSVGElement, SidebarProps>(
+  ({ 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 18H8V16H22V18ZM22 13H2V11H22V13ZM22 8H2V6H22V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Sidebar.displayName = 'Sidebar';

package/react/dist/SmartWallet.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SmartWalletProps extends Omit<IconBaseProps, 'children'> {}
+export interface SmartWalletProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const SmartWallet: React.FC<SmartWalletProps> = (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 6H19V19H5V6H11V3H13V6ZM4 16H2V9H4V16ZM22 16H20V9H22V16ZM8 14H10V11H8V14ZM14 14H16V11H14V14Z" fill="currentColor"/>
+export const SmartWallet = React.forwardRef<SVGSVGElement, SmartWalletProps>(
+  ({ 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 6H19V19H5V6H11V3H13V6ZM4 16H2V9H4V16ZM22 16H20V9H22V16ZM8 14H10V11H8V14ZM14 14H16V11H14V14Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 SmartWallet.displayName = 'SmartWallet';

package/react/dist/Spot.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SpotProps extends Omit<IconBaseProps, 'children'> {}
+export interface SpotProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Spot: React.FC<SpotProps> = (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.1562 21.625L14.5938 20.375L17.7939 16.375H1.875V14.375H21.9561L16.1562 21.625ZM9.40625 3.625L6.20605 7.625H22.125V9.625H2.04395L7.84375 2.375L9.40625 3.625Z" fill="currentColor"/>
+export const Spot = React.forwardRef<SVGSVGElement, SpotProps>(
+  ({ 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.1562 21.625L14.5938 20.375L17.7939 16.375H1.875V14.375H21.9561L16.1562 21.625ZM9.40625 3.625L6.20605 7.625H22.125V9.625H2.04395L7.84375 2.375L9.40625 3.625Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Spot.displayName = 'Spot';

package/react/dist/SpotDailyDraw.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SpotDailyDrawProps extends Omit<IconBaseProps, 'children'> {}
+export interface SpotDailyDrawProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const SpotDailyDraw: React.FC<SpotDailyDrawProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4004 6.59961L13.3994 8.12598C15.1249 8.56986 16.4004 10.136 16.4004 12C16.4004 14.209 14.6093 15.9997 12.4004 16C10.1913 16 8.40039 14.2091 8.40039 12C8.40039 10.1363 9.67441 8.57018 11.3994 8.12598V6.59961L12.4004 4.59961L13.4004 6.59961ZM12.4004 10C11.2958 10 10.4004 10.8954 10.4004 12C10.4004 13.1046 11.2958 14 12.4004 14C13.5047 13.9997 14.4004 13.1044 14.4004 12C14.4004 10.8956 13.5047 10.0003 12.4004 10Z" fill="currentColor"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4004 2C17.923 2.00026 22.4004 6.47732 22.4004 12C22.4004 17.5227 17.923 21.9997 12.4004 22C6.87754 22 2.39941 17.5228 2.39941 12C2.39941 6.47715 6.87754 2 12.4004 2ZM12.4004 4C7.98211 4 4.40039 7.58172 4.40039 12C4.40039 16.4183 7.98211 20 12.4004 20C16.8184 19.9997 20.4004 16.4181 20.4004 12C20.4004 7.58188 16.8184 4.00026 12.4004 4Z" fill="currentColor"/>
+export const SpotDailyDraw = React.forwardRef<SVGSVGElement, SpotDailyDrawProps>(
+  ({ 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 fillRule="evenodd" clipRule="evenodd" d="M13.4004 6.59961L13.3994 8.12598C15.1249 8.56986 16.4004 10.136 16.4004 12C16.4004 14.209 14.6093 15.9997 12.4004 16C10.1913 16 8.40039 14.2091 8.40039 12C8.40039 10.1363 9.67441 8.57018 11.3994 8.12598V6.59961L12.4004 4.59961L13.4004 6.59961ZM12.4004 10C11.2958 10 10.4004 10.8954 10.4004 12C10.4004 13.1046 11.2958 14 12.4004 14C13.5047 13.9997 14.4004 13.1044 14.4004 12C14.4004 10.8956 13.5047 10.0003 12.4004 10Z" fill="currentColor"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M12.4004 2C17.923 2.00026 22.4004 6.47732 22.4004 12C22.4004 17.5227 17.923 21.9997 12.4004 22C6.87754 22 2.39941 17.5228 2.39941 12C2.39941 6.47715 6.87754 2 12.4004 2ZM12.4004 4C7.98211 4 4.40039 7.58172 4.40039 12C4.40039 16.4183 7.98211 20 12.4004 20C16.8184 19.9997 20.4004 16.4181 20.4004 12C20.4004 7.58188 16.8184 4.00026 12.4004 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 SpotDailyDraw.displayName = 'SpotDailyDraw';

package/react/dist/StakeBmxToListing.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface StakeBmxToListingProps extends Omit<IconBaseProps, 'children'> {}
+export interface StakeBmxToListingProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const StakeBmxToListing: React.FC<StakeBmxToListingProps> = (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="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20V22C6.47715 22 2 17.5228 2 12ZM18.9951 15.8975C18.9438 15.3933 18.5177 15 18 15C17.4477 15 17 15.4477 17 16V17H19V16L18.9951 15.8975ZM16 20H20V19H16V20ZM16.5518 12.1377L12 16.6895L7.44824 12.1377L12 7.58594L16.5518 12.1377ZM10.2764 12.1377L12 13.8613L13.7236 12.1377L12 10.4141L10.2764 12.1377ZM21 17H22V22H14V17H15V16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16V17Z" fill="currentColor"/>
+export const StakeBmxToListing = React.forwardRef<SVGSVGElement, StakeBmxToListingProps>(
+  ({ 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="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20V22C6.47715 22 2 17.5228 2 12ZM18.9951 15.8975C18.9438 15.3933 18.5177 15 18 15C17.4477 15 17 15.4477 17 16V17H19V16L18.9951 15.8975ZM16 20H20V19H16V20ZM16.5518 12.1377L12 16.6895L7.44824 12.1377L12 7.58594L16.5518 12.1377ZM10.2764 12.1377L12 13.8613L13.7236 12.1377L12 10.4141L10.2764 12.1377ZM21 17H22V22H14V17H15V16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16V17Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 StakeBmxToListing.displayName = 'StakeBmxToListing';

package/react/dist/StakeToVote.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface StakeToVoteProps extends Omit<IconBaseProps, 'children'> {}
+export interface StakeToVoteProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const StakeToVote: React.FC<StakeToVoteProps> = (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.0918 9.77832L10.8701 21H20V23H4V21H10.6865L1.58594 11.8994L12.8994 0.585938L22.0918 9.77832ZM4.41406 11.8994L10.7783 18.2637L19.2637 9.77832L12.8994 3.41406L4.41406 11.8994ZM11.707 10.707L8.70703 13.707L7.29297 12.293L10.293 9.29297L11.707 10.707Z" fill="currentColor"/>
+export const StakeToVote = React.forwardRef<SVGSVGElement, StakeToVoteProps>(
+  ({ 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.0918 9.77832L10.8701 21H20V23H4V21H10.6865L1.58594 11.8994L12.8994 0.585938L22.0918 9.77832ZM4.41406 11.8994L10.7783 18.2637L19.2637 9.77832L12.8994 3.41406L4.41406 11.8994ZM11.707 10.707L8.70703 13.707L7.29297 12.293L10.293 9.29297L11.707 10.707Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 StakeToVote.displayName = 'StakeToVote';

package/react/dist/Staking.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface StakingProps extends Omit<IconBaseProps, 'children'> {}
+export interface StakingProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Staking: React.FC<StakingProps> = (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 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20V22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM17 17H19V16C19 15.4477 18.5523 15 18 15C17.4477 15 17 15.4477 17 16V17ZM16 20H20V19H16V20ZM16.5518 12.1377L12 16.6895L7.44824 12.1377L12 7.58594L16.5518 12.1377ZM10.2764 12.1377L12 13.8613L13.7236 12.1377L12 10.4141L10.2764 12.1377ZM21 17H22V22H14V17H15V16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16V17Z" fill="currentColor"/>
+export const Staking = React.forwardRef<SVGSVGElement, StakingProps>(
+  ({ 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 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20V22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM17 17H19V16C19 15.4477 18.5523 15 18 15C17.4477 15 17 15.4477 17 16V17ZM16 20H20V19H16V20ZM16.5518 12.1377L12 16.6895L7.44824 12.1377L12 7.58594L16.5518 12.1377ZM10.2764 12.1377L12 13.8613L13.7236 12.1377L12 10.4141L10.2764 12.1377ZM21 17H22V22H14V17H15V16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16V17Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Staking.displayName = 'Staking';

package/react/dist/Star.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface StarProps extends Omit<IconBaseProps, 'children'> {}
+export interface StarProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Star: React.FC<StarProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="22" height="21" viewBox="0 0 22 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M14.0703 7.16895L21.8594 7.94141L16.0117 13.1426L17.6846 20.7891L10.9297 16.835L4.1748 20.7891L5.84668 13.1426L0 7.94141L7.78809 7.16895L10.9297 0L14.0703 7.16895ZM9.15039 9.04395L4.73926 9.48047L8.05176 12.4277L7.10352 16.7568L10.9297 14.5186L14.7549 16.7568L13.8076 12.4277L17.1191 9.48047L12.709 9.04395L10.9297 4.9834L9.15039 9.04395Z" fill="currentColor"/>
+export const Star = React.forwardRef<SVGSVGElement, StarProps>(
+  ({ 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 22 21"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M14.0703 7.16895L21.8594 7.94141L16.0117 13.1426L17.6846 20.7891L10.9297 16.835L4.1748 20.7891L5.84668 13.1426L0 7.94141L7.78809 7.16895L10.9297 0L14.0703 7.16895ZM9.15039 9.04395L4.73926 9.48047L8.05176 12.4277L7.10352 16.7568L10.9297 14.5186L14.7549 16.7568L13.8076 12.4277L17.1191 9.48047L12.709 9.04395L10.9297 4.9834L9.15039 9.04395Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Star.displayName = 'Star';

package/react/dist/StarFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface StarFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface StarFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const StarFilled: React.FC<StarFilledProps> = (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 2.64062L14.8739 9.19243L22 9.89798L16.65 14.6528L18.1803 21.6406L12 18.0274L5.81966 21.6406L7.35 14.6528L2 9.89798L9.12614 9.19243L12 2.64062Z" fill="currentColor"/>
+export const StarFilled = React.forwardRef<SVGSVGElement, StarFilledProps>(
+  ({ 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 2.64062L14.8739 9.19243L22 9.89798L16.65 14.6528L18.1803 21.6406L12 18.0274L5.81966 21.6406L7.35 14.6528L2 9.89798L9.12614 9.19243L12 2.64062Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 StarFilled.displayName = 'StarFilled';

package/react/dist/Success.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SuccessProps extends Omit<IconBaseProps, 'children'> {}
+export interface SuccessProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Success: React.FC<SuccessProps> = (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 4ZM16.7373 9.67676L11.2197 15.6768L10.4834 16.4775L9.74805 15.6768L7.26465 12.9766L8.7373 11.623L10.4834 13.5225L15.2646 8.32324L16.7373 9.67676Z" fill="currentColor"/>
+export const Success = React.forwardRef<SVGSVGElement, SuccessProps>(
+  ({ 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 4ZM16.7373 9.67676L11.2197 15.6768L10.4834 16.4775L9.74805 15.6768L7.26465 12.9766L8.7373 11.623L10.4834 13.5225L15.2646 8.32324L16.7373 9.67676Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Success.displayName = 'Success';

package/react/dist/SuccessFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SuccessFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface SuccessFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const SuccessFilled: React.FC<SuccessFilledProps> = (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 2ZM10.8115 13.5684L8.66797 11.6445L7.33203 13.1328L10.2412 15.7441L11.0059 16.4307L11.6719 15.6475L16.7627 9.64746L15.2373 8.35254L10.8115 13.5684Z" fill="currentColor"/>
+export const SuccessFilled = React.forwardRef<SVGSVGElement, SuccessFilledProps>(
+  ({ 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 2ZM10.8115 13.5684L8.66797 11.6445L7.33203 13.1328L10.2412 15.7441L11.0059 16.4307L11.6719 15.6475L16.7627 9.64746L15.2373 8.35254L10.8115 13.5684Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 SuccessFilled.displayName = 'SuccessFilled';

package/react/dist/Support.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SupportProps extends Omit<IconBaseProps, 'children'> {}
+export interface SupportProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Support: React.FC<SupportProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+export const Support = React.forwardRef<SVGSVGElement, SupportProps>(
+  ({ 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="M6.50006 12H4.30005V16H6.50006V12Z" fill="currentColor"/>
-        <path d="M17.0085 12H20V15.02C20 15.56 19.6282 16 19.1718 16H17V12H17.0085Z" fill="currentColor"/>
-        <path d="M20 16V12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12V16" stroke="currentColor" stroke-width="2"/>
-        <path d="M14 21H15C17.7614 21 20 18.7614 20 16" stroke="currentColor" stroke-width="2"/>
+          <path d="M17.0085 12H20V15.02C20 15.56 19.6282 16 19.1718 16H17V12H17.0085Z" fill="currentColor"/>
+          <path d="M20 16V12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12V16" stroke="currentColor" strokeWidth="2"/>
+          <path d="M14 21H15C17.7614 21 20 18.7614 20 16" stroke="currentColor" strokeWidth="2"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Support.displayName = 'Support';