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

package/react/dist/Amm.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface AmmProps extends Omit<IconBaseProps, 'children'> {}
+export interface AmmProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Amm: React.FC<AmmProps> = (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 2ZM16.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"/>
-      <path d="M19 17H22V19H19V22H17V19H14V17H17V14H19V17Z" fill="currentColor"/>
+export const Amm = React.forwardRef<SVGSVGElement, AmmProps>(
+  ({ 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 2ZM16.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"/>
+        <path d="M19 17H22V19H19V22H17V19H14V17H17V14H19V17Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Amm.displayName = 'Amm';

package/react/dist/Apis.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ApisProps extends Omit<IconBaseProps, 'children'> {}
+export interface ApisProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Apis: React.FC<ApisProps> = (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.92893 5.92869C8.83418 2.02345 15.1663 2.02345 19.0715 5.92869C22.9768 9.83393 22.9768 16.166 19.0715 20.0713L18.3645 20.7783L14.5862 17C12.6449 18.2862 10.0037 18.0745 8.29319 16.3642L7.58616 15.6572L14.6574 8.58591L15.3645 9.29295C17.0747 11.0034 17.2863 13.6446 16.0002 15.5859L18.3176 17.9033C20.7599 14.7649 20.5421 10.2274 17.6574 7.34275C14.5333 4.21856 9.46719 4.21856 6.34299 7.34275C3.2188 10.4669 3.2188 15.533 6.34299 18.6572L4.92893 20.0713C1.02369 16.166 1.02369 9.83393 4.92893 5.92869ZM10.5373 15.5332C11.6522 16.0654 13.026 15.8732 13.9494 14.9502C14.8729 14.0267 15.0657 12.6521 14.5334 11.5371L10.5373 15.5332ZM9.70725 12.2929L8.29319 13.707L6.29319 11.707L7.70725 10.2929L9.70725 12.2929ZM12.7073 9.29295L11.2932 10.707L9.29319 8.70701L10.7073 7.29295L12.7073 9.29295Z" fill="currentColor"/>
+export const Apis = React.forwardRef<SVGSVGElement, ApisProps>(
+  ({ 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.92893 5.92869C8.83418 2.02345 15.1663 2.02345 19.0715 5.92869C22.9768 9.83393 22.9768 16.166 19.0715 20.0713L18.3645 20.7783L14.5862 17C12.6449 18.2862 10.0037 18.0745 8.29319 16.3642L7.58616 15.6572L14.6574 8.58591L15.3645 9.29295C17.0747 11.0034 17.2863 13.6446 16.0002 15.5859L18.3176 17.9033C20.7599 14.7649 20.5421 10.2274 17.6574 7.34275C14.5333 4.21856 9.46719 4.21856 6.34299 7.34275C3.2188 10.4669 3.2188 15.533 6.34299 18.6572L4.92893 20.0713C1.02369 16.166 1.02369 9.83393 4.92893 5.92869ZM10.5373 15.5332C11.6522 16.0654 13.026 15.8732 13.9494 14.9502C14.8729 14.0267 15.0657 12.6521 14.5334 11.5371L10.5373 15.5332ZM9.70725 12.2929L8.29319 13.707L6.29319 11.707L7.70725 10.2929L9.70725 12.2929ZM12.7073 9.29295L11.2932 10.707L9.29319 8.70701L10.7073 7.29295L12.7073 9.29295Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Apis.displayName = 'Apis';

package/react/dist/AppDownload.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface AppDownloadProps extends Omit<IconBaseProps, 'children'> {}
+export interface AppDownloadProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const AppDownload: React.FC<AppDownloadProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M18 18.5859L19.293 17.293L20.707 18.707L17 22.4141L13.293 18.707L14.707 17.293L16 18.5859V14H18V18.5859ZM18 12H16V4H6V20H12.5V22H4V2H18V12ZM14 8H8V6H14V8Z" fill="currentColor"/>
+export const AppDownload = React.forwardRef<SVGSVGElement, AppDownloadProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M18 18.5859L19.293 17.293L20.707 18.707L17 22.4141L13.293 18.707L14.707 17.293L16 18.5859V14H18V18.5859ZM18 12H16V4H6V20H12.5V22H4V2H18V12ZM14 8H8V6H14V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 AppDownload.displayName = 'AppDownload';

package/react/dist/Apple.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface AppleProps extends Omit<IconBaseProps, 'children'> {}
+export interface AppleProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Apple: React.FC<AppleProps> = (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="M20.109 16.4916C20.084 16.5666 19.6928 17.9203 18.7316 19.3127C17.8992 20.5138 17.038 21.725 15.6793 21.7463C14.3419 21.77 13.9144 20.9551 12.3883 20.9551C10.8646 20.9551 10.3859 21.725 9.12223 21.77C7.81606 21.8225 6.80987 20.4576 5.97617 19.2627C4.26753 16.8141 2.95386 12.3244 4.71625 9.31579C5.58495 7.80964 7.1436 6.85345 8.84099 6.82595C10.1209 6.8022 11.3383 7.68589 12.1158 7.68589C12.9145 7.68589 14.3869 6.61721 15.9405 6.7772C16.5905 6.8047 18.4104 7.04593 19.5828 8.73208C19.4916 8.79458 17.4055 10.0145 17.4292 12.4993C17.4605 15.4979 20.0815 16.4816 20.109 16.4916ZM14.9244 5.1698C15.6243 4.32235 16.0855 3.15743 15.9643 2C14.9644 2.03875 13.7444 2.65871 13.0207 3.50241C12.3795 4.23736 11.8158 5.42104 11.9733 6.56471C13.0845 6.63096 14.2269 5.98725 14.9231 5.1698" fill="#0F0F0F"/>
+export const Apple = React.forwardRef<SVGSVGElement, AppleProps>(
+  ({ 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="M20.109 16.4916C20.084 16.5666 19.6928 17.9203 18.7316 19.3127C17.8992 20.5138 17.038 21.725 15.6793 21.7463C14.3419 21.77 13.9144 20.9551 12.3883 20.9551C10.8646 20.9551 10.3859 21.725 9.12223 21.77C7.81606 21.8225 6.80987 20.4576 5.97617 19.2627C4.26753 16.8141 2.95386 12.3244 4.71625 9.31579C5.58495 7.80964 7.1436 6.85345 8.84099 6.82595C10.1209 6.8022 11.3383 7.68589 12.1158 7.68589C12.9145 7.68589 14.3869 6.61721 15.9405 6.7772C16.5905 6.8047 18.4104 7.04593 19.5828 8.73208C19.4916 8.79458 17.4055 10.0145 17.4292 12.4993C17.4605 15.4979 20.0815 16.4816 20.109 16.4916ZM14.9244 5.1698C15.6243 4.32235 16.0855 3.15743 15.9643 2C14.9644 2.03875 13.7444 2.65871 13.0207 3.50241C12.3795 4.23736 11.8158 5.42104 11.9733 6.56471C13.0845 6.63096 14.2269 5.98725 14.9231 5.1698" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Apple.displayName = 'Apple';

package/react/dist/ArrowLeft.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ArrowLeftProps extends Omit<IconBaseProps, 'children'> {}
+export interface ArrowLeftProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ArrowLeft: React.FC<ArrowLeftProps> = (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="M6.58594 12L14.293 19.707L15.707 18.293L9.41406 12L15.707 5.70703L14.293 4.29297L6.58594 12Z" fill="currentColor"/>
+export const ArrowLeft = React.forwardRef<SVGSVGElement, ArrowLeftProps>(
+  ({ 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.58594 12L14.293 19.707L15.707 18.293L9.41406 12L15.707 5.70703L14.293 4.29297L6.58594 12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ArrowLeft.displayName = 'ArrowLeft';

package/react/dist/ArrowRight.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ArrowRightProps extends Omit<IconBaseProps, 'children'> {}
+export interface ArrowRightProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ArrowRight: React.FC<ArrowRightProps> = (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.4141 12L9.70703 19.707L8.29297 18.293L14.5859 12L8.29297 5.70703L9.70703 4.29297L17.4141 12Z" fill="currentColor"/>
+export const ArrowRight = React.forwardRef<SVGSVGElement, ArrowRightProps>(
+  ({ 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.4141 12L9.70703 19.707L8.29297 18.293L14.5859 12L8.29297 5.70703L9.70703 4.29297L17.4141 12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ArrowRight.displayName = 'ArrowRight';

package/react/dist/ArrowRight2.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ArrowRight2Props extends Omit<IconBaseProps, 'children'> {}
+export interface ArrowRight2Props extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ArrowRight2: React.FC<ArrowRight2Props> = (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.4141 12L14.707 18.707L13.293 17.293L17.5859 13H3V11H17.5859L13.293 6.70703L14.707 5.29297L21.4141 12Z" fill="currentColor"/>
+export const ArrowRight2 = React.forwardRef<SVGSVGElement, ArrowRight2Props>(
+  ({ 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.4141 12L14.707 18.707L13.293 17.293L17.5859 13H3V11H17.5859L13.293 6.70703L14.707 5.29297L21.4141 12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ArrowRight2.displayName = 'ArrowRight2';

package/react/dist/Avatar.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface AvatarProps extends Omit<IconBaseProps, 'children'> {}
+export interface AvatarProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Avatar: React.FC<AvatarProps> = (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 Avatar = React.forwardRef<SVGSVGElement, AvatarProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
         <path d="M12 3C16.4183 3 20 6.58172 20 11C20 13.057 19.2216 14.9311 17.9473 16.3477C19.4609 16.8447 20.757 17.8463 21.623 19.1689C21.2033 19.7315 20.7336 20.254 20.2236 20.7344C19.3903 19.0949 17.6904 18.0002 15.7666 18H8.2334C6.30946 18.0002 4.60866 19.0947 3.77539 20.7344C3.26545 20.254 2.7957 19.7315 2.37598 19.1689C3.2419 17.8463 4.53808 16.8447 6.05176 16.3477C4.77764 14.9312 4 13.0568 4 11C4 6.58172 7.58172 3 12 3ZM12 5C8.68629 5 6 7.68629 6 11C6 13.0381 7.01543 14.8389 8.57227 15.9248C8.60578 15.9482 8.63725 15.9734 8.66699 16H15.333C15.3627 15.9734 15.3942 15.9482 15.4277 15.9248C16.9846 14.8389 18 13.0381 18 11C18 7.68629 15.3137 5 12 5ZM14.1543 8.00391C15.7394 8.08421 17 9.39489 17 11C17 12.6051 15.7394 13.9158 14.1543 13.9961L14 14H10C8.34315 14 7 12.6569 7 11C7 9.34315 8.34315 8 10 8H14L14.1543 8.00391ZM10 10C9.44772 10 9 10.4477 9 11C9 11.5523 9.44772 12 10 12H14C14.5523 12 15 11.5523 15 11C15 10.4477 14.5523 10 14 10H10Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Avatar.displayName = 'Avatar';

package/react/dist/BDT.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BDTProps extends Omit<IconBaseProps, 'children'> {}
+export interface BDTProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BDT: React.FC<BDTProps> = (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_3973)">
-      <circle cx="20" cy="20" r="20" fill="#2C6851"/>
-      <path d="M9.65341 13.509H20.5114V15.365H16.1682V26.7612H13.9966V15.365H9.65341V13.509ZM21.9078 13.2491H24.0237V20.9703L27.9585 17.1654H30.6869L26.4365 21.1374L31.0581 26.7612H28.3483L24.9888 22.4923L24.0237 23.4018V26.7612H21.9078V13.2491Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3973">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const BDT = React.forwardRef<SVGSVGElement, BDTProps>(
+  ({ 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_3973)">
+        <circle cx="20" cy="20" r="20" fill="#2C6851"/>
+        <path d="M9.65341 13.509H20.5114V15.365H16.1682V26.7612H13.9966V15.365H9.65341V13.509ZM21.9078 13.2491H24.0237V20.9703L27.9585 17.1654H30.6869L26.4365 21.1374L31.0581 26.7612H28.3483L24.9888 22.4923L24.0237 23.4018V26.7612H21.9078V13.2491Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3973">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BDT.displayName = 'BDT';

package/react/dist/BRL.tsx

@@ -1,25 +1,38 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BRLProps extends Omit<IconBaseProps, 'children'> {}
+export interface BRLProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BRL: React.FC<BRLProps> = (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_3948)">
-      <circle cx="20" cy="20" r="20" fill="#04913C"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 26.4187V13.0312H14.7125C16.0813 13.0312 17.1687 13.3313 17.9562 13.95C18.7812 14.625 19.2125 15.6 19.2125 16.875C19.2125 17.5687 19.025 18.1875 18.65 18.7312C18.2375 19.3312 17.6562 19.725 16.9437 19.9125V19.95C18.1062 20.2125 18.7625 20.9812 18.9125 22.2937L19.1375 24.45C19.2125 25.275 19.4937 25.9312 19.9438 26.4187H17.5625C17.2438 26.0063 17.0562 25.425 16.9812 24.675L16.8125 23.025C16.7375 22.2937 16.5125 21.7688 16.1375 21.45C15.7437 21.1125 15.1625 20.9625 14.4125 20.9625H10.9437V26.4187H8.75ZM14.4125 14.9063H10.9438V19.0876H14.4125C15.275 19.0876 15.9313 18.9001 16.3813 18.5438C16.7938 18.1688 17 17.6438 17 16.9688C17 16.2376 16.7938 15.7126 16.3813 15.3938C15.9688 15.0563 15.3125 14.9063 14.4125 14.9063Z" fill="white"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M25.4751 12.7875C24.3876 12.8625 23.5063 13.1437 22.7938 13.65C21.8376 14.3062 21.3688 15.2437 21.3688 16.4812C21.3688 17.8688 22.0063 18.9187 23.3188 19.6313L25.4751 20.4187V24.8063C24.8938 24.7313 24.4438 24.5438 24.1251 24.2438C23.6938 23.8313 23.4501 23.1188 23.3751 22.1438H21.2001C21.3126 23.6813 21.7626 24.825 22.5501 25.575C23.2251 26.2125 24.2001 26.5687 25.4751 26.6625V28.3125H26.7126V26.6625C27.8563 26.5875 28.7938 26.3062 29.5438 25.8187C30.5563 25.1437 31.0626 24.15 31.0626 22.8188C31.0626 21.45 30.4063 20.4 29.1126 19.6687C29.0001 19.5938 28.1938 19.2937 26.7126 18.75V14.625C27.1813 14.6813 27.5563 14.8125 27.8376 15.0188C28.2876 15.3375 28.5688 15.8812 28.6813 16.6687H30.8188C30.6313 15.3 30.1626 14.3063 29.3938 13.7062C28.7376 13.1813 27.8376 12.8625 26.7126 12.7875V11.25H25.4751V12.7875ZM26.7126 20.8687C26.7876 20.8874 26.8438 20.9062 26.9188 20.9437C28.2126 21.3937 28.8688 22.0499 28.8688 22.8937C28.8688 23.5124 28.6063 23.9999 28.0813 24.3374C27.7063 24.5812 27.2376 24.7312 26.7126 24.8062V20.8687ZM23.5626 16.4813C23.5626 17.1938 24.2001 17.7938 25.4751 18.2813V14.6063C24.9876 14.6626 24.5939 14.7938 24.3126 14.9813C23.8064 15.2813 23.5626 15.7876 23.5626 16.4813Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3948">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const BRL = React.forwardRef<SVGSVGElement, BRLProps>(
+  ({ 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_3948)">
+        <circle cx="20" cy="20" r="20" fill="#04913C"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M8.75 26.4187V13.0312H14.7125C16.0813 13.0312 17.1687 13.3313 17.9562 13.95C18.7812 14.625 19.2125 15.6 19.2125 16.875C19.2125 17.5687 19.025 18.1875 18.65 18.7312C18.2375 19.3312 17.6562 19.725 16.9437 19.9125V19.95C18.1062 20.2125 18.7625 20.9812 18.9125 22.2937L19.1375 24.45C19.2125 25.275 19.4937 25.9312 19.9438 26.4187H17.5625C17.2438 26.0063 17.0562 25.425 16.9812 24.675L16.8125 23.025C16.7375 22.2937 16.5125 21.7688 16.1375 21.45C15.7437 21.1125 15.1625 20.9625 14.4125 20.9625H10.9437V26.4187H8.75ZM14.4125 14.9063H10.9438V19.0876H14.4125C15.275 19.0876 15.9313 18.9001 16.3813 18.5438C16.7938 18.1688 17 17.6438 17 16.9688C17 16.2376 16.7938 15.7126 16.3813 15.3938C15.9688 15.0563 15.3125 14.9063 14.4125 14.9063Z" fill="white"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M25.4751 12.7875C24.3876 12.8625 23.5063 13.1437 22.7938 13.65C21.8376 14.3062 21.3688 15.2437 21.3688 16.4812C21.3688 17.8688 22.0063 18.9187 23.3188 19.6313L25.4751 20.4187V24.8063C24.8938 24.7313 24.4438 24.5438 24.1251 24.2438C23.6938 23.8313 23.4501 23.1188 23.3751 22.1438H21.2001C21.3126 23.6813 21.7626 24.825 22.5501 25.575C23.2251 26.2125 24.2001 26.5687 25.4751 26.6625V28.3125H26.7126V26.6625C27.8563 26.5875 28.7938 26.3062 29.5438 25.8187C30.5563 25.1437 31.0626 24.15 31.0626 22.8188C31.0626 21.45 30.4063 20.4 29.1126 19.6687C29.0001 19.5938 28.1938 19.2937 26.7126 18.75V14.625C27.1813 14.6813 27.5563 14.8125 27.8376 15.0188C28.2876 15.3375 28.5688 15.8812 28.6813 16.6687H30.8188C30.6313 15.3 30.1626 14.3063 29.3938 13.7062C28.7376 13.1813 27.8376 12.8625 26.7126 12.7875V11.25H25.4751V12.7875ZM26.7126 20.8687C26.7876 20.8874 26.8438 20.9062 26.9188 20.9437C28.2126 21.3937 28.8688 22.0499 28.8688 22.8937C28.8688 23.5124 28.6063 23.9999 28.0813 24.3374C27.7063 24.5812 27.2376 24.7312 26.7126 24.8062V20.8687ZM23.5626 16.4813C23.5626 17.1938 24.2001 17.7938 25.4751 18.2813V14.6063C24.9876 14.6626 24.5939 14.7938 24.3126 14.9813C23.8064 15.2813 23.5626 15.7876 23.5626 16.4813Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3948">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BRL.displayName = 'BRL';

package/react/dist/BYN.tsx

@@ -1,25 +1,38 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BYNProps extends Omit<IconBaseProps, 'children'> {}
+export interface BYNProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BYN: React.FC<BYNProps> = (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_3945)">
-      <circle cx="20" cy="20" r="20" fill="#D82004"/>
-      <path d="M11.85 13.755V26.25H17.555C18.885 26.25 19.9175 26.005 20.6525 25.515C21.51 24.92 21.9475 24.01 21.9475 22.75C21.9475 21.91 21.7375 21.2275 21.3175 20.72C20.8975 20.2125 20.2675 19.88 19.445 19.7225C20.075 19.495 20.5475 19.145 20.8975 18.69C21.2475 18.2 21.4225 17.605 21.4225 16.905C21.4225 15.9425 21.09 15.19 20.425 14.63C19.725 14.035 18.78 13.755 17.555 13.755H11.85ZM13.7575 15.33H17.0825C17.9225 15.33 18.5525 15.47 18.9375 15.7675C19.3225 16.0475 19.515 16.5025 19.515 17.1325C19.515 17.7975 19.3225 18.2875 18.9375 18.6025C18.5525 18.9 17.9225 19.0575 17.0475 19.0575H13.7575V15.33ZM13.7575 20.615H17.345C18.255 20.615 18.9375 20.7725 19.375 21.105C19.8125 21.4375 20.04 21.98 20.04 22.715C20.04 23.4325 19.7425 23.9575 19.1825 24.29C18.7275 24.535 18.0975 24.675 17.2925 24.675H13.7575V20.615Z" fill="white"/>
-      <path d="M27.8891 16.9575C27.3291 16.9575 26.8391 17.115 26.4191 17.465C26.0691 17.71 25.7716 18.0775 25.5441 18.5675V17.2025H23.6891V26.25H25.5441V21.455C25.5441 20.6675 25.7716 20.02 26.2441 19.53C26.6816 19.075 27.1891 18.8475 27.7491 18.8475C28.1691 18.8475 28.6066 18.9 29.0616 19.04V17.185C28.7466 17.0275 28.3441 16.9575 27.8891 16.9575Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3945">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const BYN = React.forwardRef<SVGSVGElement, BYNProps>(
+  ({ 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_3945)">
+        <circle cx="20" cy="20" r="20" fill="#D82004"/>
+        <path d="M11.85 13.755V26.25H17.555C18.885 26.25 19.9175 26.005 20.6525 25.515C21.51 24.92 21.9475 24.01 21.9475 22.75C21.9475 21.91 21.7375 21.2275 21.3175 20.72C20.8975 20.2125 20.2675 19.88 19.445 19.7225C20.075 19.495 20.5475 19.145 20.8975 18.69C21.2475 18.2 21.4225 17.605 21.4225 16.905C21.4225 15.9425 21.09 15.19 20.425 14.63C19.725 14.035 18.78 13.755 17.555 13.755H11.85ZM13.7575 15.33H17.0825C17.9225 15.33 18.5525 15.47 18.9375 15.7675C19.3225 16.0475 19.515 16.5025 19.515 17.1325C19.515 17.7975 19.3225 18.2875 18.9375 18.6025C18.5525 18.9 17.9225 19.0575 17.0475 19.0575H13.7575V15.33ZM13.7575 20.615H17.345C18.255 20.615 18.9375 20.7725 19.375 21.105C19.8125 21.4375 20.04 21.98 20.04 22.715C20.04 23.4325 19.7425 23.9575 19.1825 24.29C18.7275 24.535 18.0975 24.675 17.2925 24.675H13.7575V20.615Z" fill="white"/>
+        <path d="M27.8891 16.9575C27.3291 16.9575 26.8391 17.115 26.4191 17.465C26.0691 17.71 25.7716 18.0775 25.5441 18.5675V17.2025H23.6891V26.25H25.5441V21.455C25.5441 20.6675 25.7716 20.02 26.2441 19.53C26.6816 19.075 27.1891 18.8475 27.7491 18.8475C28.1691 18.8475 28.6066 18.9 29.0616 19.04V17.185C28.7466 17.0275 28.3441 16.9575 27.8891 16.9575Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3945">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BYN.displayName = 'BYN';

package/react/dist/Beacon.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BeaconProps extends Omit<IconBaseProps, 'children'> {}
+export interface BeaconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Beacon: React.FC<BeaconProps> = (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 19H6.30273L2 21.8682V3H22V19ZM4 18.1309L5.69727 17H20V5H4V18.1309ZM11 12H8V10H11V12ZM16 12H13V10H16V12Z" fill="currentColor"/>
+export const Beacon = React.forwardRef<SVGSVGElement, BeaconProps>(
+  ({ 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 19H6.30273L2 21.8682V3H22V19ZM4 18.1309L5.69727 17H20V5H4V18.1309ZM11 12H8V10H11V12ZM16 12H13V10H16V12Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Beacon.displayName = 'Beacon';

package/react/dist/BitmartCard.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface BitmartCardProps extends Omit<IconBaseProps, 'children'> {}
+export interface BitmartCardProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const BitmartCard: React.FC<BitmartCardProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+export const BitmartCard = React.forwardRef<SVGSVGElement, BitmartCardProps>(
+  ({ 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.7158 19.8447C17.1881 19.845 17.5712 20.2279 17.5713 20.7002C17.5713 21.1726 17.1881 21.5554 16.7158 21.5557C16.2434 21.5556 15.8604 21.1727 15.8604 20.7002C15.8604 20.2278 16.2434 19.8448 16.7158 19.8447ZM16.7158 16.4229C18.3809 16.4232 19.8225 17.3757 20.5293 18.7646L18.9609 20.333C18.7849 19.2504 17.8481 18.4233 16.7158 18.4229C15.622 18.4231 14.7079 19.1943 14.4883 20.2227L12.9443 18.6787C13.6658 17.3358 15.0847 16.423 16.7158 16.4229ZM22 12H20V6H4V18H10V20H2V4H22V12ZM17.1123 13.0098C19.5544 13.1338 21.6945 14.3972 23.0166 16.2773L21.5742 17.7197C20.5714 16.0885 18.7709 15.0002 16.7158 15C14.6941 15.0001 12.9183 16.0534 11.9062 17.6406L10.4668 16.2012C11.8652 14.2625 14.1431 13.0001 16.7158 13L17.1123 13.0098ZM12 10H6V8H12V10Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 BitmartCard.displayName = 'BitmartCard';