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

package/react/dist/ReferralProgram.tsx

@@ -1,18 +1,31 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ReferralProgramProps extends Omit<IconBaseProps, 'children'> {}
+export interface ReferralProgramProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ReferralProgram: React.FC<ReferralProgramProps> = (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 22H20V14.3438L12 16.7441L4 14.3438V22H2V11.6562L12 14.6553L22 11.6562V22Z" fill="currentColor"/>
-      <path d="M19 11.5107L17 12.1113V6H7V12.1113L5 11.5107V4H19V11.5107Z" fill="currentColor"/>
-      <path d="M15 8V10H9V8H15Z" fill="currentColor"/>
+export const ReferralProgram = React.forwardRef<SVGSVGElement, ReferralProgramProps>(
+  ({ 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 22H20V14.3438L12 16.7441L4 14.3438V22H2V11.6562L12 14.6553L22 11.6562V22Z" fill="currentColor"/>
+        <path d="M19 11.5107L17 12.1113V6H7V12.1113L5 11.5107V4H19V11.5107Z" fill="currentColor"/>
+        <path d="M15 8V10H9V8H15Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ReferralProgram.displayName = 'ReferralProgram';

package/react/dist/RemoveFilled.tsx

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

package/react/dist/Replay.tsx

@@ -1,28 +1,41 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ReplayProps extends Omit<IconBaseProps, 'children'> {}
+export interface ReplayProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Replay: React.FC<ReplayProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_98109_6884)">
-      <mask id="mask0_98109_6884" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-      <rect width="24" height="24" fill="currentColor"/>
-      </mask>
-      <g mask="url(#mask0_98109_6884)">
-      <path d="M12 22C10.75 22 9.57917 21.7625 8.4875 21.2875C7.39583 20.8125 6.44583 20.1708 5.6375 19.3625C4.82917 18.5542 4.1875 17.6042 3.7125 16.5125C3.2375 15.4208 3 14.25 3 13H5C5 14.95 5.67917 16.6042 7.0375 17.9625C8.39583 19.3208 10.05 20 12 20C13.95 20 15.6042 19.3208 16.9625 17.9625C18.3208 16.6042 19 14.95 19 13C19 11.05 18.3208 9.39583 16.9625 8.0375C15.6042 6.67917 13.95 6 12 6H11.85L13.4 7.55L12 9L8 5L12 1L13.4 2.45L11.85 4H12C13.25 4 14.4208 4.2375 15.5125 4.7125C16.6042 5.1875 17.5542 5.82917 18.3625 6.6375C19.1708 7.44583 19.8125 8.39583 20.2875 9.4875C20.7625 10.5792 21 11.75 21 13C21 14.25 20.7625 15.4208 20.2875 16.5125C19.8125 17.6042 19.1708 18.5542 18.3625 19.3625C17.5542 20.1708 16.6042 20.8125 15.5125 21.2875C14.4208 21.7625 13.25 22 12 22Z" fill="currentColor"/>
-      </g>
-      </g>
-      <defs>
-      <clipPath id="clip0_98109_6884">
-      <rect width="24" height="24" fill="currentColor"/>
-      </clipPath>
-      </defs>
+export const Replay = React.forwardRef<SVGSVGElement, ReplayProps>(
+  ({ 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}
+      >
+        <g clipPath="url(#clip0_98109_6884)">
+        <mask id="mask0_98109_6884" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+        <rect width="24" height="24" fill="currentColor"/>
+        </mask>
+        <g mask="url(#mask0_98109_6884)">
+        <path d="M12 22C10.75 22 9.57917 21.7625 8.4875 21.2875C7.39583 20.8125 6.44583 20.1708 5.6375 19.3625C4.82917 18.5542 4.1875 17.6042 3.7125 16.5125C3.2375 15.4208 3 14.25 3 13H5C5 14.95 5.67917 16.6042 7.0375 17.9625C8.39583 19.3208 10.05 20 12 20C13.95 20 15.6042 19.3208 16.9625 17.9625C18.3208 16.6042 19 14.95 19 13C19 11.05 18.3208 9.39583 16.9625 8.0375C15.6042 6.67917 13.95 6 12 6H11.85L13.4 7.55L12 9L8 5L12 1L13.4 2.45L11.85 4H12C13.25 4 14.4208 4.2375 15.5125 4.7125C16.6042 5.1875 17.5542 5.82917 18.3625 6.6375C19.1708 7.44583 19.8125 8.39583 20.2875 9.4875C20.7625 10.5792 21 11.75 21 13C21 14.25 20.7625 15.4208 20.2875 16.5125C19.8125 17.6042 19.1708 18.5542 18.3625 19.3625C17.5542 20.1708 16.6042 20.8125 15.5125 21.2875C14.4208 21.7625 13.25 22 12 22Z" fill="currentColor"/>
+        </g>
+        </g>
+        <defs>
+        <clipPath id="clip0_98109_6884">
+        <rect width="24" height="24" fill="currentColor"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Replay.displayName = 'Replay';

package/react/dist/RewardsHub.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RewardsHubProps extends Omit<IconBaseProps, 'children'> {}
+export interface RewardsHubProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const RewardsHub: React.FC<RewardsHubProps> = (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.707 3.95703L13.6621 7.00195H22V9.00195H13V19H18V11H20V21H13V21.002H11V21H4V11H6V19H11V9.00195H2V7.00195H10.3379L7.29297 3.95703L8.70703 2.54297L12 5.83594L15.293 2.54297L16.707 3.95703Z" fill="currentColor"/>
+export const RewardsHub = React.forwardRef<SVGSVGElement, RewardsHubProps>(
+  ({ 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.707 3.95703L13.6621 7.00195H22V9.00195H13V19H18V11H20V21H13V21.002H11V21H4V11H6V19H11V9.00195H2V7.00195H10.3379L7.29297 3.95703L8.70703 2.54297L12 5.83594L15.293 2.54297L16.707 3.95703Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 RewardsHub.displayName = 'RewardsHub';

package/react/dist/Rocket.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RocketProps extends Omit<IconBaseProps, 'children'> {}
+export interface RocketProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Rocket: React.FC<RocketProps> = (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="M17.4922 2.25942C19.2579 1.76472 20.4478 2.09025 20.9669 2.31118C21.2257 2.4214 21.4544 2.60903 21.6114 2.86294L21.6749 2.97524L21.7725 3.1979C21.9972 3.77741 22.1693 4.78136 21.7149 6.20767C21.2253 7.7443 20.0197 9.73348 17.4473 12.234V17.86L17.0723 18.1598L13.7959 20.7809L12.6319 21.7126L12.2119 20.2809L11.0401 16.2809L12.96 15.7184L13.711 18.2858L15.4473 16.8981V11.3805L15.7598 11.0846C18.408 8.57576 19.4393 6.76256 19.8096 5.60025C20.0549 4.83021 20.0124 4.33387 19.9522 4.07583C19.6232 3.99379 18.9801 3.91932 18.0313 4.1852C16.7286 4.55032 14.7827 5.57696 12.2598 8.2399L11.9639 8.5524H7.10158L5.7129 10.2878L8.28127 11.0397L7.71877 12.9596L3.71875 11.7878L2.28711 11.3688L3.21875 10.2038L5.83985 6.9274L6.13966 6.5524H11.1114C13.6688 3.93093 15.8092 2.73106 17.4922 2.25942ZM11.7071 13.7067L4.70704 20.7067L3.29297 19.2927L10.293 12.2926L11.7071 13.7067Z" fill="currentColor"/>
+export const Rocket = React.forwardRef<SVGSVGElement, RocketProps>(
+  ({ 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="M17.4922 2.25942C19.2579 1.76472 20.4478 2.09025 20.9669 2.31118C21.2257 2.4214 21.4544 2.60903 21.6114 2.86294L21.6749 2.97524L21.7725 3.1979C21.9972 3.77741 22.1693 4.78136 21.7149 6.20767C21.2253 7.7443 20.0197 9.73348 17.4473 12.234V17.86L17.0723 18.1598L13.7959 20.7809L12.6319 21.7126L12.2119 20.2809L11.0401 16.2809L12.96 15.7184L13.711 18.2858L15.4473 16.8981V11.3805L15.7598 11.0846C18.408 8.57576 19.4393 6.76256 19.8096 5.60025C20.0549 4.83021 20.0124 4.33387 19.9522 4.07583C19.6232 3.99379 18.9801 3.91932 18.0313 4.1852C16.7286 4.55032 14.7827 5.57696 12.2598 8.2399L11.9639 8.5524H7.10158L5.7129 10.2878L8.28127 11.0397L7.71877 12.9596L3.71875 11.7878L2.28711 11.3688L3.21875 10.2038L5.83985 6.9274L6.13966 6.5524H11.1114C13.6688 3.93093 15.8092 2.73106 17.4922 2.25942ZM11.7071 13.7067L4.70704 20.7067L3.29297 19.2927L10.293 12.2926L11.7071 13.7067Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Rocket.displayName = 'Rocket';

package/react/dist/Rwa.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RwaProps extends Omit<IconBaseProps, 'children'> {}
+export interface RwaProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Rwa: React.FC<RwaProps> = (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 2ZM22.1104 17.1211L20.6963 18.5352L19.5752 17.4141V21.8018H17.5752V17.4131L16.4531 18.5352L15.0391 17.1211L18.5742 13.5859L22.1104 17.1211ZM16.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.1377Z" fill="currentColor"/>
+export const Rwa = React.forwardRef<SVGSVGElement, RwaProps>(
+  ({ 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 2ZM22.1104 17.1211L20.6963 18.5352L19.5752 17.4141V21.8018H17.5752V17.4131L16.4531 18.5352L15.0391 17.1211L18.5742 13.5859L22.1104 17.1211ZM16.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.1377Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Rwa.displayName = 'Rwa';

package/react/dist/SAR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SARProps extends Omit<IconBaseProps, 'children'> {}
+export interface SARProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const SAR: React.FC<SARProps> = (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_3954)">
-      <circle cx="20" cy="20" r="20" fill="#2D6A3B"/>
-      <path d="M11.3355 26.8815C10.5855 26.8815 9.93775 26.7159 9.3923 26.3847C8.85659 26.0535 8.44263 25.5909 8.15043 24.9967C7.85822 24.4026 7.71212 23.7062 7.71212 22.9075C7.71212 22.3328 7.77056 21.7533 7.88744 21.1689C8.01406 20.5844 8.18939 20.0633 8.41341 19.6056H10.0936C9.93775 20.0926 9.81599 20.6234 9.72833 21.1981C9.64067 21.7727 9.59684 22.3474 9.59684 22.9221C9.59684 23.6721 9.77216 24.2614 10.1228 24.6899C10.4735 25.1185 10.941 25.3328 11.5254 25.3328H12.066C12.8452 25.3328 13.4199 25.1331 13.79 24.7338C14.1601 24.3344 14.3452 23.7597 14.3452 23.0097V12.2712H16.2007V23.0097C16.2007 24.2954 15.8646 25.2597 15.1926 25.9026C14.5205 26.5552 13.4978 26.8815 12.1244 26.8815H11.3355ZM18.7283 12.2712H20.613V21.8263H24.2655V16.1868H26.1503V23.375H18.7283V12.2712ZM28.3418 26.8815C27.9327 26.8815 27.548 26.8279 27.1876 26.7207C26.8369 26.6233 26.4571 26.448 26.048 26.1948L26.7639 24.9237C26.9977 25.06 27.2071 25.1526 27.3921 25.2013C27.5869 25.2597 27.8061 25.2889 28.0496 25.2889C28.4489 25.2889 28.7704 25.1331 29.0139 24.8214C29.2574 24.5097 29.3791 24.1055 29.3791 23.6088V16.1868H31.2492V23.6526C31.2492 24.3149 31.1275 24.8847 30.884 25.362C30.6502 25.849 30.3142 26.224 29.8759 26.487C29.4473 26.75 28.936 26.8815 28.3418 26.8815ZM21.738 26.7792C21.4555 26.7792 21.2266 26.6915 21.0513 26.5162C20.8857 26.3506 20.8029 26.1071 20.8029 25.7857C20.8029 25.474 20.8857 25.2305 21.0513 25.0552C21.2169 24.8799 21.4458 24.7922 21.738 24.7922C22.0204 24.7922 22.2396 24.8799 22.3954 25.0552C22.561 25.2402 22.6438 25.4837 22.6438 25.7857C22.6438 26.0974 22.561 26.3409 22.3954 26.5162C22.2396 26.6915 22.0204 26.7792 21.738 26.7792ZM24.2363 26.7792C23.9636 26.7792 23.7396 26.6964 23.5642 26.5308C23.3889 26.3652 23.3013 26.1169 23.3013 25.7857C23.3013 25.4545 23.3841 25.2062 23.5496 25.0406C23.725 24.875 23.9539 24.7922 24.2363 24.7922C24.5188 24.7922 24.7379 24.8799 24.8938 25.0552C25.0594 25.2305 25.1422 25.474 25.1422 25.7857C25.1422 26.1071 25.0594 26.3506 24.8938 26.5162C24.7282 26.6915 24.509 26.7792 24.2363 26.7792Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3954">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const SAR = React.forwardRef<SVGSVGElement, SARProps>(
+  ({ 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_3954)">
+        <circle cx="20" cy="20" r="20" fill="#2D6A3B"/>
+        <path d="M11.3355 26.8815C10.5855 26.8815 9.93775 26.7159 9.3923 26.3847C8.85659 26.0535 8.44263 25.5909 8.15043 24.9967C7.85822 24.4026 7.71212 23.7062 7.71212 22.9075C7.71212 22.3328 7.77056 21.7533 7.88744 21.1689C8.01406 20.5844 8.18939 20.0633 8.41341 19.6056H10.0936C9.93775 20.0926 9.81599 20.6234 9.72833 21.1981C9.64067 21.7727 9.59684 22.3474 9.59684 22.9221C9.59684 23.6721 9.77216 24.2614 10.1228 24.6899C10.4735 25.1185 10.941 25.3328 11.5254 25.3328H12.066C12.8452 25.3328 13.4199 25.1331 13.79 24.7338C14.1601 24.3344 14.3452 23.7597 14.3452 23.0097V12.2712H16.2007V23.0097C16.2007 24.2954 15.8646 25.2597 15.1926 25.9026C14.5205 26.5552 13.4978 26.8815 12.1244 26.8815H11.3355ZM18.7283 12.2712H20.613V21.8263H24.2655V16.1868H26.1503V23.375H18.7283V12.2712ZM28.3418 26.8815C27.9327 26.8815 27.548 26.8279 27.1876 26.7207C26.8369 26.6233 26.4571 26.448 26.048 26.1948L26.7639 24.9237C26.9977 25.06 27.2071 25.1526 27.3921 25.2013C27.5869 25.2597 27.8061 25.2889 28.0496 25.2889C28.4489 25.2889 28.7704 25.1331 29.0139 24.8214C29.2574 24.5097 29.3791 24.1055 29.3791 23.6088V16.1868H31.2492V23.6526C31.2492 24.3149 31.1275 24.8847 30.884 25.362C30.6502 25.849 30.3142 26.224 29.8759 26.487C29.4473 26.75 28.936 26.8815 28.3418 26.8815ZM21.738 26.7792C21.4555 26.7792 21.2266 26.6915 21.0513 26.5162C20.8857 26.3506 20.8029 26.1071 20.8029 25.7857C20.8029 25.474 20.8857 25.2305 21.0513 25.0552C21.2169 24.8799 21.4458 24.7922 21.738 24.7922C22.0204 24.7922 22.2396 24.8799 22.3954 25.0552C22.561 25.2402 22.6438 25.4837 22.6438 25.7857C22.6438 26.0974 22.561 26.3409 22.3954 26.5162C22.2396 26.6915 22.0204 26.7792 21.738 26.7792ZM24.2363 26.7792C23.9636 26.7792 23.7396 26.6964 23.5642 26.5308C23.3889 26.3652 23.3013 26.1169 23.3013 25.7857C23.3013 25.4545 23.3841 25.2062 23.5496 25.0406C23.725 24.875 23.9539 24.7922 24.2363 24.7922C24.5188 24.7922 24.7379 24.8799 24.8938 25.0552C25.0594 25.2305 25.1422 25.474 25.1422 25.7857C25.1422 26.1071 25.0594 26.3506 24.8938 26.5162C24.7282 26.6915 24.509 26.7792 24.2363 26.7792Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3954">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 SAR.displayName = 'SAR';

package/react/dist/SEK.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SEKProps extends Omit<IconBaseProps, 'children'> {}
+export interface SEKProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const SEK: React.FC<SEKProps> = (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_3942)">
-      <circle cx="20" cy="20" r="20" fill="#006AA8"/>
-      <path d="M19.0825 13.38H21.6725L16.1775 18.735L22.495 25.875H19.73L14.795 20.0825L13.2725 21.57V25.875H11.225V13.38H13.2725V19.2775L19.0825 13.38ZM27.8127 16.5825C28.2502 16.5825 28.6352 16.6525 28.9502 16.81V18.805C28.4952 18.665 28.0752 18.6125 27.6552 18.6125C27.1302 18.6125 26.6577 18.805 26.2377 19.225C25.7477 19.6975 25.5202 20.31 25.5202 21.08V25.875H23.5427V16.8275H25.5202V18.1225C25.7652 17.6675 26.0452 17.3175 26.3777 17.0725C26.7802 16.74 27.2527 16.5825 27.8127 16.5825ZM31.4356 23.2325C31.8206 23.2325 32.1356 23.355 32.4156 23.635C32.6781 23.8975 32.8181 24.23 32.8181 24.615C32.8181 25 32.6781 25.315 32.4156 25.595C32.1356 25.84 31.8206 25.98 31.4356 25.98C31.0506 25.98 30.7181 25.84 30.4731 25.595C30.1931 25.315 30.0706 25 30.0706 24.615C30.0706 24.23 30.1931 23.8975 30.4731 23.635C30.7181 23.355 31.0506 23.2325 31.4356 23.2325Z" fill="#FFCC01"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3942">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const SEK = React.forwardRef<SVGSVGElement, SEKProps>(
+  ({ 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_3942)">
+        <circle cx="20" cy="20" r="20" fill="#006AA8"/>
+        <path d="M19.0825 13.38H21.6725L16.1775 18.735L22.495 25.875H19.73L14.795 20.0825L13.2725 21.57V25.875H11.225V13.38H13.2725V19.2775L19.0825 13.38ZM27.8127 16.5825C28.2502 16.5825 28.6352 16.6525 28.9502 16.81V18.805C28.4952 18.665 28.0752 18.6125 27.6552 18.6125C27.1302 18.6125 26.6577 18.805 26.2377 19.225C25.7477 19.6975 25.5202 20.31 25.5202 21.08V25.875H23.5427V16.8275H25.5202V18.1225C25.7652 17.6675 26.0452 17.3175 26.3777 17.0725C26.7802 16.74 27.2527 16.5825 27.8127 16.5825ZM31.4356 23.2325C31.8206 23.2325 32.1356 23.355 32.4156 23.635C32.6781 23.8975 32.8181 24.23 32.8181 24.615C32.8181 25 32.6781 25.315 32.4156 25.595C32.1356 25.84 31.8206 25.98 31.4356 25.98C31.0506 25.98 30.7181 25.84 30.4731 25.595C30.1931 25.315 30.0706 25 30.0706 24.615C30.0706 24.23 30.1931 23.8975 30.4731 23.635C30.7181 23.355 31.0506 23.2325 31.4356 23.2325Z" fill="#FFCC01"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3942">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 SEK.displayName = 'SEK';

package/react/dist/Scan.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ScanProps extends Omit<IconBaseProps, 'children'> {}
+export interface ScanProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Scan: React.FC<ScanProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5 19H9V21H3V15H5V19ZM21 21H15V19H19V15H21V21ZM18 13H6V11H18V13ZM9 5H5V9H3V3H9V5ZM21 9H19V5H15V3H21V9Z" fill="currentColor"/>
+export const Scan = React.forwardRef<SVGSVGElement, ScanProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M5 19H9V21H3V15H5V19ZM21 21H15V19H19V15H21V21ZM18 13H6V11H18V13ZM9 5H5V9H3V3H9V5ZM21 9H19V5H15V3H21V9Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Scan.displayName = 'Scan';

package/react/dist/Search.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SearchProps extends Omit<IconBaseProps, 'children'> {}
+export interface SearchProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Search: React.FC<SearchProps> = (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 2C14.4183 2 18 5.58172 18 10C18 11.8486 17.3703 13.5487 16.3174 14.9033L21.707 20.293L20.293 21.707L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" fill="currentColor"/>
+export const Search = React.forwardRef<SVGSVGElement, SearchProps>(
+  ({ 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 2C14.4183 2 18 5.58172 18 10C18 11.8486 17.3703 13.5487 16.3174 14.9033L21.707 20.293L20.293 21.707L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Search.displayName = 'Search';

package/react/dist/Send.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SendProps extends Omit<IconBaseProps, 'children'> {}
+export interface SendProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Send: React.FC<SendProps> = (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 22H11V10H13V22ZM12.6582 3.24707L20.6582 10.2471L19.3418 11.7529L12 5.3291L4.6582 11.7529L3.3418 10.2471L11.3418 3.24707L12 2.6709L12.6582 3.24707Z" fill="currentColor"/>
+export const Send = React.forwardRef<SVGSVGElement, SendProps>(
+  ({ 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 22H11V10H13V22ZM12.6582 3.24707L20.6582 10.2471L19.3418 11.7529L12 5.3291L4.6582 11.7529L3.3418 10.2471L11.3418 3.24707L12 2.6709L12.6582 3.24707Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Send.displayName = 'Send';

package/react/dist/Setting.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface SettingProps extends Omit<IconBaseProps, 'children'> {}
+export interface SettingProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Setting: React.FC<SettingProps> = (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="M17.3369 3.5293L21.8369 11.5293L22.1016 12L21.8369 12.4707L17.3369 20.4707L17.0615 20.96H6.93848L6.66309 20.4707L2.16309 12.4707L1.89844 12L2.16309 11.5293L6.66309 3.5293L6.93848 3.04004H17.0615L17.3369 3.5293ZM4.10254 12L8.0625 19.04H15.9385L17.9131 15.5293L19.8984 12L15.9385 4.95996H8.0625L4.10254 12ZM12 8.53613C13.1604 8.53613 14.2379 9.11643 14.8779 10.0723L15 10.2676C15.6188 11.3394 15.6188 12.6606 15 13.7324C14.3812 14.8041 13.2375 15.4639 12 15.4639L11.7695 15.4561C10.6218 15.3797 9.58022 14.7372 9 13.7324L8.8916 13.5283C8.41772 12.5649 8.41772 11.4351 8.8916 10.4717L9 10.2676C9.58022 9.26283 10.6218 8.62029 11.7695 8.54395L12 8.53613ZM12 10.4561C11.4485 10.4561 10.939 10.7501 10.6631 11.2275C10.3873 11.7053 10.3873 12.2947 10.6631 12.7725C10.939 13.2499 11.4485 13.5439 12 13.5439C12.5515 13.5439 13.061 13.2499 13.3369 12.7725C13.6127 12.2947 13.6127 11.7053 13.3369 11.2275C13.061 10.7501 12.5515 10.4561 12 10.4561Z" fill="currentColor"/>
+export const Setting = React.forwardRef<SVGSVGElement, SettingProps>(
+  ({ 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="M17.3369 3.5293L21.8369 11.5293L22.1016 12L21.8369 12.4707L17.3369 20.4707L17.0615 20.96H6.93848L6.66309 20.4707L2.16309 12.4707L1.89844 12L2.16309 11.5293L6.66309 3.5293L6.93848 3.04004H17.0615L17.3369 3.5293ZM4.10254 12L8.0625 19.04H15.9385L17.9131 15.5293L19.8984 12L15.9385 4.95996H8.0625L4.10254 12ZM12 8.53613C13.1604 8.53613 14.2379 9.11643 14.8779 10.0723L15 10.2676C15.6188 11.3394 15.6188 12.6606 15 13.7324C14.3812 14.8041 13.2375 15.4639 12 15.4639L11.7695 15.4561C10.6218 15.3797 9.58022 14.7372 9 13.7324L8.8916 13.5283C8.41772 12.5649 8.41772 11.4351 8.8916 10.4717L9 10.2676C9.58022 9.26283 10.6218 8.62029 11.7695 8.54395L12 8.53613ZM12 10.4561C11.4485 10.4561 10.939 10.7501 10.6631 11.2275C10.3873 11.7053 10.3873 12.2947 10.6631 12.7725C10.939 13.2499 11.4485 13.5439 12 13.5439C12.5515 13.5439 13.061 13.2499 13.3369 12.7725C13.6127 12.2947 13.6127 11.7053 13.3369 11.2275C13.061 10.7501 12.5515 10.4561 12 10.4561Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Setting.displayName = 'Setting';

package/react/dist/Shop.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ShopProps extends Omit<IconBaseProps, 'children'> {}
+export interface ShopProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Shop: React.FC<ShopProps> = (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="M3.95703 16H15.957V12H17.957V18H1.95703V12H3.95703V16ZM17.6992 0L17.9141 0.710938L19.9141 7.32715L19.6006 8.38184C18.893 8.97641 17.8439 9.73721 16.5469 9.94531C15.3559 10.1364 14.0967 9.84206 12.8467 8.85059C12.713 8.92435 12.5632 9.00309 12.4014 9.08203C11.7865 9.38201 10.8674 9.75098 9.95703 9.75098C9.04665 9.75098 8.12755 9.38201 7.5127 9.08203C7.34904 9.00218 7.19728 8.92312 7.0625 8.84863C5.76105 9.85309 4.42353 10.0603 3.22852 9.83594C1.92519 9.5912 0.892606 8.85419 0.325195 8.3916L0 7.32715L2 0.710938L2.21484 0H17.6992ZM3.69922 2L2.11816 7.23047C2.53888 7.50844 3.04664 7.76665 3.59766 7.87012C4.33261 8.00808 5.24056 7.89496 6.25781 6.90137L6.84668 6.32715L7.52246 6.79297L7.52344 6.79199C7.52487 6.79296 7.52787 6.79494 7.53223 6.79785C7.54102 6.80374 7.55534 6.81425 7.5752 6.82715C7.61496 6.85298 7.67614 6.89143 7.75391 6.93848C7.91045 7.03318 8.1323 7.1596 8.38965 7.28516C8.93719 7.55227 9.51758 7.75098 9.95703 7.75098C10.3965 7.75098 10.9769 7.55227 11.5244 7.28516C11.7818 7.1596 12.0036 7.03318 12.1602 6.93848C12.2379 6.89143 12.2991 6.85298 12.3389 6.82715C12.3587 6.81425 12.373 6.80374 12.3818 6.79785L12.3906 6.79199V6.79297L13.0674 6.32715L13.6553 6.90137C14.7146 7.93596 15.57 8.07543 16.2295 7.96973C16.7776 7.88181 17.3046 7.60705 17.8018 7.25098L16.2148 2H3.69922Z" fill="currentColor"/>
+export const Shop = React.forwardRef<SVGSVGElement, ShopProps>(
+  ({ 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="M3.95703 16H15.957V12H17.957V18H1.95703V12H3.95703V16ZM17.6992 0L17.9141 0.710938L19.9141 7.32715L19.6006 8.38184C18.893 8.97641 17.8439 9.73721 16.5469 9.94531C15.3559 10.1364 14.0967 9.84206 12.8467 8.85059C12.713 8.92435 12.5632 9.00309 12.4014 9.08203C11.7865 9.38201 10.8674 9.75098 9.95703 9.75098C9.04665 9.75098 8.12755 9.38201 7.5127 9.08203C7.34904 9.00218 7.19728 8.92312 7.0625 8.84863C5.76105 9.85309 4.42353 10.0603 3.22852 9.83594C1.92519 9.5912 0.892606 8.85419 0.325195 8.3916L0 7.32715L2 0.710938L2.21484 0H17.6992ZM3.69922 2L2.11816 7.23047C2.53888 7.50844 3.04664 7.76665 3.59766 7.87012C4.33261 8.00808 5.24056 7.89496 6.25781 6.90137L6.84668 6.32715L7.52246 6.79297L7.52344 6.79199C7.52487 6.79296 7.52787 6.79494 7.53223 6.79785C7.54102 6.80374 7.55534 6.81425 7.5752 6.82715C7.61496 6.85298 7.67614 6.89143 7.75391 6.93848C7.91045 7.03318 8.1323 7.1596 8.38965 7.28516C8.93719 7.55227 9.51758 7.75098 9.95703 7.75098C10.3965 7.75098 10.9769 7.55227 11.5244 7.28516C11.7818 7.1596 12.0036 7.03318 12.1602 6.93848C12.2379 6.89143 12.2991 6.85298 12.3389 6.82715C12.3587 6.81425 12.373 6.80374 12.3818 6.79785L12.3906 6.79199V6.79297L13.0674 6.32715L13.6553 6.90137C14.7146 7.93596 15.57 8.07543 16.2295 7.96973C16.7776 7.88181 17.3046 7.60705 17.8018 7.25098L16.2148 2H3.69922Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Shop.displayName = 'Shop';