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

package/react/dist/PLN.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PLNProps extends Omit<IconBaseProps, 'children'> {}
+export interface PLNProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PLN: React.FC<PLNProps> = (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_3940)">
-      <circle cx="20" cy="20" r="20" fill="#DC123D"/>
-      <path d="M20.295 26.625H12.735V25.005L17.775 18.305H13.015V16.485H20.295V18.105L15.215 24.805H20.295V26.625ZM27.13 26.625H25.87C24.95 26.625 24.2567 26.365 23.79 25.845C23.3233 25.3117 23.09 24.6383 23.09 23.825V20.205L21.91 20.925V19.185L23.09 18.465V12.385H25.13V17.225L26.53 16.365V18.085L25.13 18.965V23.705C25.13 24.105 25.21 24.405 25.37 24.605C25.5433 24.7917 25.83 24.885 26.23 24.885H27.13V26.625Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3940">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const PLN = React.forwardRef<SVGSVGElement, PLNProps>(
+  ({ 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_3940)">
+        <circle cx="20" cy="20" r="20" fill="#DC123D"/>
+        <path d="M20.295 26.625H12.735V25.005L17.775 18.305H13.015V16.485H20.295V18.105L15.215 24.805H20.295V26.625ZM27.13 26.625H25.87C24.95 26.625 24.2567 26.365 23.79 25.845C23.3233 25.3117 23.09 24.6383 23.09 23.825V20.205L21.91 20.925V19.185L23.09 18.465V12.385H25.13V17.225L26.53 16.365V18.085L25.13 18.965V23.705C25.13 24.105 25.21 24.405 25.37 24.605C25.5433 24.7917 25.83 24.885 26.23 24.885H27.13V26.625Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3940">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PLN.displayName = 'PLN';

package/react/dist/Paste.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PasteProps extends Omit<IconBaseProps, 'children'> {}
+export interface PasteProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Paste: React.FC<PasteProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M22 22H6V6H22V22ZM8 20H20V8H8V20ZM4 16H2V12H4V16ZM4 10H2V6H4V10ZM4 4H2V2H4V4ZM11 4H6V2H11V4ZM17 4H13V2H17V4Z" fill="currentColor"/>
+export const Paste = React.forwardRef<SVGSVGElement, PasteProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M22 22H6V6H22V22ZM8 20H20V8H8V20ZM4 16H2V12H4V16ZM4 10H2V6H4V10ZM4 4H2V2H4V4ZM11 4H6V2H11V4ZM17 4H13V2H17V4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Paste.displayName = 'Paste';

package/react/dist/PlusFilled.tsx

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

package/react/dist/Powerdrop.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PowerdropProps extends Omit<IconBaseProps, 'children'> {}
+export interface PowerdropProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Powerdrop: React.FC<PowerdropProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M15.6006 22H8.40039V20H15.6006V22ZM12 2C17.4089 2 22 5.92196 22 11V11.335L21.7979 11.6025C20.5413 13.2671 19.0916 15.0394 17.7959 16.5713H19.2002V18.5713H4.7998V16.5713H6.1748C5.03164 15.2246 3.61453 13.476 2.20117 11.6016L2 11.335V11C2 5.92196 6.59113 2 12 2ZM17.9287 11.6035C16.904 11.5106 16.0018 11.7129 15.3896 12.2959L14.8242 12.835L14.165 12.416C14.1642 12.4155 14.1627 12.415 14.1611 12.4141C14.1553 12.4105 14.1447 12.4043 14.1299 12.3955C14.0999 12.3777 14.0523 12.3502 13.9902 12.3164C13.8653 12.2484 13.6839 12.1564 13.4668 12.0645C13.0159 11.8736 12.483 11.7148 12 11.7148C11.517 11.7148 10.9841 11.8736 10.5332 12.0645C10.3161 12.1564 10.1347 12.2484 10.0098 12.3164C9.94773 12.3502 9.9001 12.3777 9.87012 12.3955C9.85532 12.4043 9.84468 12.4105 9.83887 12.4141C9.83753 12.4149 9.8358 12.4145 9.83496 12.415L9.83594 12.416L9.2998 12.7559L8.76367 12.416C7.32872 11.505 5.94559 11.5401 4.89941 11.8291C6.42681 13.7877 7.86127 15.4954 8.82422 16.5713H15.1621C16.3358 15.2134 17.7632 13.5123 19.0918 11.8271C18.7277 11.7217 18.3324 11.6402 17.9287 11.6035ZM12 4C7.87998 4 4.63935 6.67859 4.08398 9.98926C5.44881 9.5518 7.32777 9.37696 9.31348 10.4268C9.44229 10.3628 9.58997 10.2921 9.75391 10.2227C10.3155 9.98496 11.133 9.71484 12 9.71484C12.867 9.71484 13.6845 9.98496 14.2461 10.2227C14.3728 10.2763 14.4894 10.3317 14.5957 10.3828C15.6865 9.65623 16.9811 9.50899 18.1094 9.61133C18.7386 9.66843 19.3538 9.80724 19.9141 9.98926C19.3587 6.67868 16.1199 4 12 4Z" fill="currentColor"/>
+export const Powerdrop = React.forwardRef<SVGSVGElement, PowerdropProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M15.6006 22H8.40039V20H15.6006V22ZM12 2C17.4089 2 22 5.92196 22 11V11.335L21.7979 11.6025C20.5413 13.2671 19.0916 15.0394 17.7959 16.5713H19.2002V18.5713H4.7998V16.5713H6.1748C5.03164 15.2246 3.61453 13.476 2.20117 11.6016L2 11.335V11C2 5.92196 6.59113 2 12 2ZM17.9287 11.6035C16.904 11.5106 16.0018 11.7129 15.3896 12.2959L14.8242 12.835L14.165 12.416C14.1642 12.4155 14.1627 12.415 14.1611 12.4141C14.1553 12.4105 14.1447 12.4043 14.1299 12.3955C14.0999 12.3777 14.0523 12.3502 13.9902 12.3164C13.8653 12.2484 13.6839 12.1564 13.4668 12.0645C13.0159 11.8736 12.483 11.7148 12 11.7148C11.517 11.7148 10.9841 11.8736 10.5332 12.0645C10.3161 12.1564 10.1347 12.2484 10.0098 12.3164C9.94773 12.3502 9.9001 12.3777 9.87012 12.3955C9.85532 12.4043 9.84468 12.4105 9.83887 12.4141C9.83753 12.4149 9.8358 12.4145 9.83496 12.415L9.83594 12.416L9.2998 12.7559L8.76367 12.416C7.32872 11.505 5.94559 11.5401 4.89941 11.8291C6.42681 13.7877 7.86127 15.4954 8.82422 16.5713H15.1621C16.3358 15.2134 17.7632 13.5123 19.0918 11.8271C18.7277 11.7217 18.3324 11.6402 17.9287 11.6035ZM12 4C7.87998 4 4.63935 6.67859 4.08398 9.98926C5.44881 9.5518 7.32777 9.37696 9.31348 10.4268C9.44229 10.3628 9.58997 10.2921 9.75391 10.2227C10.3155 9.98496 11.133 9.71484 12 9.71484C12.867 9.71484 13.6845 9.98496 14.2461 10.2227C14.3728 10.2763 14.4894 10.3317 14.5957 10.3828C15.6865 9.65623 16.9811 9.50899 18.1094 9.61133C18.7386 9.66843 19.3538 9.80724 19.9141 9.98926C19.3587 6.67868 16.1199 4 12 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Powerdrop.displayName = 'Powerdrop';

package/react/dist/PreMarket.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PreMarketProps extends Omit<IconBaseProps, 'children'> {}
+export interface PreMarketProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PreMarket: React.FC<PreMarketProps> = (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="M8 8H6V7H4V19H20V7H18V8H16V3H18V5H22V21H2V5H6V3H8V8ZM12.8945 9.44727L11.6182 12H15.6182L12.8945 17.4473L11.1055 16.5527L12.3818 14H8.38184L11.1055 8.55273L12.8945 9.44727ZM15 7H9V5H15V7Z" fill="currentColor"/>
+export const PreMarket = React.forwardRef<SVGSVGElement, PreMarketProps>(
+  ({ 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="M8 8H6V7H4V19H20V7H18V8H16V3H18V5H22V21H2V5H6V3H8V8ZM12.8945 9.44727L11.6182 12H15.6182L12.8945 17.4473L11.1055 16.5527L12.3818 14H8.38184L11.1055 8.55273L12.8945 9.44727ZM15 7H9V5H15V7Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PreMarket.displayName = 'PreMarket';

package/react/dist/PredictionMarket.tsx

@@ -1,20 +1,33 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PredictionMarketProps extends Omit<IconBaseProps, 'children'> {}
+export interface PredictionMarketProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PredictionMarket: React.FC<PredictionMarketProps> = (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.3662 16.7305L7.36621 21.9268L5.63379 20.9268L8.63379 15.7305L10.3662 16.7305Z" fill="currentColor"/>
-      <path d="M18.3662 20.9268L16.6338 21.9268L13.6338 16.7305L15.3662 15.7305L18.3662 20.9268Z" fill="currentColor"/>
-      <path d="M13.5 10.0859L15.707 7.87891L17.1211 9.29297L14.293 12.1211L14.291 12.1191L13.498 12.9121L10.5 9.91406L8.29297 12.1211L6.87891 10.707L9.70703 7.87891L9.70898 7.88086L10.502 7.08789L13.5 10.0859Z" fill="currentColor"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2ZM12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4Z" fill="currentColor"/>
-      <path d="M3 20H21V22H3V20Z" fill="currentColor"/>
+export const PredictionMarket = React.forwardRef<SVGSVGElement, PredictionMarketProps>(
+  ({ 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.3662 16.7305L7.36621 21.9268L5.63379 20.9268L8.63379 15.7305L10.3662 16.7305Z" fill="currentColor"/>
+        <path d="M18.3662 20.9268L16.6338 21.9268L13.6338 16.7305L15.3662 15.7305L18.3662 20.9268Z" fill="currentColor"/>
+        <path d="M13.5 10.0859L15.707 7.87891L17.1211 9.29297L14.293 12.1211L14.291 12.1191L13.498 12.9121L10.5 9.91406L8.29297 12.1211L6.87891 10.707L9.70703 7.87891L9.70898 7.88086L10.502 7.08789L13.5 10.0859Z" fill="currentColor"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2ZM12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4Z" fill="currentColor"/>
+        <path d="M3 20H21V22H3V20Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PredictionMarket.displayName = 'PredictionMarket';

package/react/dist/PrepaidCard.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PrepaidCardProps extends Omit<IconBaseProps, 'children'> {}
+export interface PrepaidCardProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PrepaidCard: React.FC<PrepaidCardProps> = (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 PrepaidCard = React.forwardRef<SVGSVGElement, PrepaidCardProps>(
+  ({ 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 20.0005H2V4.00049H22V20.0005ZM4 18.0005H20V10.8569H7V8.85693H20V6.00049H4V18.0005ZM17.8574 16.0005H13.8574V14.0005L17.8574 13.9995V16.0005Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PrepaidCard.displayName = 'PrepaidCard';

package/react/dist/ProgressFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ProgressFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface ProgressFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ProgressFilled: React.FC<ProgressFilledProps> = (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.5 7V14.1963L11.1318 14.4463L16.1318 16.4297L16.8682 14.5703L12.5 12.8379V7H10.5Z" fill="currentColor"/>
+export const ProgressFilled = React.forwardRef<SVGSVGElement, ProgressFilledProps>(
+  ({ 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.5 7V14.1963L11.1318 14.4463L16.1318 16.4297L16.8682 14.5703L12.5 12.8379V7H10.5Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ProgressFilled.displayName = 'ProgressFilled';

package/react/dist/QrCode.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface QrCodeProps extends Omit<IconBaseProps, 'children'> {}
+export interface QrCodeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const QrCode: React.FC<QrCodeProps> = (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="M11 21H3V13H11V21ZM15 21H13V19H15V21ZM21 21H18V19H19V17H21V21ZM5 19H9V15H5V19ZM8 18H6V16H8V18ZM18 18H16V16H18V18ZM17 15H15V17H13V13H17V15ZM21 15H19V13H21V15ZM11 11H3V3H11V11ZM21 11H13V3H21V11ZM5 9H9V5H5V9ZM15 9H19V5H15V9ZM8 8H6V6H8V8ZM18 8H16V6H18V8Z" fill="currentColor"/>
+export const QrCode = React.forwardRef<SVGSVGElement, QrCodeProps>(
+  ({ 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="M11 21H3V13H11V21ZM15 21H13V19H15V21ZM21 21H18V19H19V17H21V21ZM5 19H9V15H5V19ZM8 18H6V16H8V18ZM18 18H16V16H18V18ZM17 15H15V17H13V13H17V15ZM21 15H19V13H21V15ZM11 11H3V3H11V11ZM21 11H13V3H21V11ZM5 9H9V5H5V9ZM15 9H19V5H15V9ZM8 8H6V6H8V8ZM18 8H16V6H18V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 QrCode.displayName = 'QrCode';

package/react/dist/RON.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RONProps extends Omit<IconBaseProps, 'children'> {}
+export interface RONProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const RON: React.FC<RONProps> = (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_3937)">
-      <circle cx="20" cy="20" r="20" fill="#004890"/>
-      <path d="M14.35 26.625H13.09C12.17 26.625 11.4767 26.365 11.01 25.845C10.5433 25.3117 10.31 24.6383 10.31 23.825V12.385H12.35V23.705C12.35 24.105 12.43 24.405 12.59 24.605C12.7633 24.7917 13.05 24.885 13.45 24.885H14.35V26.625ZM24.1531 22.145H17.5731C17.5731 23.025 17.7931 23.7183 18.2331 24.225C18.6865 24.7317 19.3265 24.985 20.1531 24.985C20.6998 24.985 21.1531 24.905 21.5131 24.745C21.8731 24.585 22.2398 24.3183 22.6131 23.945L23.9131 25.165C23.3665 25.7117 22.8065 26.1117 22.2331 26.365C21.6731 26.6183 20.9665 26.745 20.1131 26.745C18.7265 26.745 17.6198 26.3317 16.7931 25.505C15.9665 24.6783 15.5531 23.3583 15.5531 21.545C15.5531 19.9183 15.9398 18.6517 16.7131 17.745C17.4865 16.825 18.5331 16.365 19.8531 16.365C21.1865 16.365 22.2331 16.8117 22.9931 17.705C23.7665 18.5983 24.1531 19.7783 24.1531 21.245V22.145ZM22.1331 20.725C22.1198 20.1917 22.0265 19.7317 21.8531 19.345C21.4931 18.4917 20.8265 18.065 19.8531 18.065C19.3865 18.065 18.9731 18.185 18.6131 18.425C18.2531 18.6517 17.9931 18.9583 17.8331 19.345C17.6731 19.705 17.5865 20.165 17.5731 20.725H22.1331ZM28.8944 26.625H26.8544V16.485H28.8944V26.625ZM28.9544 14.485H26.7944V12.325H28.9544V14.485Z" fill="#FDDF06"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3937">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const RON = React.forwardRef<SVGSVGElement, RONProps>(
+  ({ 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_3937)">
+        <circle cx="20" cy="20" r="20" fill="#004890"/>
+        <path d="M14.35 26.625H13.09C12.17 26.625 11.4767 26.365 11.01 25.845C10.5433 25.3117 10.31 24.6383 10.31 23.825V12.385H12.35V23.705C12.35 24.105 12.43 24.405 12.59 24.605C12.7633 24.7917 13.05 24.885 13.45 24.885H14.35V26.625ZM24.1531 22.145H17.5731C17.5731 23.025 17.7931 23.7183 18.2331 24.225C18.6865 24.7317 19.3265 24.985 20.1531 24.985C20.6998 24.985 21.1531 24.905 21.5131 24.745C21.8731 24.585 22.2398 24.3183 22.6131 23.945L23.9131 25.165C23.3665 25.7117 22.8065 26.1117 22.2331 26.365C21.6731 26.6183 20.9665 26.745 20.1131 26.745C18.7265 26.745 17.6198 26.3317 16.7931 25.505C15.9665 24.6783 15.5531 23.3583 15.5531 21.545C15.5531 19.9183 15.9398 18.6517 16.7131 17.745C17.4865 16.825 18.5331 16.365 19.8531 16.365C21.1865 16.365 22.2331 16.8117 22.9931 17.705C23.7665 18.5983 24.1531 19.7783 24.1531 21.245V22.145ZM22.1331 20.725C22.1198 20.1917 22.0265 19.7317 21.8531 19.345C21.4931 18.4917 20.8265 18.065 19.8531 18.065C19.3865 18.065 18.9731 18.185 18.6131 18.425C18.2531 18.6517 17.9931 18.9583 17.8331 19.345C17.6731 19.705 17.5865 20.165 17.5731 20.725H22.1331ZM28.8944 26.625H26.8544V16.485H28.8944V26.625ZM28.9544 14.485H26.7944V12.325H28.9544V14.485Z" fill="#FDDF06"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3937">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 RON.displayName = 'RON';

package/react/dist/RUB.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RUBProps extends Omit<IconBaseProps, 'children'> {}
+export interface RUBProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const RUB: React.FC<RUBProps> = (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_3963)">
-      <circle cx="20" cy="20" r="20" fill="#012168"/>
-      <path d="M14.56 24.6125H16.495V22.4525H14.56V20.8325H16.495V13.3175H21.5575C25.09 13.3175 26.98 15.2075 26.98 17.9075C26.98 20.5175 25.225 22.4525 21.5575 22.4525H18.5425V24.6125H23.4475V26.255H18.5425V29H16.495V26.255H14.56V24.6125ZM18.5425 14.9375V20.8325H21.5575C23.8075 20.8325 24.8875 19.73 24.8875 17.9075C24.8875 16.0175 23.83 14.9375 21.5575 14.9375H18.5425Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3963">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const RUB = React.forwardRef<SVGSVGElement, RUBProps>(
+  ({ 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_3963)">
+        <circle cx="20" cy="20" r="20" fill="#012168"/>
+        <path d="M14.56 24.6125H16.495V22.4525H14.56V20.8325H16.495V13.3175H21.5575C25.09 13.3175 26.98 15.2075 26.98 17.9075C26.98 20.5175 25.225 22.4525 21.5575 22.4525H18.5425V24.6125H23.4475V26.255H18.5425V29H16.495V26.255H14.56V24.6125ZM18.5425 14.9375V20.8325H21.5575C23.8075 20.8325 24.8875 19.73 24.8875 17.9075C24.8875 16.0175 23.83 14.9375 21.5575 14.9375H18.5425Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3963">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 RUB.displayName = 'RUB';

package/react/dist/Receive.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ReceiveProps extends Omit<IconBaseProps, 'children'> {}
+export interface ReceiveProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Receive: React.FC<ReceiveProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M20.6582 13.7529L12.6582 20.7529L12 21.3291L11.3418 20.7529L3.3418 13.7529L4.6582 12.2471L12 18.6709L19.3418 12.2471L20.6582 13.7529ZM13 14H11V2H13V14Z" fill="currentColor"/>
+export const Receive = React.forwardRef<SVGSVGElement, ReceiveProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M20.6582 13.7529L12.6582 20.7529L12 21.3291L11.3418 20.7529L3.3418 13.7529L4.6582 12.2471L12 18.6709L19.3418 12.2471L20.6582 13.7529ZM13 14H11V2H13V14Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Receive.displayName = 'Receive';

package/react/dist/Reddit.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface RedditProps extends Omit<IconBaseProps, 'children'> {}
+export interface RedditProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Reddit: React.FC<RedditProps> = (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="M18.876 3.25C19.9103 3.25023 20.75 4.0906 20.75 5.125C20.7498 6.15925 19.9102 6.99879 18.876 6.99902C18.0601 6.99902 17.3653 6.47513 17.1084 5.74609L14.2549 4.92285L12.7617 8.27344C14.4661 8.37757 16.032 8.83208 17.3164 9.5332C17.7434 8.76618 18.5594 8.24918 19.5 8.24902C20.8817 8.24902 22 9.36732 22 10.749C21.9964 11.766 21.3821 12.6444 20.5039 13.0332C20.6635 13.5017 20.747 13.991 20.7471 14.4941C20.7471 17.9449 16.8305 20.7432 11.998 20.7432C7.16565 20.7431 3.25 17.9449 3.25 14.4941C3.25005 13.9909 3.33353 13.5017 3.49316 13.0332C2.61484 12.6444 2 11.7692 2 10.7451C2.00006 9.36346 3.11833 8.24609 4.5 8.24609C5.44063 8.24625 6.25665 8.76316 6.68359 9.53027C7.94015 8.84304 9.46728 8.39196 11.1299 8.27734L13.1582 3.72559C13.3075 3.38548 13.6855 3.21228 14.043 3.31641L17.2227 4.23633C17.5386 3.64962 18.1608 3.25 18.876 3.25ZM15.6016 16.0391C15.3481 15.7166 14.8794 15.6608 14.5566 15.9141C14.0393 16.3202 13.0186 16.7578 11.998 16.7578C10.9775 16.7577 9.95318 16.3202 9.43945 15.9141C9.11668 15.6611 8.65179 15.7165 8.39844 16.0391C8.14504 16.3619 8.20068 16.8276 8.52344 17.0811C9.41554 17.7891 10.7797 18.2431 11.998 18.2432C13.2164 18.2432 14.5809 17.789 15.4766 17.0811C15.7993 16.8276 15.855 16.3584 15.6016 16.0391ZM8.24805 11.9951C7.91676 11.9952 7.59857 12.1262 7.36426 12.3604C7.13002 12.5946 6.99821 12.9129 6.99805 13.2441C6.99805 13.5754 7.13014 13.8936 7.36426 14.1279C7.59859 14.3623 7.91666 14.4941 8.24805 14.4941C8.57951 14.4941 8.89746 14.3623 9.13184 14.1279C9.36609 13.8936 9.49805 13.5755 9.49805 13.2441C9.49788 12.9129 9.36607 12.5946 9.13184 12.3604C8.8975 12.1262 8.57931 11.9951 8.24805 11.9951ZM15.7461 11.9951C15.4148 11.9951 15.0966 12.1262 14.8623 12.3604C14.6281 12.5946 14.4963 12.9129 14.4961 13.2441C14.4961 13.5755 14.6281 13.8936 14.8623 14.1279C15.0967 14.3623 15.4146 14.4941 15.7461 14.4941C16.0775 14.4941 16.3955 14.3623 16.6299 14.1279C16.864 13.8936 16.9961 13.5754 16.9961 13.2441C16.9959 12.9129 16.8641 12.5946 16.6299 12.3604C16.3956 12.1262 16.0774 11.9951 15.7461 11.9951ZM4.5 9.49512C3.80923 9.49512 3.25013 10.0544 3.25 10.7451C3.25009 11.2691 3.57624 11.7202 4.03418 11.9043C4.43341 11.276 4.97533 10.7064 5.62793 10.21C5.42997 9.78676 4.99615 9.4952 4.5 9.49512ZM19.4971 9.49512C19.0008 9.49512 18.5661 9.78665 18.3682 10.21C19.0207 10.7063 19.5627 11.2761 19.9619 11.9043C20.4201 11.7203 20.746 11.2692 20.7461 10.7451C20.746 10.0545 20.1877 9.49529 19.4971 9.49512Z" fill="#0F0F0F"/>
+export const Reddit = React.forwardRef<SVGSVGElement, RedditProps>(
+  ({ 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="M18.876 3.25C19.9103 3.25023 20.75 4.0906 20.75 5.125C20.7498 6.15925 19.9102 6.99879 18.876 6.99902C18.0601 6.99902 17.3653 6.47513 17.1084 5.74609L14.2549 4.92285L12.7617 8.27344C14.4661 8.37757 16.032 8.83208 17.3164 9.5332C17.7434 8.76618 18.5594 8.24918 19.5 8.24902C20.8817 8.24902 22 9.36732 22 10.749C21.9964 11.766 21.3821 12.6444 20.5039 13.0332C20.6635 13.5017 20.747 13.991 20.7471 14.4941C20.7471 17.9449 16.8305 20.7432 11.998 20.7432C7.16565 20.7431 3.25 17.9449 3.25 14.4941C3.25005 13.9909 3.33353 13.5017 3.49316 13.0332C2.61484 12.6444 2 11.7692 2 10.7451C2.00006 9.36346 3.11833 8.24609 4.5 8.24609C5.44063 8.24625 6.25665 8.76316 6.68359 9.53027C7.94015 8.84304 9.46728 8.39196 11.1299 8.27734L13.1582 3.72559C13.3075 3.38548 13.6855 3.21228 14.043 3.31641L17.2227 4.23633C17.5386 3.64962 18.1608 3.25 18.876 3.25ZM15.6016 16.0391C15.3481 15.7166 14.8794 15.6608 14.5566 15.9141C14.0393 16.3202 13.0186 16.7578 11.998 16.7578C10.9775 16.7577 9.95318 16.3202 9.43945 15.9141C9.11668 15.6611 8.65179 15.7165 8.39844 16.0391C8.14504 16.3619 8.20068 16.8276 8.52344 17.0811C9.41554 17.7891 10.7797 18.2431 11.998 18.2432C13.2164 18.2432 14.5809 17.789 15.4766 17.0811C15.7993 16.8276 15.855 16.3584 15.6016 16.0391ZM8.24805 11.9951C7.91676 11.9952 7.59857 12.1262 7.36426 12.3604C7.13002 12.5946 6.99821 12.9129 6.99805 13.2441C6.99805 13.5754 7.13014 13.8936 7.36426 14.1279C7.59859 14.3623 7.91666 14.4941 8.24805 14.4941C8.57951 14.4941 8.89746 14.3623 9.13184 14.1279C9.36609 13.8936 9.49805 13.5755 9.49805 13.2441C9.49788 12.9129 9.36607 12.5946 9.13184 12.3604C8.8975 12.1262 8.57931 11.9951 8.24805 11.9951ZM15.7461 11.9951C15.4148 11.9951 15.0966 12.1262 14.8623 12.3604C14.6281 12.5946 14.4963 12.9129 14.4961 13.2441C14.4961 13.5755 14.6281 13.8936 14.8623 14.1279C15.0967 14.3623 15.4146 14.4941 15.7461 14.4941C16.0775 14.4941 16.3955 14.3623 16.6299 14.1279C16.864 13.8936 16.9961 13.5754 16.9961 13.2441C16.9959 12.9129 16.8641 12.5946 16.6299 12.3604C16.3956 12.1262 16.0774 11.9951 15.7461 11.9951ZM4.5 9.49512C3.80923 9.49512 3.25013 10.0544 3.25 10.7451C3.25009 11.2691 3.57624 11.7202 4.03418 11.9043C4.43341 11.276 4.97533 10.7064 5.62793 10.21C5.42997 9.78676 4.99615 9.4952 4.5 9.49512ZM19.4971 9.49512C19.0008 9.49512 18.5661 9.78665 18.3682 10.21C19.0207 10.7063 19.5627 11.2761 19.9619 11.9043C20.4201 11.7203 20.746 11.2692 20.7461 10.7451C20.746 10.0545 20.1877 9.49529 19.4971 9.49512Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Reddit.displayName = 'Reddit';