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

package/react/dist/UZS.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface UZSProps extends Omit<IconBaseProps, 'children'> {}
+export interface UZSProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const UZS: React.FC<UZSProps> = (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_3968)">
-      <circle cx="20" cy="20" r="20" fill="#3094D8"/>
-      <path d="M10.525 14.7H19.225V27.625H16.575V16.875H12.825L11.65 23.8C11.4 25.25 10.85 26.275 10 26.9C9.325 27.375 8.475 27.625 7.45 27.625H6.125V25.45H7.025C7.525 25.45 7.925 25.3 8.25 25.05C8.625 24.7 8.9 24.15 9.05 23.375L10.525 14.7ZM22.2129 14.7H29.1129C30.3379 14.7 31.2879 14.925 31.9379 15.4C32.6879 15.925 33.0629 16.775 33.0629 17.925C33.0629 19.375 32.3129 20.325 30.8379 20.825C32.6379 21.4 33.5379 22.425 33.5379 23.875C33.5379 25.1 33.1379 26.025 32.3379 26.675C31.5379 27.3 30.3379 27.625 28.7379 27.625H22.2129V14.7ZM24.8629 16.75V19.975H28.4129C29.1129 19.975 29.6379 19.85 30.0379 19.625C30.4629 19.35 30.6879 18.925 30.6879 18.375C30.6879 17.275 29.9379 16.75 28.4629 16.75H24.8629ZM24.8629 22V25.55H28.4879C29.5129 25.55 30.2379 25.375 30.6379 25.05C30.9879 24.775 31.1629 24.325 31.1629 23.7C31.1629 22.55 30.2379 22 28.4129 22H24.8629Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3968">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const UZS = React.forwardRef<SVGSVGElement, UZSProps>(
+  ({ 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_3968)">
+        <circle cx="20" cy="20" r="20" fill="#3094D8"/>
+        <path d="M10.525 14.7H19.225V27.625H16.575V16.875H12.825L11.65 23.8C11.4 25.25 10.85 26.275 10 26.9C9.325 27.375 8.475 27.625 7.45 27.625H6.125V25.45H7.025C7.525 25.45 7.925 25.3 8.25 25.05C8.625 24.7 8.9 24.15 9.05 23.375L10.525 14.7ZM22.2129 14.7H29.1129C30.3379 14.7 31.2879 14.925 31.9379 15.4C32.6879 15.925 33.0629 16.775 33.0629 17.925C33.0629 19.375 32.3129 20.325 30.8379 20.825C32.6379 21.4 33.5379 22.425 33.5379 23.875C33.5379 25.1 33.1379 26.025 32.3379 26.675C31.5379 27.3 30.3379 27.625 28.7379 27.625H22.2129V14.7ZM24.8629 16.75V19.975H28.4129C29.1129 19.975 29.6379 19.85 30.0379 19.625C30.4629 19.35 30.6879 18.925 30.6879 18.375C30.6879 17.275 29.9379 16.75 28.4629 16.75H24.8629ZM24.8629 22V25.55H28.4879C29.5129 25.55 30.2379 25.375 30.6379 25.05C30.9879 24.775 31.1629 24.325 31.1629 23.7C31.1629 22.55 30.2379 22 28.4129 22H24.8629Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3968">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 UZS.displayName = 'UZS';

package/react/dist/Unfold.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface UnfoldProps extends Omit<IconBaseProps, 'children'> {}
+export interface UnfoldProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Unfold: React.FC<UnfoldProps> = (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="M19.707 9.70703L12 17.4141L4.29297 9.70703L5.70703 8.29297L12 14.5859L18.293 8.29297L19.707 9.70703Z" fill="currentColor"/>
+export const Unfold = React.forwardRef<SVGSVGElement, UnfoldProps>(
+  ({ 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="M19.707 9.70703L12 17.4141L4.29297 9.70703L5.70703 8.29297L12 14.5859L18.293 8.29297L19.707 9.70703Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Unfold.displayName = 'Unfold';

package/react/dist/Up.tsx

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

package/react/dist/VES.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface VESProps extends Omit<IconBaseProps, 'children'> {}
+export interface VESProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const VES: React.FC<VESProps> = (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_3965)">
-      <circle cx="20" cy="20" r="20" fill="#052179"/>
-      <path d="M9.975 14.63H15.6975C16.94 14.63 17.92 14.9275 18.62 15.5225C19.2675 16.0825 19.6 16.835 19.6 17.78C19.6 18.48 19.425 19.075 19.0925 19.565C18.76 20.02 18.2875 20.3525 17.6575 20.5975C18.48 20.755 19.0925 21.0875 19.5125 21.595C19.915 22.085 20.125 22.7675 20.125 23.6075C20.125 24.8675 19.6875 25.795 18.83 26.39C18.095 26.88 17.045 27.125 15.715 27.125H9.975V14.63ZM12.0225 16.31V19.88H15.155C16.03 19.88 16.6425 19.7225 17.01 19.4425C17.36 19.145 17.5525 18.6725 17.5525 18.025C17.5525 17.43 17.36 16.9925 17.01 16.73C16.625 16.45 16.03 16.31 15.19 16.31H12.0225ZM12.0225 21.56V25.445H15.4175C16.1875 25.445 16.8 25.3225 17.2375 25.0775C17.7975 24.7625 18.0775 24.2725 18.0775 23.5725C18.0775 22.855 17.8675 22.3475 17.465 22.0325C17.045 21.7175 16.38 21.56 15.47 21.56H12.0225ZM25.295 17.8325C27.675 17.8325 28.9875 18.7775 29.1975 20.7025H27.255C27.115 20.2475 26.905 19.915 26.625 19.74C26.3275 19.5475 25.8725 19.46 25.26 19.46C24.735 19.46 24.3325 19.53 24.07 19.6875C23.755 19.845 23.615 20.09 23.615 20.44C23.615 20.72 23.8425 20.9825 24.3325 21.1925C24.63 21.315 25.225 21.49 26.135 21.7175C27.15 21.9625 27.92 22.2425 28.41 22.575C29.1275 23.03 29.495 23.6775 29.495 24.4825C29.495 26.4075 28.13 27.37 25.4175 27.37C22.8975 27.37 21.55 26.3025 21.3575 24.185H23.3C23.405 24.7625 23.615 25.165 23.9125 25.41C24.21 25.62 24.6825 25.7425 25.3475 25.7425C26.7475 25.7425 27.4475 25.3575 27.4475 24.6225C27.4475 24.2025 27.185 23.87 26.66 23.625C26.38 23.485 25.785 23.3275 24.875 23.1175C23.8075 22.8725 23.055 22.61 22.6175 22.33C21.9175 21.8925 21.5675 21.28 21.5675 20.4925C21.5675 19.6525 21.9 19.005 22.6 18.55C23.2825 18.06 24.175 17.8325 25.295 17.8325Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3965">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const VES = React.forwardRef<SVGSVGElement, VESProps>(
+  ({ 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_3965)">
+        <circle cx="20" cy="20" r="20" fill="#052179"/>
+        <path d="M9.975 14.63H15.6975C16.94 14.63 17.92 14.9275 18.62 15.5225C19.2675 16.0825 19.6 16.835 19.6 17.78C19.6 18.48 19.425 19.075 19.0925 19.565C18.76 20.02 18.2875 20.3525 17.6575 20.5975C18.48 20.755 19.0925 21.0875 19.5125 21.595C19.915 22.085 20.125 22.7675 20.125 23.6075C20.125 24.8675 19.6875 25.795 18.83 26.39C18.095 26.88 17.045 27.125 15.715 27.125H9.975V14.63ZM12.0225 16.31V19.88H15.155C16.03 19.88 16.6425 19.7225 17.01 19.4425C17.36 19.145 17.5525 18.6725 17.5525 18.025C17.5525 17.43 17.36 16.9925 17.01 16.73C16.625 16.45 16.03 16.31 15.19 16.31H12.0225ZM12.0225 21.56V25.445H15.4175C16.1875 25.445 16.8 25.3225 17.2375 25.0775C17.7975 24.7625 18.0775 24.2725 18.0775 23.5725C18.0775 22.855 17.8675 22.3475 17.465 22.0325C17.045 21.7175 16.38 21.56 15.47 21.56H12.0225ZM25.295 17.8325C27.675 17.8325 28.9875 18.7775 29.1975 20.7025H27.255C27.115 20.2475 26.905 19.915 26.625 19.74C26.3275 19.5475 25.8725 19.46 25.26 19.46C24.735 19.46 24.3325 19.53 24.07 19.6875C23.755 19.845 23.615 20.09 23.615 20.44C23.615 20.72 23.8425 20.9825 24.3325 21.1925C24.63 21.315 25.225 21.49 26.135 21.7175C27.15 21.9625 27.92 22.2425 28.41 22.575C29.1275 23.03 29.495 23.6775 29.495 24.4825C29.495 26.4075 28.13 27.37 25.4175 27.37C22.8975 27.37 21.55 26.3025 21.3575 24.185H23.3C23.405 24.7625 23.615 25.165 23.9125 25.41C24.21 25.62 24.6825 25.7425 25.3475 25.7425C26.7475 25.7425 27.4475 25.3575 27.4475 24.6225C27.4475 24.2025 27.185 23.87 26.66 23.625C26.38 23.485 25.785 23.3275 24.875 23.1175C23.8075 22.8725 23.055 22.61 22.6175 22.33C21.9175 21.8925 21.5675 21.28 21.5675 20.4925C21.5675 19.6525 21.9 19.005 22.6 18.55C23.2825 18.06 24.175 17.8325 25.295 17.8325Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3965">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 VES.displayName = 'VES';

package/react/dist/VND.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface VNDProps extends Omit<IconBaseProps, 'children'> {}
+export interface VNDProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const VND: React.FC<VNDProps> = (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_3981)">
-      <circle cx="20" cy="20" r="20" fill="#DA251D"/>
-      <path d="M22.76 9.585H25.2775V11.4375H27.225V12.91H25.2775V26.875H22.9263V25.4025C22.0713 26.59 20.7888 27.2075 19.1263 27.2075C17.3213 27.2075 15.8963 26.5662 14.875 25.2837C13.925 24.0962 13.45 22.5525 13.45 20.6762C13.45 18.8712 13.9013 17.375 14.8513 16.1875C15.8488 14.905 17.2263 14.2637 19.0075 14.2637C20.5038 14.2637 21.7625 14.9762 22.76 16.425V12.91H18.7938V11.4375H22.76V9.585ZM19.5775 16.3062C18.3425 16.3062 17.4163 16.71 16.8225 17.565C16.3 18.2775 16.0388 19.3225 16.0388 20.6762C16.0388 22.03 16.2763 23.075 16.775 23.835C17.345 24.7137 18.2713 25.165 19.5063 25.165C20.5988 25.165 21.43 24.7137 22.0475 23.8587C22.57 23.0987 22.8313 22.0775 22.8313 20.8425V20.6287C22.8313 19.2987 22.4988 18.23 21.8813 17.4225C21.2638 16.6625 20.5038 16.3062 19.5775 16.3062ZM16.205 29.06H23.5438V30.58H16.205V29.06Z" fill="#FEFF03"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3981">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const VND = React.forwardRef<SVGSVGElement, VNDProps>(
+  ({ 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_3981)">
+        <circle cx="20" cy="20" r="20" fill="#DA251D"/>
+        <path d="M22.76 9.585H25.2775V11.4375H27.225V12.91H25.2775V26.875H22.9263V25.4025C22.0713 26.59 20.7888 27.2075 19.1263 27.2075C17.3213 27.2075 15.8963 26.5662 14.875 25.2837C13.925 24.0962 13.45 22.5525 13.45 20.6762C13.45 18.8712 13.9013 17.375 14.8513 16.1875C15.8488 14.905 17.2263 14.2637 19.0075 14.2637C20.5038 14.2637 21.7625 14.9762 22.76 16.425V12.91H18.7938V11.4375H22.76V9.585ZM19.5775 16.3062C18.3425 16.3062 17.4163 16.71 16.8225 17.565C16.3 18.2775 16.0388 19.3225 16.0388 20.6762C16.0388 22.03 16.2763 23.075 16.775 23.835C17.345 24.7137 18.2713 25.165 19.5063 25.165C20.5988 25.165 21.43 24.7137 22.0475 23.8587C22.57 23.0987 22.8313 22.0775 22.8313 20.8425V20.6287C22.8313 19.2987 22.4988 18.23 21.8813 17.4225C21.2638 16.6625 20.5038 16.3062 19.5775 16.3062ZM16.205 29.06H23.5438V30.58H16.205V29.06Z" fill="#FEFF03"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3981">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 VND.displayName = 'VND';

package/react/dist/Vip.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface VipProps extends Omit<IconBaseProps, 'children'> {}
+export interface VipProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Vip: React.FC<VipProps> = (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.0967 3L23.2773 10.9258L12 22.4287L0.722656 10.9258L5.90332 3H18.0967ZM3.27637 10.6729L12 19.5713L20.7227 10.6729L17.0146 5H6.98535L3.27637 10.6729ZM15.707 11.707L12 15.4141L8.29297 11.707L9.70703 10.293L12 12.5859L14.293 10.293L15.707 11.707Z" fill="currentColor"/>
+export const Vip = React.forwardRef<SVGSVGElement, VipProps>(
+  ({ 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.0967 3L23.2773 10.9258L12 22.4287L0.722656 10.9258L5.90332 3H18.0967ZM3.27637 10.6729L12 19.5713L20.7227 10.6729L17.0146 5H6.98535L3.27637 10.6729ZM15.707 11.707L12 15.4141L8.29297 11.707L9.70703 10.293L12 12.5859L14.293 10.293L15.707 11.707Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Vip.displayName = 'Vip';

package/react/dist/VipExclusive.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface VipExclusiveProps extends Omit<IconBaseProps, 'children'> {}
+export interface VipExclusiveProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const VipExclusive: React.FC<VipExclusiveProps> = (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="M23.2773 10.9258L12 22.4287L0.722656 10.9258L5.90332 3H18.0967L23.2773 10.9258ZM3.27637 10.6729L12 19.5713L20.7227 10.6729L17.0146 5H6.98535L3.27637 10.6729ZM15.707 11.707L12 15.4141L8.29297 11.707L9.70703 10.293L12 12.5859L14.293 10.293L15.707 11.707Z" fill="currentColor"/>
+export const VipExclusive = React.forwardRef<SVGSVGElement, VipExclusiveProps>(
+  ({ 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="M23.2773 10.9258L12 22.4287L0.722656 10.9258L5.90332 3H18.0967L23.2773 10.9258ZM3.27637 10.6729L12 19.5713L20.7227 10.6729L17.0146 5H6.98535L3.27637 10.6729ZM15.707 11.707L12 15.4141L8.29297 11.707L9.70703 10.293L12 12.5859L14.293 10.293L15.707 11.707Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 VipExclusive.displayName = 'VipExclusive';

package/react/dist/Vk.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface VkProps extends Omit<IconBaseProps, 'children'> {}
+export interface VkProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Vk: React.FC<VkProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.8 3C3.80589 3 3 3.80589 3 4.8V19.2C3 20.1941 3.80589 21 4.8 21H19.2C20.1941 21 21 20.1941 21 19.2V4.8C21 3.80589 20.1941 3 19.2 3H4.8ZM15.8141 15.4204L17.46 15.3956H17.4622C17.4622 15.3956 18.3195 15.3427 17.919 14.6677C17.9158 14.6628 17.9112 14.6547 17.905 14.6435C17.8406 14.5287 17.5919 14.0848 16.695 13.2514C16.2591 12.8483 16.032 12.6427 16.008 12.4156C15.9752 12.1041 16.3248 11.7523 17.0426 10.7944C17.7986 9.78525 18.1001 9.16987 18.0056 8.90662C17.9145 8.6535 17.3587 8.71987 17.3587 8.71987L15.5058 8.73C15.5058 8.73 15.3686 8.712 15.2662 8.77162C15.1672 8.83125 15.1042 8.97187 15.1042 8.97187C15.1042 8.97187 14.8095 9.7515 14.4191 10.4164C13.5922 11.8181 13.2626 11.8924 13.1287 11.8046C12.8664 11.6367 12.8787 11.1798 12.8895 10.7793C12.8916 10.7023 12.8936 10.6274 12.8936 10.557C12.8936 10.2429 12.9047 9.97125 12.9143 9.7373C12.9462 8.95975 12.9609 8.59916 12.4931 8.48587C12.2928 8.43975 12.141 8.40487 11.628 8.4015C10.9665 8.39475 10.4073 8.40487 10.0912 8.56012C9.8797 8.66475 9.71771 8.89312 9.81671 8.90775C9.93596 8.92237 10.2138 8.982 10.3612 9.18225C10.5502 9.43875 10.5435 10.0192 10.5435 10.0192C10.5435 10.0192 10.6526 11.619 10.2903 11.8159C10.0406 11.9497 9.69633 11.6719 8.96171 10.4029C8.58483 9.75262 8.3002 9.0315 8.3002 9.0315C8.3002 9.0315 8.24846 8.89537 8.14946 8.8245C8.03021 8.73675 7.86483 8.70862 7.86483 8.70862L6.10308 8.71875C6.10308 8.71875 5.83871 8.7255 5.74083 8.84137C5.65308 8.94262 5.73408 9.15412 5.73408 9.15412C5.73408 9.15412 7.11108 12.3772 8.67258 14.0017C10.1036 15.4935 11.7281 15.3945 11.7281 15.3945H12.4627C12.4627 15.3945 12.6877 15.3697 12.8002 15.2471C12.906 15.1357 12.9026 14.9242 12.9026 14.9242C12.9026 14.9242 12.8891 13.9365 13.3458 13.7925C13.6199 13.7054 13.9405 14.0732 14.2872 14.4708C14.5139 14.7309 14.7518 15.0038 14.9951 15.1706C15.4586 15.4912 15.8141 15.4204 15.8141 15.4204Z" fill="#0F0F0F"/>
+export const Vk = React.forwardRef<SVGSVGElement, VkProps>(
+  ({ 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 fillRule="evenodd" clipRule="evenodd" d="M4.8 3C3.80589 3 3 3.80589 3 4.8V19.2C3 20.1941 3.80589 21 4.8 21H19.2C20.1941 21 21 20.1941 21 19.2V4.8C21 3.80589 20.1941 3 19.2 3H4.8ZM15.8141 15.4204L17.46 15.3956H17.4622C17.4622 15.3956 18.3195 15.3427 17.919 14.6677C17.9158 14.6628 17.9112 14.6547 17.905 14.6435C17.8406 14.5287 17.5919 14.0848 16.695 13.2514C16.2591 12.8483 16.032 12.6427 16.008 12.4156C15.9752 12.1041 16.3248 11.7523 17.0426 10.7944C17.7986 9.78525 18.1001 9.16987 18.0056 8.90662C17.9145 8.6535 17.3587 8.71987 17.3587 8.71987L15.5058 8.73C15.5058 8.73 15.3686 8.712 15.2662 8.77162C15.1672 8.83125 15.1042 8.97187 15.1042 8.97187C15.1042 8.97187 14.8095 9.7515 14.4191 10.4164C13.5922 11.8181 13.2626 11.8924 13.1287 11.8046C12.8664 11.6367 12.8787 11.1798 12.8895 10.7793C12.8916 10.7023 12.8936 10.6274 12.8936 10.557C12.8936 10.2429 12.9047 9.97125 12.9143 9.7373C12.9462 8.95975 12.9609 8.59916 12.4931 8.48587C12.2928 8.43975 12.141 8.40487 11.628 8.4015C10.9665 8.39475 10.4073 8.40487 10.0912 8.56012C9.8797 8.66475 9.71771 8.89312 9.81671 8.90775C9.93596 8.92237 10.2138 8.982 10.3612 9.18225C10.5502 9.43875 10.5435 10.0192 10.5435 10.0192C10.5435 10.0192 10.6526 11.619 10.2903 11.8159C10.0406 11.9497 9.69633 11.6719 8.96171 10.4029C8.58483 9.75262 8.3002 9.0315 8.3002 9.0315C8.3002 9.0315 8.24846 8.89537 8.14946 8.8245C8.03021 8.73675 7.86483 8.70862 7.86483 8.70862L6.10308 8.71875C6.10308 8.71875 5.83871 8.7255 5.74083 8.84137C5.65308 8.94262 5.73408 9.15412 5.73408 9.15412C5.73408 9.15412 7.11108 12.3772 8.67258 14.0017C10.1036 15.4935 11.7281 15.3945 11.7281 15.3945H12.4627C12.4627 15.3945 12.6877 15.3697 12.8002 15.2471C12.906 15.1357 12.9026 14.9242 12.9026 14.9242C12.9026 14.9242 12.8891 13.9365 13.3458 13.7925C13.6199 13.7054 13.9405 14.0732 14.2872 14.4708C14.5139 14.7309 14.7518 15.0038 14.9951 15.1706C15.4586 15.4912 15.8141 15.4204 15.8141 15.4204Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Vk.displayName = 'Vk';

package/react/dist/Wallet.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface WalletProps extends Omit<IconBaseProps, 'children'> {}
+export interface WalletProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Wallet: React.FC<WalletProps> = (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 21H2V6H22V21ZM4 19H20V8H4V19ZM18 14H14V12H18V14ZM16 4H4V2H16V4Z" fill="currentColor"/>
+export const Wallet = React.forwardRef<SVGSVGElement, WalletProps>(
+  ({ 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 21H2V6H22V21ZM4 19H20V8H4V19ZM18 14H14V12H18V14ZM16 4H4V2H16V4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Wallet.displayName = 'Wallet';

package/react/dist/WarningFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface WarningFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface WarningFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const WarningFilled: React.FC<WarningFilledProps> = (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.8887 17.5557H13.1113V15.333H10.8887V17.5557ZM10.8887 14.2227H13.1113V7.55566H10.8887V14.2227Z" fill="currentColor"/>
+export const WarningFilled = React.forwardRef<SVGSVGElement, WarningFilledProps>(
+  ({ 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.8887 17.5557H13.1113V15.333H10.8887V17.5557ZM10.8887 14.2227H13.1113V7.55566H10.8887V14.2227Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 WarningFilled.displayName = 'WarningFilled';

package/react/dist/WealthManagement.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface WealthManagementProps extends Omit<IconBaseProps, 'children'> {}
+export interface WealthManagementProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const WealthManagement: React.FC<WealthManagementProps> = (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 16H6V22H4V14H8V16ZM13 12H11V22H9V10H13V12ZM21 22H19V8H16V22H14V6H21V22ZM10 8H8V6.41406L4.89746 9.5166L3.4834 8.10254L6.58594 5H5V3H10V8Z" fill="currentColor"/>
+export const WealthManagement = React.forwardRef<SVGSVGElement, WealthManagementProps>(
+  ({ 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 16H6V22H4V14H8V16ZM13 12H11V22H9V10H13V12ZM21 22H19V8H16V22H14V6H21V22ZM10 8H8V6.41406L4.89746 9.5166L3.4834 8.10254L6.58594 5H5V3H10V8Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 WealthManagement.displayName = 'WealthManagement';

package/react/dist/Whatsapp.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface WhatsappProps extends Omit<IconBaseProps, 'children'> {}
+export interface WhatsappProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Whatsapp: React.FC<WhatsappProps> = (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="M11.9971 2.21213C10.1941 2.2127 8.42622 2.71127 6.88858 3.65286C5.35095 4.59445 4.10328 5.94247 3.2832 7.5482C2.46312 9.15393 2.10251 10.955 2.24114 12.7527C2.37977 14.5504 3.01226 16.2748 4.06883 17.7358L3.18791 20.4177C3.15824 20.5035 3.15353 20.596 3.17432 20.6844C3.19511 20.7727 3.24056 20.8534 3.30537 20.9169C3.36914 20.9815 3.44932 21.0275 3.53728 21.0499C3.62524 21.0723 3.71764 21.0704 3.80456 21.0442L6.59413 20.1437C7.86639 20.992 9.31971 21.5305 10.8376 21.7158C12.3555 21.9012 13.8957 21.7284 15.3347 21.2112C16.7737 20.694 18.0716 19.8468 19.1242 18.7376C20.1768 17.6284 20.9548 16.288 21.396 14.8239C21.8371 13.3597 21.9291 11.8126 21.6645 10.3065C21.4 8.80043 20.7862 7.37728 19.8724 6.15117C18.9587 4.92506 17.7703 3.93009 16.4027 3.24605C15.0351 2.562 13.5262 2.2079 11.9971 2.21213ZM17.6937 16.0327C17.4926 16.3955 17.212 16.7081 16.873 16.9471C16.534 17.1861 16.1453 17.3453 15.7361 17.4128C15.2271 17.5205 14.5517 17.6086 12.3103 16.6787C10.3176 15.7151 8.6255 14.2261 7.41632 12.372C6.75279 11.5262 6.34826 10.5064 6.25155 9.43565C6.23628 8.99096 6.31565 8.54809 6.48438 8.13637C6.65312 7.72465 6.90739 7.35347 7.23034 7.04739C7.5022 6.81361 7.85065 6.68816 8.20914 6.69502H8.53214C8.81599 6.69502 8.96281 6.69502 9.15857 7.17463C9.35433 7.65424 9.96119 9.13223 10.0297 9.28883C10.0811 9.36594 10.1125 9.45463 10.1211 9.54691C10.1296 9.63919 10.115 9.73215 10.0786 9.81738C9.99471 9.98315 9.88577 10.135 9.75564 10.2676C9.61861 10.434 9.47179 10.5613 9.33476 10.7375C9.24073 10.8063 9.17631 10.9082 9.15451 11.0226C9.13271 11.1371 9.15515 11.2555 9.2173 11.3541C9.64866 12.0797 10.1827 12.7391 10.803 13.3117C11.473 13.926 12.2535 14.4076 13.1031 14.7309C13.2146 14.7851 13.3401 14.8039 13.4626 14.7846C13.5851 14.7654 13.6988 14.7091 13.7883 14.6233C14.0632 14.3135 14.3182 13.9866 14.5517 13.6445C14.623 13.5291 14.7345 13.4443 14.8646 13.4063C14.9948 13.3683 15.1344 13.38 15.2565 13.4389C15.5208 13.527 16.9204 14.222 17.2141 14.359C17.5077 14.496 17.6937 14.5743 17.7622 14.6918C17.8648 15.1364 17.8411 15.6009 17.6937 16.0327Z" fill="#0F0F0F"/>
+export const Whatsapp = React.forwardRef<SVGSVGElement, WhatsappProps>(
+  ({ 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="M11.9971 2.21213C10.1941 2.2127 8.42622 2.71127 6.88858 3.65286C5.35095 4.59445 4.10328 5.94247 3.2832 7.5482C2.46312 9.15393 2.10251 10.955 2.24114 12.7527C2.37977 14.5504 3.01226 16.2748 4.06883 17.7358L3.18791 20.4177C3.15824 20.5035 3.15353 20.596 3.17432 20.6844C3.19511 20.7727 3.24056 20.8534 3.30537 20.9169C3.36914 20.9815 3.44932 21.0275 3.53728 21.0499C3.62524 21.0723 3.71764 21.0704 3.80456 21.0442L6.59413 20.1437C7.86639 20.992 9.31971 21.5305 10.8376 21.7158C12.3555 21.9012 13.8957 21.7284 15.3347 21.2112C16.7737 20.694 18.0716 19.8468 19.1242 18.7376C20.1768 17.6284 20.9548 16.288 21.396 14.8239C21.8371 13.3597 21.9291 11.8126 21.6645 10.3065C21.4 8.80043 20.7862 7.37728 19.8724 6.15117C18.9587 4.92506 17.7703 3.93009 16.4027 3.24605C15.0351 2.562 13.5262 2.2079 11.9971 2.21213ZM17.6937 16.0327C17.4926 16.3955 17.212 16.7081 16.873 16.9471C16.534 17.1861 16.1453 17.3453 15.7361 17.4128C15.2271 17.5205 14.5517 17.6086 12.3103 16.6787C10.3176 15.7151 8.6255 14.2261 7.41632 12.372C6.75279 11.5262 6.34826 10.5064 6.25155 9.43565C6.23628 8.99096 6.31565 8.54809 6.48438 8.13637C6.65312 7.72465 6.90739 7.35347 7.23034 7.04739C7.5022 6.81361 7.85065 6.68816 8.20914 6.69502H8.53214C8.81599 6.69502 8.96281 6.69502 9.15857 7.17463C9.35433 7.65424 9.96119 9.13223 10.0297 9.28883C10.0811 9.36594 10.1125 9.45463 10.1211 9.54691C10.1296 9.63919 10.115 9.73215 10.0786 9.81738C9.99471 9.98315 9.88577 10.135 9.75564 10.2676C9.61861 10.434 9.47179 10.5613 9.33476 10.7375C9.24073 10.8063 9.17631 10.9082 9.15451 11.0226C9.13271 11.1371 9.15515 11.2555 9.2173 11.3541C9.64866 12.0797 10.1827 12.7391 10.803 13.3117C11.473 13.926 12.2535 14.4076 13.1031 14.7309C13.2146 14.7851 13.3401 14.8039 13.4626 14.7846C13.5851 14.7654 13.6988 14.7091 13.7883 14.6233C14.0632 14.3135 14.3182 13.9866 14.5517 13.6445C14.623 13.5291 14.7345 13.4443 14.8646 13.4063C14.9948 13.3683 15.1344 13.38 15.2565 13.4389C15.5208 13.527 16.9204 14.222 17.2141 14.359C17.5077 14.496 17.6937 14.5743 17.7622 14.6918C17.8648 15.1364 17.8411 15.6009 17.6937 16.0327Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Whatsapp.displayName = 'Whatsapp';

package/react/dist/X.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface XProps extends Omit<IconBaseProps, 'children'> {}
+export interface XProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const X: React.FC<XProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 18L15.5 0H18L2.5 18H0Z" fill="#0F0F0F"/>
-      <path d="M5.46484 1L16.1318 17H12.5352L1.86816 1H5.46484Z" stroke="#0F0F0F" stroke-width="2"/>
+export const X = React.forwardRef<SVGSVGElement, XProps>(
+  ({ 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 18 18"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path fillRule="evenodd" clipRule="evenodd" d="M0 18L15.5 0H18L2.5 18H0Z" fill="currentColor"/>
+        <path d="M5.46484 1L16.1318 17H12.5352L1.86816 1H5.46484Z" stroke="currentColor" strokeWidth="2"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 X.displayName = 'X';