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

package/react/dist/NGN.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NGNProps extends Omit<IconBaseProps, 'children'> {}
+export interface NGNProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const NGN: React.FC<NGNProps> = (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_3977)">
-      <circle cx="20" cy="20" r="20" fill="#2B713A"/>
-      <path d="M12.4121 21.2422V19.6602H14.1504V18.3125H12.4121V16.7305H14.1504V11.7793H16.4453L19.5312 16.7305H23.6914V11.7793H25.5371V16.7305H27.3242V18.3125H25.5371V19.6602H27.3242V21.2422H25.5371V26.125H23.3594L20.2637 21.2422H16.0059V26.125H14.1504V21.2422H12.4121ZM16.0059 19.6602H19.2676L18.4082 18.3125H16.0059V19.6602ZM21.3574 19.6602H23.6914V18.3125H20.5176L21.3574 19.6602ZM16.0059 16.7305H17.4121L16.0059 14.5137V16.7305ZM23.6914 23.4004V21.2422H22.3438L23.6914 23.4004Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3977">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const NGN = React.forwardRef<SVGSVGElement, NGNProps>(
+  ({ 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_3977)">
+        <circle cx="20" cy="20" r="20" fill="#2B713A"/>
+        <path d="M12.4121 21.2422V19.6602H14.1504V18.3125H12.4121V16.7305H14.1504V11.7793H16.4453L19.5312 16.7305H23.6914V11.7793H25.5371V16.7305H27.3242V18.3125H25.5371V19.6602H27.3242V21.2422H25.5371V26.125H23.3594L20.2637 21.2422H16.0059V26.125H14.1504V21.2422H12.4121ZM16.0059 19.6602H19.2676L18.4082 18.3125H16.0059V19.6602ZM21.3574 19.6602H23.6914V18.3125H20.5176L21.3574 19.6602ZM16.0059 16.7305H17.4121L16.0059 14.5137V16.7305ZM23.6914 23.4004V21.2422H22.3438L23.6914 23.4004Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3977">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 NGN.displayName = 'NGN';

package/react/dist/NPR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NPRProps extends Omit<IconBaseProps, 'children'> {}
+export interface NPRProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const NPR: React.FC<NPRProps> = (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_3955)">
-      <circle cx="20" cy="20" r="20" fill="#DC143C"/>
-      <path d="M9.975 14.005H15.54C16.8175 14.005 17.8325 14.285 18.5675 14.8625C19.3375 15.4925 19.74 16.4025 19.74 17.5925C19.74 18.24 19.565 18.8175 19.215 19.325C18.83 19.885 18.2875 20.2525 17.6225 20.4275V20.4625C18.7075 20.7075 19.32 21.425 19.46 22.65L19.67 24.6625C19.74 25.4325 20.0025 26.045 20.4225 26.5H18.2C17.9025 26.115 17.7275 25.5725 17.6575 24.8725L17.5 23.3325C17.43 22.65 17.22 22.16 16.87 21.8625C16.5025 21.5475 15.96 21.4075 15.26 21.4075H12.0225V26.5H9.975V14.005ZM12.0225 15.755V19.6575H15.26C16.065 19.6575 16.6775 19.4825 17.0975 19.15C17.4825 18.8 17.675 18.31 17.675 17.68C17.675 16.9975 17.4825 16.5075 17.0975 16.21C16.7125 15.895 16.1 15.755 15.26 15.755H12.0225ZM25.4146 17.2075C27.7946 17.2075 29.1071 18.1525 29.3171 20.0775H27.3746C27.2346 19.6225 27.0246 19.29 26.7446 19.115C26.4471 18.9225 25.9921 18.835 25.3796 18.835C24.8546 18.835 24.4521 18.905 24.1896 19.0625C23.8746 19.22 23.7346 19.465 23.7346 19.815C23.7346 20.095 23.9621 20.3575 24.4521 20.5675C24.7496 20.69 25.3446 20.865 26.2546 21.0925C27.2696 21.3375 28.0396 21.6175 28.5296 21.95C29.2471 22.405 29.6146 23.0525 29.6146 23.8575C29.6146 25.7825 28.2496 26.745 25.5371 26.745C23.0171 26.745 21.6696 25.6775 21.4771 23.56H23.4196C23.5246 24.1375 23.7346 24.54 24.0321 24.785C24.3296 24.995 24.8021 25.1175 25.4671 25.1175C26.8671 25.1175 27.5671 24.7325 27.5671 23.9975C27.5671 23.5775 27.3046 23.245 26.7796 23C26.4996 22.86 25.9046 22.7025 24.9946 22.4925C23.9271 22.2475 23.1746 21.985 22.7371 21.705C22.0371 21.2675 21.6871 20.655 21.6871 19.8675C21.6871 19.0275 22.0196 18.38 22.7196 17.925C23.4021 17.435 24.2946 17.2075 25.4146 17.2075Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3955">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const NPR = React.forwardRef<SVGSVGElement, NPRProps>(
+  ({ 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_3955)">
+        <circle cx="20" cy="20" r="20" fill="#DC143C"/>
+        <path d="M9.975 14.005H15.54C16.8175 14.005 17.8325 14.285 18.5675 14.8625C19.3375 15.4925 19.74 16.4025 19.74 17.5925C19.74 18.24 19.565 18.8175 19.215 19.325C18.83 19.885 18.2875 20.2525 17.6225 20.4275V20.4625C18.7075 20.7075 19.32 21.425 19.46 22.65L19.67 24.6625C19.74 25.4325 20.0025 26.045 20.4225 26.5H18.2C17.9025 26.115 17.7275 25.5725 17.6575 24.8725L17.5 23.3325C17.43 22.65 17.22 22.16 16.87 21.8625C16.5025 21.5475 15.96 21.4075 15.26 21.4075H12.0225V26.5H9.975V14.005ZM12.0225 15.755V19.6575H15.26C16.065 19.6575 16.6775 19.4825 17.0975 19.15C17.4825 18.8 17.675 18.31 17.675 17.68C17.675 16.9975 17.4825 16.5075 17.0975 16.21C16.7125 15.895 16.1 15.755 15.26 15.755H12.0225ZM25.4146 17.2075C27.7946 17.2075 29.1071 18.1525 29.3171 20.0775H27.3746C27.2346 19.6225 27.0246 19.29 26.7446 19.115C26.4471 18.9225 25.9921 18.835 25.3796 18.835C24.8546 18.835 24.4521 18.905 24.1896 19.0625C23.8746 19.22 23.7346 19.465 23.7346 19.815C23.7346 20.095 23.9621 20.3575 24.4521 20.5675C24.7496 20.69 25.3446 20.865 26.2546 21.0925C27.2696 21.3375 28.0396 21.6175 28.5296 21.95C29.2471 22.405 29.6146 23.0525 29.6146 23.8575C29.6146 25.7825 28.2496 26.745 25.5371 26.745C23.0171 26.745 21.6696 25.6775 21.4771 23.56H23.4196C23.5246 24.1375 23.7346 24.54 24.0321 24.785C24.3296 24.995 24.8021 25.1175 25.4671 25.1175C26.8671 25.1175 27.5671 24.7325 27.5671 23.9975C27.5671 23.5775 27.3046 23.245 26.7796 23C26.4996 22.86 25.9046 22.7025 24.9946 22.4925C23.9271 22.2475 23.1746 21.985 22.7371 21.705C22.0371 21.2675 21.6871 20.655 21.6871 19.8675C21.6871 19.0275 22.0196 18.38 22.7196 17.925C23.4021 17.435 24.2946 17.2075 25.4146 17.2075Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3955">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 NPR.displayName = 'NPR';

package/react/dist/Network.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NetworkProps extends Omit<IconBaseProps, 'children'> {}
+export interface NetworkProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Network: React.FC<NetworkProps> = (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 2ZM4.06445 13C4.46518 16.2126 6.76903 18.8309 9.81348 19.6943C9.46806 19.2171 9.17892 18.6386 8.94238 18.0078C8.43493 16.6545 8.10772 14.9097 8.02246 13H4.06445ZM15.9775 13C15.8923 14.9097 15.5651 16.6545 15.0576 18.0078C14.821 18.6388 14.5311 19.217 14.1855 19.6943C17.2304 18.8311 19.5348 16.2129 19.9355 13H15.9775ZM10.0273 13C10.1113 14.7078 10.4032 16.2065 10.8154 17.3057C11.0622 17.9637 11.3313 18.4273 11.5801 18.708C11.83 18.9899 11.9745 19 12 19C12.0255 19 12.17 18.9899 12.4199 18.708C12.6687 18.4273 12.9378 17.9637 13.1846 17.3057C13.5968 16.2065 13.8887 14.7078 13.9727 13H10.0273ZM9.81348 4.30469C6.76891 5.16808 4.46519 7.78736 4.06445 11H8.02246C8.10772 9.09028 8.43493 7.34546 8.94238 5.99219C9.17903 5.36113 9.46786 4.78204 9.81348 4.30469ZM12 5C11.9745 5 11.83 5.01013 11.5801 5.29199C11.3313 5.5727 11.0622 6.03626 10.8154 6.69434C10.4032 7.79352 10.1113 9.29218 10.0273 11H13.9727C13.8887 9.29218 13.5968 7.79352 13.1846 6.69434C12.9378 6.03626 12.6687 5.5727 12.4199 5.29199C12.17 5.01013 12.0255 5 12 5ZM14.1855 4.30469C14.5313 4.78213 14.8209 5.36092 15.0576 5.99219C15.5651 7.34546 15.8923 9.09028 15.9775 11H19.9355C19.5348 7.78704 17.2306 5.16782 14.1855 4.30469Z" fill="currentColor"/>
+export const Network = React.forwardRef<SVGSVGElement, NetworkProps>(
+  ({ 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 2ZM4.06445 13C4.46518 16.2126 6.76903 18.8309 9.81348 19.6943C9.46806 19.2171 9.17892 18.6386 8.94238 18.0078C8.43493 16.6545 8.10772 14.9097 8.02246 13H4.06445ZM15.9775 13C15.8923 14.9097 15.5651 16.6545 15.0576 18.0078C14.821 18.6388 14.5311 19.217 14.1855 19.6943C17.2304 18.8311 19.5348 16.2129 19.9355 13H15.9775ZM10.0273 13C10.1113 14.7078 10.4032 16.2065 10.8154 17.3057C11.0622 17.9637 11.3313 18.4273 11.5801 18.708C11.83 18.9899 11.9745 19 12 19C12.0255 19 12.17 18.9899 12.4199 18.708C12.6687 18.4273 12.9378 17.9637 13.1846 17.3057C13.5968 16.2065 13.8887 14.7078 13.9727 13H10.0273ZM9.81348 4.30469C6.76891 5.16808 4.46519 7.78736 4.06445 11H8.02246C8.10772 9.09028 8.43493 7.34546 8.94238 5.99219C9.17903 5.36113 9.46786 4.78204 9.81348 4.30469ZM12 5C11.9745 5 11.83 5.01013 11.5801 5.29199C11.3313 5.5727 11.0622 6.03626 10.8154 6.69434C10.4032 7.79352 10.1113 9.29218 10.0273 11H13.9727C13.8887 9.29218 13.5968 7.79352 13.1846 6.69434C12.9378 6.03626 12.6687 5.5727 12.4199 5.29199C12.17 5.01013 12.0255 5 12 5ZM14.1855 4.30469C14.5313 4.78213 14.8209 5.36092 15.0576 5.99219C15.5651 7.34546 15.8923 9.09028 15.9775 11H19.9355C19.5348 7.78704 17.2306 5.16782 14.1855 4.30469Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Network.displayName = 'Network';

package/react/dist/News.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NewsProps extends Omit<IconBaseProps, 'children'> {}
+export interface NewsProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const News: React.FC<NewsProps> = (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 4V6H4V20H18V12H20V22H2V4H12ZM15 14V16H6V14H15ZM10 10V12H6V10H10ZM20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8C19.1046 8 20 7.10457 20 6ZM22 6C22 8.20914 20.2091 10 18 10C15.7909 10 14 8.20914 14 6C14 3.79086 15.7909 2 18 2C20.2091 2 22 3.79086 22 6Z" fill="currentColor"/>
+export const News = React.forwardRef<SVGSVGElement, NewsProps>(
+  ({ 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 4V6H4V20H18V12H20V22H2V4H12ZM15 14V16H6V14H15ZM10 10V12H6V10H10ZM20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8C19.1046 8 20 7.10457 20 6ZM22 6C22 8.20914 20.2091 10 18 10C15.7909 10 14 8.20914 14 6C14 3.79086 15.7909 2 18 2C20.2091 2 22 3.79086 22 6Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 News.displayName = 'News';

package/react/dist/NftMarketplace.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NftMarketplaceProps extends Omit<IconBaseProps, 'children'> {}
+export interface NftMarketplaceProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const NftMarketplace: React.FC<NftMarketplaceProps> = (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.7944 6.92285V17.0771L11.9995 22.1543L3.20557 17.0771V6.92285L11.9995 1.8457L20.7944 6.92285ZM5.20557 8.07715V15.9219L11.9995 19.8447L18.7944 15.9219V8.07715L11.9995 4.1543L5.20557 8.07715ZM16.6001 9.7998L12.9995 12.5V16H10.9995V12.499L7.3999 9.7998L8.6001 8.2002L11.9995 10.75L15.3999 8.2002L16.6001 9.7998Z" fill="currentColor"/>
+export const NftMarketplace = React.forwardRef<SVGSVGElement, NftMarketplaceProps>(
+  ({ 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.7944 6.92285V17.0771L11.9995 22.1543L3.20557 17.0771V6.92285L11.9995 1.8457L20.7944 6.92285ZM5.20557 8.07715V15.9219L11.9995 19.8447L18.7944 15.9219V8.07715L11.9995 4.1543L5.20557 8.07715ZM16.6001 9.7998L12.9995 12.5V16H10.9995V12.499L7.3999 9.7998L8.6001 8.2002L11.9995 10.75L15.3999 8.2002L16.6001 9.7998Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 NftMarketplace.displayName = 'NftMarketplace';

package/react/dist/NonSelected.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NonSelectedProps extends Omit<IconBaseProps, 'children'> {}
+export interface NonSelectedProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const NonSelected: React.FC<NonSelectedProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 2.02246C17.5106 2.02246 21.9775 6.48942 21.9775 12C21.9775 17.5106 17.5106 21.9775 12 21.9775C6.48942 21.9775 2.02246 17.5106 2.02246 12C2.02246 6.48942 6.48942 2.02246 12 2.02246ZM12 3.97754C7.56945 3.97754 3.97754 7.56945 3.97754 12C3.97754 16.4305 7.56945 20.0225 12 20.0225C16.4305 20.0225 20.0225 16.4305 20.0225 12C20.0225 7.56945 16.4305 3.97754 12 3.97754Z" fill="currentColor"/>
+export const NonSelected = React.forwardRef<SVGSVGElement, NonSelectedProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M12 2.02246C17.5106 2.02246 21.9775 6.48942 21.9775 12C21.9775 17.5106 17.5106 21.9775 12 21.9775C6.48942 21.9775 2.02246 17.5106 2.02246 12C2.02246 6.48942 6.48942 2.02246 12 2.02246ZM12 3.97754C7.56945 3.97754 3.97754 7.56945 3.97754 12C3.97754 16.4305 7.56945 20.0225 12 20.0225C16.4305 20.0225 20.0225 16.4305 20.0225 12C20.0225 7.56945 16.4305 3.97754 12 3.97754Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 NonSelected.displayName = 'NonSelected';

package/react/dist/Notification.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface NotificationProps extends Omit<IconBaseProps, 'children'> {}
+export interface NotificationProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Notification: React.FC<NotificationProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M13 3.07812C15.9545 3.54192 18.25 6.02632 18.25 9.07715V11.875L20.4883 13.127L21 13.4141V18H16.8994C16.4361 20.2822 14.4189 22 12 22C9.58108 22 7.5639 20.2822 7.10059 18H3V13.4141L3.51172 13.127L5.75 11.875V9.07715C5.75 6.02632 8.04552 3.54192 11 3.07812V2H13V3.07812ZM9.17383 18C9.58594 19.1647 10.6941 20 12 20C13.3059 20 14.4141 19.1647 14.8262 18H9.17383ZM12 5C9.62093 5 7.75 6.85686 7.75 9.07715V13.0479L5 14.5859V16H19V14.5859L16.25 13.0479V9.07715C16.25 6.85686 14.3791 5 12 5Z" fill="currentColor"/>
+export const Notification = React.forwardRef<SVGSVGElement, NotificationProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M13 3.07812C15.9545 3.54192 18.25 6.02632 18.25 9.07715V11.875L20.4883 13.127L21 13.4141V18H16.8994C16.4361 20.2822 14.4189 22 12 22C9.58108 22 7.5639 20.2822 7.10059 18H3V13.4141L3.51172 13.127L5.75 11.875V9.07715C5.75 6.02632 8.04552 3.54192 11 3.07812V2H13V3.07812ZM9.17383 18C9.58594 19.1647 10.6941 20 12 20C13.3059 20 14.4141 19.1647 14.8262 18H9.17383ZM12 5C9.62093 5 7.75 6.85686 7.75 9.07715V13.0479L5 14.5859V16H19V14.5859L16.25 13.0479V9.07715C16.25 6.85686 14.3791 5 12 5Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Notification.displayName = 'Notification';

package/react/dist/Ok.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface OkProps extends Omit<IconBaseProps, 'children'> {}
+export interface OkProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Ok: React.FC<OkProps> = (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.7197 7.69434L10.0645 17.6943L9.34473 18.4395L8.625 17.6943L4.28027 13.1943L5.71973 11.8057L9.34473 15.5596L18.2803 6.30566L19.7197 7.69434Z" fill="currentColor"/>
+export const Ok = React.forwardRef<SVGSVGElement, OkProps>(
+  ({ 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.7197 7.69434L10.0645 17.6943L9.34473 18.4395L8.625 17.6943L4.28027 13.1943L5.71973 11.8057L9.34473 15.5596L18.2803 6.30566L19.7197 7.69434Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Ok.displayName = 'Ok';

package/react/dist/P2p.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface P2pProps extends Omit<IconBaseProps, 'children'> {}
+export interface P2pProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const P2p: React.FC<P2pProps> = (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 P2p = React.forwardRef<SVGSVGElement, P2pProps>(
+  ({ 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 14C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22C15.7909 22 14 20.2091 14 18C14 15.7909 15.7909 14 18 14ZM5 12C5 15.866 8.13401 19 12 19V21C7.02944 21 3 16.9706 3 12H5ZM18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16ZM12 3C16.9706 3 21 7.02944 21 12H19C19 8.13401 15.866 5 12 5V3ZM6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6C2 3.79086 3.79086 2 6 2ZM6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 P2p.displayName = 'P2p';

package/react/dist/PGK.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PGKProps extends Omit<IconBaseProps, 'children'> {}
+export interface PGKProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PGK: React.FC<PGKProps> = (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_3938)">
-      <circle cx="20" cy="20" r="20" fill="black"/>
-      <path d="M24.1538 13.4525H27.2988L20.6263 19.955L28.2975 28.625H24.94L18.9475 21.5912L17.0988 23.3975V28.625H14.6125V13.4525H17.0988V20.6137L24.1538 13.4525Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3938">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const PGK = React.forwardRef<SVGSVGElement, PGKProps>(
+  ({ 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_3938)">
+        <circle cx="20" cy="20" r="20" fill="black"/>
+        <path d="M24.1538 13.4525H27.2988L20.6263 19.955L28.2975 28.625H24.94L18.9475 21.5912L17.0988 23.3975V28.625H14.6125V13.4525H17.0988V20.6137L24.1538 13.4525Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3938">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PGK.displayName = 'PGK';

package/react/dist/PHP.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PHPProps extends Omit<IconBaseProps, 'children'> {}
+export interface PHPProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PHP: React.FC<PHPProps> = (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_3976)">
-      <circle cx="20" cy="20" r="20" fill="#103AA1"/>
-      <path d="M20.075 12.9C21.7417 12.9 23.05 13.2083 24 13.825C24.95 14.4417 25.5917 15.3167 25.925 16.45H27.8V17.8H26.175C26.1917 17.95 26.2 18.1 26.2 18.25C26.2167 18.4 26.225 18.55 26.225 18.7C26.225 18.9167 26.2167 19.1417 26.2 19.375C26.1833 19.5917 26.1583 19.8083 26.125 20.025H27.8V21.375H25.775C25.525 22.0583 25.1417 22.6667 24.625 23.2C24.1083 23.7333 23.4417 24.1583 22.625 24.475C21.8083 24.775 20.8167 24.925 19.65 24.925H18.25V30.75H16.175V21.375H14V20.025H16.175V17.8H14V16.45H16.175V12.9H20.075ZM23.45 21.375H18.25V23.075H19.525C20.5083 23.075 21.325 22.9417 21.975 22.675C22.625 22.4083 23.1167 21.975 23.45 21.375ZM23.95 17.8H18.25V20.025H23.925C23.9583 19.8417 23.9833 19.65 24 19.45C24.0167 19.2333 24.025 19.0167 24.025 18.8C24.025 18.6167 24.0167 18.45 24 18.3C24 18.1333 23.9833 17.9667 23.95 17.8ZM20 14.75H18.25V16.45H23.525C23.225 15.8833 22.7833 15.4583 22.2 15.175C21.6167 14.8917 20.8833 14.75 20 14.75Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3976">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const PHP = React.forwardRef<SVGSVGElement, PHPProps>(
+  ({ 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_3976)">
+        <circle cx="20" cy="20" r="20" fill="#103AA1"/>
+        <path d="M20.075 12.9C21.7417 12.9 23.05 13.2083 24 13.825C24.95 14.4417 25.5917 15.3167 25.925 16.45H27.8V17.8H26.175C26.1917 17.95 26.2 18.1 26.2 18.25C26.2167 18.4 26.225 18.55 26.225 18.7C26.225 18.9167 26.2167 19.1417 26.2 19.375C26.1833 19.5917 26.1583 19.8083 26.125 20.025H27.8V21.375H25.775C25.525 22.0583 25.1417 22.6667 24.625 23.2C24.1083 23.7333 23.4417 24.1583 22.625 24.475C21.8083 24.775 20.8167 24.925 19.65 24.925H18.25V30.75H16.175V21.375H14V20.025H16.175V17.8H14V16.45H16.175V12.9H20.075ZM23.45 21.375H18.25V23.075H19.525C20.5083 23.075 21.325 22.9417 21.975 22.675C22.625 22.4083 23.1167 21.975 23.45 21.375ZM23.95 17.8H18.25V20.025H23.925C23.9583 19.8417 23.9833 19.65 24 19.45C24.0167 19.2333 24.025 19.0167 24.025 18.8C24.025 18.6167 24.0167 18.45 24 18.3C24 18.1333 23.9833 17.9667 23.95 17.8ZM20 14.75H18.25V16.45H23.525C23.225 15.8833 22.7833 15.4583 22.2 15.175C21.6167 14.8917 20.8833 14.75 20 14.75Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3976">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PHP.displayName = 'PHP';

package/react/dist/PKR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface PKRProps extends Omit<IconBaseProps, 'children'> {}
+export interface PKRProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const PKR: React.FC<PKRProps> = (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_3974)">
-      <circle cx="20" cy="20" r="20" fill="#04913C"/>
-      <path d="M10.6 14.63H16.165C17.4425 14.63 18.4575 14.91 19.1925 15.4875C19.9625 16.1175 20.365 17.0275 20.365 18.2175C20.365 18.865 20.19 19.4425 19.84 19.95C19.455 20.51 18.9125 20.8775 18.2475 21.0525V21.0875C19.3325 21.3325 19.945 22.05 20.085 23.275L20.295 25.2875C20.365 26.0575 20.6275 26.67 21.0475 27.125H18.825C18.5275 26.74 18.3525 26.1975 18.2825 25.4975L18.125 23.9575C18.055 23.275 17.845 22.785 17.495 22.4875C17.1275 22.1725 16.585 22.0325 15.885 22.0325H12.6475V27.125H10.6V14.63ZM12.6475 16.38V20.2825H15.885C16.69 20.2825 17.3025 20.1075 17.7225 19.775C18.1075 19.425 18.3 18.935 18.3 18.305C18.3 17.6225 18.1075 17.1325 17.7225 16.835C17.3375 16.52 16.725 16.38 15.885 16.38H12.6475ZM26.0396 17.8325C28.4196 17.8325 29.7321 18.7775 29.9421 20.7025H27.9996C27.8596 20.2475 27.6496 19.915 27.3696 19.74C27.0721 19.5475 26.6171 19.46 26.0046 19.46C25.4796 19.46 25.0771 19.53 24.8146 19.6875C24.4996 19.845 24.3596 20.09 24.3596 20.44C24.3596 20.72 24.5871 20.9825 25.0771 21.1925C25.3746 21.315 25.9696 21.49 26.8796 21.7175C27.8946 21.9625 28.6646 22.2425 29.1546 22.575C29.8721 23.03 30.2396 23.6775 30.2396 24.4825C30.2396 26.4075 28.8746 27.37 26.1621 27.37C23.6421 27.37 22.2946 26.3025 22.1021 24.185H24.0446C24.1496 24.7625 24.3596 25.165 24.6571 25.41C24.9546 25.62 25.4271 25.7425 26.0921 25.7425C27.4921 25.7425 28.1921 25.3575 28.1921 24.6225C28.1921 24.2025 27.9296 23.87 27.4046 23.625C27.1246 23.485 26.5296 23.3275 25.6196 23.1175C24.5521 22.8725 23.7996 22.61 23.3621 22.33C22.6621 21.8925 22.3121 21.28 22.3121 20.4925C22.3121 19.6525 22.6446 19.005 23.3446 18.55C24.0271 18.06 24.9196 17.8325 26.0396 17.8325Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3974">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const PKR = React.forwardRef<SVGSVGElement, PKRProps>(
+  ({ 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_3974)">
+        <circle cx="20" cy="20" r="20" fill="#04913C"/>
+        <path d="M10.6 14.63H16.165C17.4425 14.63 18.4575 14.91 19.1925 15.4875C19.9625 16.1175 20.365 17.0275 20.365 18.2175C20.365 18.865 20.19 19.4425 19.84 19.95C19.455 20.51 18.9125 20.8775 18.2475 21.0525V21.0875C19.3325 21.3325 19.945 22.05 20.085 23.275L20.295 25.2875C20.365 26.0575 20.6275 26.67 21.0475 27.125H18.825C18.5275 26.74 18.3525 26.1975 18.2825 25.4975L18.125 23.9575C18.055 23.275 17.845 22.785 17.495 22.4875C17.1275 22.1725 16.585 22.0325 15.885 22.0325H12.6475V27.125H10.6V14.63ZM12.6475 16.38V20.2825H15.885C16.69 20.2825 17.3025 20.1075 17.7225 19.775C18.1075 19.425 18.3 18.935 18.3 18.305C18.3 17.6225 18.1075 17.1325 17.7225 16.835C17.3375 16.52 16.725 16.38 15.885 16.38H12.6475ZM26.0396 17.8325C28.4196 17.8325 29.7321 18.7775 29.9421 20.7025H27.9996C27.8596 20.2475 27.6496 19.915 27.3696 19.74C27.0721 19.5475 26.6171 19.46 26.0046 19.46C25.4796 19.46 25.0771 19.53 24.8146 19.6875C24.4996 19.845 24.3596 20.09 24.3596 20.44C24.3596 20.72 24.5871 20.9825 25.0771 21.1925C25.3746 21.315 25.9696 21.49 26.8796 21.7175C27.8946 21.9625 28.6646 22.2425 29.1546 22.575C29.8721 23.03 30.2396 23.6775 30.2396 24.4825C30.2396 26.4075 28.8746 27.37 26.1621 27.37C23.6421 27.37 22.2946 26.3025 22.1021 24.185H24.0446C24.1496 24.7625 24.3596 25.165 24.6571 25.41C24.9546 25.62 25.4271 25.7425 26.0921 25.7425C27.4921 25.7425 28.1921 25.3575 28.1921 24.6225C28.1921 24.2025 27.9296 23.87 27.4046 23.625C27.1246 23.485 26.5296 23.3275 25.6196 23.1175C24.5521 22.8725 23.7996 22.61 23.3621 22.33C22.6621 21.8925 22.3121 21.28 22.3121 20.4925C22.3121 19.6525 22.6446 19.005 23.3446 18.55C24.0271 18.06 24.9196 17.8325 26.0396 17.8325Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3974">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 PKR.displayName = 'PKR';