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

package/react/dist/Hide.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface HideProps extends Omit<IconBaseProps, 'children'> {}
+export interface HideProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Hide: React.FC<HideProps> = (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.7178 3.6377L17.8164 6.90039C18.2417 7.18178 18.6382 7.47879 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C10.5203 19 9.13452 18.6227 7.90039 18.0566L4.71777 21.6377L3.28223 20.3623L19.2822 2.3623L20.7178 3.6377ZM15.2959 9.73535C15.7388 10.3791 15.9999 11.1592 16 12C15.9999 14.209 14.2091 16 12 16C11.3276 16 10.6935 15.8326 10.1367 15.5391L9.30371 16.4775C10.1573 16.8023 11.0654 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C17.3384 8.99935 16.918 8.69298 16.4717 8.41309L15.2959 9.73535ZM12 5C12.9377 5 13.8375 5.15289 14.6855 5.40723L13.1797 7.10156C12.7927 7.03551 12.3987 7 12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C6.30677 14.7065 6.34024 14.7322 6.37305 14.7588L5.04297 16.2559C5.0281 16.2436 5.01281 16.232 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM11.5518 13.9473C11.6959 13.9802 11.8455 14 12 14C13.1045 14 13.9999 13.1045 14 12C14 11.7633 13.9573 11.5369 13.8818 11.3262L11.5518 13.9473Z" fill="currentColor"/>
-      <path d="M20.7178 3.6377L17.8164 6.90039C18.2417 7.18178 18.6382 7.47879 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C10.5203 19 9.13452 18.6227 7.90039 18.0566L4.71777 21.6377L3.28223 20.3623L19.2822 2.3623L20.7178 3.6377ZM15.2959 9.73535C15.7388 10.3791 15.9999 11.1592 16 12C15.9999 14.209 14.2091 16 12 16C11.3276 16 10.6935 15.8326 10.1367 15.5391L9.30371 16.4775C10.1573 16.8023 11.0654 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C17.3384 8.99935 16.918 8.69298 16.4717 8.41309L15.2959 9.73535ZM12 5C12.9377 5 13.8375 5.15289 14.6855 5.40723L13.1797 7.10156C12.7927 7.03551 12.3987 7 12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C6.30677 14.7065 6.34024 14.7322 6.37305 14.7588L5.04297 16.2559C5.0281 16.2436 5.01281 16.232 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM11.5518 13.9473C11.6959 13.9802 11.8455 14 12 14C13.1045 14 13.9999 13.1045 14 12C14 11.7633 13.9573 11.5369 13.8818 11.3262L11.5518 13.9473Z" fill="currentColor"/>
+export const Hide = React.forwardRef<SVGSVGElement, HideProps>(
+  ({ 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.7178 3.6377L17.8164 6.90039C18.2417 7.18178 18.6382 7.47879 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C10.5203 19 9.13452 18.6227 7.90039 18.0566L4.71777 21.6377L3.28223 20.3623L19.2822 2.3623L20.7178 3.6377ZM15.2959 9.73535C15.7388 10.3791 15.9999 11.1592 16 12C15.9999 14.209 14.2091 16 12 16C11.3276 16 10.6935 15.8326 10.1367 15.5391L9.30371 16.4775C10.1573 16.8023 11.0654 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C17.3384 8.99935 16.918 8.69298 16.4717 8.41309L15.2959 9.73535ZM12 5C12.9377 5 13.8375 5.15289 14.6855 5.40723L13.1797 7.10156C12.7927 7.03551 12.3987 7 12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C6.30677 14.7065 6.34024 14.7322 6.37305 14.7588L5.04297 16.2559C5.0281 16.2436 5.01281 16.232 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM11.5518 13.9473C11.6959 13.9802 11.8455 14 12 14C13.1045 14 13.9999 13.1045 14 12C14 11.7633 13.9573 11.5369 13.8818 11.3262L11.5518 13.9473Z" fill="currentColor"/>
+        <path d="M20.7178 3.6377L17.8164 6.90039C18.2417 7.18178 18.6382 7.47879 19.002 7.78027C19.8747 8.50368 20.5907 9.27509 21.0977 9.96387C21.3505 10.3074 21.5626 10.6455 21.7158 10.96C21.8551 11.2458 22 11.6186 22 12C22 12.3814 21.8551 12.7542 21.7158 13.04C21.5626 13.3545 21.3505 13.6926 21.0977 14.0361C20.5907 14.7249 19.8747 15.4963 19.002 16.2197C17.2705 17.6549 14.8015 19 12 19C10.5203 19 9.13452 18.6227 7.90039 18.0566L4.71777 21.6377L3.28223 20.3623L19.2822 2.3623L20.7178 3.6377ZM15.2959 9.73535C15.7388 10.3791 15.9999 11.1592 16 12C15.9999 14.209 14.2091 16 12 16C11.3276 16 10.6935 15.8326 10.1367 15.5391L9.30371 16.4775C10.1573 16.8023 11.0654 17 12 17C14.169 17 16.1996 15.9445 17.7256 14.6797C18.4815 14.0531 19.0834 13.3993 19.4873 12.8506C19.6897 12.5755 19.8314 12.3417 19.918 12.1641C19.9555 12.0871 19.9749 12.0329 19.9863 12C19.9749 11.9671 19.9555 11.9129 19.918 11.8359C19.8314 11.6583 19.6897 11.4245 19.4873 11.1494C19.0834 10.6007 18.4815 9.94688 17.7256 9.32031C17.3384 8.99935 16.918 8.69298 16.4717 8.41309L15.2959 9.73535ZM12 5C12.9377 5 13.8375 5.15289 14.6855 5.40723L13.1797 7.10156C12.7927 7.03551 12.3987 7 12 7C9.83098 7 7.80036 8.05547 6.27441 9.32031C5.51851 9.94688 4.91657 10.6007 4.5127 11.1494C4.31026 11.4245 4.16858 11.6583 4.08203 11.8359C4.04443 11.9131 4.02413 11.9671 4.0127 12C4.02413 12.0329 4.04443 12.0869 4.08203 12.1641C4.16858 12.3417 4.31026 12.5755 4.5127 12.8506C4.91657 13.3993 5.51851 14.0531 6.27441 14.6797C6.30677 14.7065 6.34024 14.7322 6.37305 14.7588L5.04297 16.2559C5.0281 16.2436 5.01281 16.232 4.99805 16.2197C4.12531 15.4963 3.40931 14.7249 2.90234 14.0361C2.64946 13.6926 2.43737 13.3545 2.28418 13.04C2.14492 12.7542 2 12.3814 2 12C2 11.6186 2.14492 11.2458 2.28418 10.96C2.43737 10.6455 2.64946 10.3074 2.90234 9.96387C3.40931 9.27509 4.12531 8.50368 4.99805 7.78027C6.72946 6.34512 9.19846 5 12 5ZM11.5518 13.9473C11.6959 13.9802 11.8455 14 12 14C13.1045 14 13.9999 13.1045 14 12C14 11.7633 13.9573 11.5369 13.8818 11.3262L11.5518 13.9473Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Hide.displayName = 'Hide';

package/react/dist/HistoryOrder.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface HistoryOrderProps extends Omit<IconBaseProps, 'children'> {}
+export interface HistoryOrderProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const HistoryOrder: React.FC<HistoryOrderProps> = (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 10C21.3137 10 24 12.6863 24 16C24 19.3137 21.3137 22 18 22C14.6863 22 12 19.3137 12 16C12 12.6863 14.6863 10 18 10ZM20 7.88477H18V4H6V19H11.0908V21H4V2H20V7.88477ZM18 12C15.7909 12 14 13.7909 14 16C14 18.2091 15.7909 20 18 20C20.2091 20 22 18.2091 22 16C22 13.7909 20.2091 12 18 12ZM18.7998 15.5996L20.4805 16.8604L19.5195 18.1396L17.5195 16.6396L17.2002 16.4004V13.5H18.7998V15.5996ZM14 9H8V7H14V9Z" fill="currentColor"/>
+export const HistoryOrder = React.forwardRef<SVGSVGElement, HistoryOrderProps>(
+  ({ 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 10C21.3137 10 24 12.6863 24 16C24 19.3137 21.3137 22 18 22C14.6863 22 12 19.3137 12 16C12 12.6863 14.6863 10 18 10ZM20 7.88477H18V4H6V19H11.0908V21H4V2H20V7.88477ZM18 12C15.7909 12 14 13.7909 14 16C14 18.2091 15.7909 20 18 20C20.2091 20 22 18.2091 22 16C22 13.7909 20.2091 12 18 12ZM18.7998 15.5996L20.4805 16.8604L19.5195 18.1396L17.5195 16.6396L17.2002 16.4004V13.5H18.7998V15.5996ZM14 9H8V7H14V9Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 HistoryOrder.displayName = 'HistoryOrder';

package/react/dist/HotFilled.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface HotFilledProps extends Omit<IconBaseProps, 'children'> {}
+export interface HotFilledProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const HotFilled: React.FC<HotFilledProps> = (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.7669 21C15.4662 21 18.5338 18.0677 18.5338 14.2782C18.5338 13.3308 18.4887 12.3383 17.9925 10.8045C17.4962 9.27068 17.3609 9.04511 16.8196 8.09774C16.594 10.0376 15.3308 10.8496 15.015 11.1203C15.015 10.8496 14.2481 8.09774 13.1203 6.42857C11.9925 4.80451 10.4586 3.7218 9.6015 3C9.6015 4.3985 9.19549 6.42857 8.65414 7.51128C8.11278 8.54887 7.97744 8.59399 7.30075 9.3609C6.62406 10.1278 6.26316 10.3985 5.7218 11.3459C5.09023 12.203 5 13.4662 5 14.4135C5 18.203 8.06767 21 11.7669 21Z" fill="currentColor"/>
+export const HotFilled = React.forwardRef<SVGSVGElement, HotFilledProps>(
+  ({ 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.7669 21C15.4662 21 18.5338 18.0677 18.5338 14.2782C18.5338 13.3308 18.4887 12.3383 17.9925 10.8045C17.4962 9.27068 17.3609 9.04511 16.8196 8.09774C16.594 10.0376 15.3308 10.8496 15.015 11.1203C15.015 10.8496 14.2481 8.09774 13.1203 6.42857C11.9925 4.80451 10.4586 3.7218 9.6015 3C9.6015 4.3985 9.19549 6.42857 8.65414 7.51128C8.11278 8.54887 7.97744 8.59399 7.30075 9.3609C6.62406 10.1278 6.26316 10.3985 5.7218 11.3459C5.09023 12.203 5 13.4662 5 14.4135C5 18.203 8.06767 21 11.7669 21Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 HotFilled.displayName = 'HotFilled';

package/react/dist/IDR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface IDRProps extends Omit<IconBaseProps, 'children'> {}
+export interface IDRProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const IDR: React.FC<IDRProps> = (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_3971)">
-      <circle cx="20" cy="20" r="20" fill="#CF1227"/>
-      <path d="M19.46 25.875H17.255L14.63 20.625H12.2675V25.875H10.3775V13.415H15.2075C16.3742 13.415 17.3075 13.7533 18.0075 14.43C18.7192 15.1067 19.075 15.9817 19.075 17.055C19.075 17.9067 18.8417 18.6242 18.375 19.2075C17.92 19.7792 17.325 20.1642 16.59 20.3625L19.46 25.875ZM16.6075 18.5075C16.9925 18.1575 17.185 17.6792 17.185 17.0725C17.185 16.4658 16.9925 15.9875 16.6075 15.6375C16.2225 15.2875 15.7092 15.1125 15.0675 15.1125H12.2675V19.015H15.0675C15.7092 19.015 16.2225 18.8458 16.6075 18.5075ZM28.8973 21.43C28.8973 23.2733 28.5648 24.5275 27.8998 25.1925C27.3748 25.7175 26.6573 25.98 25.7473 25.98C24.7673 25.98 23.9915 25.6417 23.4198 24.965V29.4625H21.6348V17.0025H23.3848V17.9475C23.9681 17.2475 24.7498 16.8975 25.7298 16.8975C26.6515 16.8975 27.3748 17.16 27.8998 17.685C28.5648 18.35 28.8973 19.5983 28.8973 21.43ZM27.0423 22.5675C27.089 22.2525 27.1123 21.8733 27.1123 21.43C27.1123 20.9867 27.089 20.6075 27.0423 20.2925C27.0073 19.9775 26.9256 19.6742 26.7973 19.3825C26.6806 19.0908 26.494 18.8692 26.2373 18.7175C25.9806 18.5658 25.6598 18.49 25.2748 18.49C24.7615 18.49 24.359 18.6358 24.0673 18.9275C23.7873 19.2192 23.6065 19.5575 23.5248 19.9425C23.4548 20.3275 23.4198 20.8233 23.4198 21.43C23.4198 21.8733 23.4431 22.2525 23.4898 22.5675C23.5365 22.8825 23.6181 23.1917 23.7348 23.495C23.8631 23.7867 24.0556 24.0083 24.3123 24.16C24.569 24.3117 24.8898 24.3875 25.2748 24.3875C25.6598 24.3875 25.9806 24.3117 26.2373 24.16C26.494 24.0083 26.6806 23.7867 26.7973 23.495C26.9256 23.1917 27.0073 22.8825 27.0423 22.5675ZM32.2701 23.3725C32.6201 23.3725 32.9351 23.495 33.1976 23.74C33.4426 23.985 33.5826 24.3 33.5826 24.685C33.5826 25.035 33.4426 25.35 33.1976 25.6125C32.9351 25.84 32.6201 25.9625 32.2701 25.9625C31.8851 25.9625 31.5876 25.84 31.3601 25.6125C31.0976 25.35 30.9751 25.035 30.9751 24.685C30.9751 24.3 31.0976 23.985 31.3601 23.74C31.5876 23.495 31.8851 23.3725 32.2701 23.3725Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3971">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const IDR = React.forwardRef<SVGSVGElement, IDRProps>(
+  ({ 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_3971)">
+        <circle cx="20" cy="20" r="20" fill="#CF1227"/>
+        <path d="M19.46 25.875H17.255L14.63 20.625H12.2675V25.875H10.3775V13.415H15.2075C16.3742 13.415 17.3075 13.7533 18.0075 14.43C18.7192 15.1067 19.075 15.9817 19.075 17.055C19.075 17.9067 18.8417 18.6242 18.375 19.2075C17.92 19.7792 17.325 20.1642 16.59 20.3625L19.46 25.875ZM16.6075 18.5075C16.9925 18.1575 17.185 17.6792 17.185 17.0725C17.185 16.4658 16.9925 15.9875 16.6075 15.6375C16.2225 15.2875 15.7092 15.1125 15.0675 15.1125H12.2675V19.015H15.0675C15.7092 19.015 16.2225 18.8458 16.6075 18.5075ZM28.8973 21.43C28.8973 23.2733 28.5648 24.5275 27.8998 25.1925C27.3748 25.7175 26.6573 25.98 25.7473 25.98C24.7673 25.98 23.9915 25.6417 23.4198 24.965V29.4625H21.6348V17.0025H23.3848V17.9475C23.9681 17.2475 24.7498 16.8975 25.7298 16.8975C26.6515 16.8975 27.3748 17.16 27.8998 17.685C28.5648 18.35 28.8973 19.5983 28.8973 21.43ZM27.0423 22.5675C27.089 22.2525 27.1123 21.8733 27.1123 21.43C27.1123 20.9867 27.089 20.6075 27.0423 20.2925C27.0073 19.9775 26.9256 19.6742 26.7973 19.3825C26.6806 19.0908 26.494 18.8692 26.2373 18.7175C25.9806 18.5658 25.6598 18.49 25.2748 18.49C24.7615 18.49 24.359 18.6358 24.0673 18.9275C23.7873 19.2192 23.6065 19.5575 23.5248 19.9425C23.4548 20.3275 23.4198 20.8233 23.4198 21.43C23.4198 21.8733 23.4431 22.2525 23.4898 22.5675C23.5365 22.8825 23.6181 23.1917 23.7348 23.495C23.8631 23.7867 24.0556 24.0083 24.3123 24.16C24.569 24.3117 24.8898 24.3875 25.2748 24.3875C25.6598 24.3875 25.9806 24.3117 26.2373 24.16C26.494 24.0083 26.6806 23.7867 26.7973 23.495C26.9256 23.1917 27.0073 22.8825 27.0423 22.5675ZM32.2701 23.3725C32.6201 23.3725 32.9351 23.495 33.1976 23.74C33.4426 23.985 33.5826 24.3 33.5826 24.685C33.5826 25.035 33.4426 25.35 33.1976 25.6125C32.9351 25.84 32.6201 25.9625 32.2701 25.9625C31.8851 25.9625 31.5876 25.84 31.3601 25.6125C31.0976 25.35 30.9751 25.035 30.9751 24.685C30.9751 24.3 31.0976 23.985 31.3601 23.74C31.5876 23.495 31.8851 23.3725 32.2701 23.3725Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3971">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 IDR.displayName = 'IDR';

package/react/dist/INR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface INRProps extends Omit<IconBaseProps, 'children'> {}
+export interface INRProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const INR: React.FC<INRProps> = (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_3982)">
-      <circle cx="20" cy="20" r="20" fill="#E97C0D"/>
-      <path d="M14.8125 16.76H20.0325C19.92 16.0625 19.65 15.5225 19.2 15.14C18.615 14.645 17.7825 14.42 16.68 14.42H14.2725L14.7675 12.935H25.455L24.96 14.42H21.8325C22.305 15.05 22.5975 15.8375 22.6875 16.76H25.4775L24.9825 18.245H22.6425C22.5075 19.01 22.17 19.685 21.675 20.225C20.955 20.945 20.01 21.44 18.8175 21.71C18.9975 21.845 19.335 22.25 19.83 22.88L24.69 29H21.1125L17.085 23.69C16.725 23.195 16.3425 22.835 15.9375 22.565C15.4875 22.25 14.9925 22.0925 14.4975 22.0925V20.3375H15.8925C17.31 20.3375 18.3675 20.09 19.065 19.595C19.5375 19.2575 19.8525 18.8075 19.9875 18.245H14.3175L14.8125 16.76Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3982">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const INR = React.forwardRef<SVGSVGElement, INRProps>(
+  ({ 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_3982)">
+        <circle cx="20" cy="20" r="20" fill="#E97C0D"/>
+        <path d="M14.8125 16.76H20.0325C19.92 16.0625 19.65 15.5225 19.2 15.14C18.615 14.645 17.7825 14.42 16.68 14.42H14.2725L14.7675 12.935H25.455L24.96 14.42H21.8325C22.305 15.05 22.5975 15.8375 22.6875 16.76H25.4775L24.9825 18.245H22.6425C22.5075 19.01 22.17 19.685 21.675 20.225C20.955 20.945 20.01 21.44 18.8175 21.71C18.9975 21.845 19.335 22.25 19.83 22.88L24.69 29H21.1125L17.085 23.69C16.725 23.195 16.3425 22.835 15.9375 22.565C15.4875 22.25 14.9925 22.0925 14.4975 22.0925V20.3375H15.8925C17.31 20.3375 18.3675 20.09 19.065 19.595C19.5375 19.2575 19.8525 18.8075 19.9875 18.245H14.3175L14.8125 16.76Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3982">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 INR.displayName = 'INR';

package/react/dist/IQD.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface IQDProps extends Omit<IconBaseProps, 'children'> {}
+export interface IQDProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const IQD: React.FC<IQDProps> = (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_3932)">
-      <circle cx="20" cy="20" r="20" fill="#2B713A"/>
-      <path d="M5.7659 24.2653L6.64121 22.7554C6.93298 22.945 7.34146 23.1274 7.86665 23.3024C8.39183 23.4775 9.00455 23.565 9.7048 23.565C10.4342 23.565 11.0105 23.4921 11.4335 23.3462C11.8712 23.2003 12.1849 22.9888 12.3745 22.7116C12.5787 22.4198 12.6809 22.0843 12.6809 21.705C12.6809 21.4132 12.6152 21.0558 12.4839 20.6327C12.3672 20.1951 12.1046 19.6115 11.6961 18.8821C11.2877 18.1381 10.6604 17.168 9.81422 15.9717L11.3241 14.987C12.0973 16.0519 12.71 17.0148 13.1623 17.8755C13.6291 18.7362 13.9574 19.4948 14.147 20.1513C14.3513 20.7932 14.4534 21.3476 14.4534 21.8144C14.4534 22.3979 14.3075 22.9669 14.0157 23.5213C13.7239 24.061 13.2352 24.506 12.5496 24.8561C11.8639 25.2062 10.9157 25.3813 9.7048 25.3813C9.17962 25.3813 8.66902 25.3375 8.17301 25.25C7.69158 25.1625 7.24663 25.0385 6.83816 24.878C6.42968 24.7029 6.07226 24.4987 5.7659 24.2653ZM18.0763 25.4032C17.1791 25.4032 16.4789 24.7029 16.4789 23.8057C16.4789 22.9085 17.1791 22.2083 18.0763 22.2083C18.9517 22.2083 19.6519 22.9085 19.6519 23.8057C19.6519 24.7029 18.9517 25.4032 18.0763 25.4032ZM28.2127 33.8718C27.4249 33.8718 26.608 33.777 25.7618 33.5873C24.9157 33.4123 24.1279 33.0986 23.3985 32.6464C22.6691 32.2087 22.0709 31.6106 21.6041 30.852C21.1518 30.108 20.9257 29.167 20.9257 28.0291C20.9257 26.9787 21.1373 25.994 21.5603 25.0749C21.9834 24.1559 22.5815 23.3243 23.3547 22.5803C24.1425 21.8363 25.0689 21.209 26.1338 20.6984C27.1988 20.1878 28.3732 19.8231 29.657 19.6042L30.1165 21.3111C29.0515 21.5007 28.0668 21.7852 27.1623 22.1645C26.2578 22.5438 25.4701 23.0107 24.799 23.565C24.1425 24.1048 23.6319 24.7248 23.2672 25.4251C22.9025 26.1399 22.7201 26.9204 22.7201 27.7665C22.7201 28.4522 22.8368 29.043 23.0702 29.539C23.3037 30.035 23.61 30.4435 23.9893 30.7645C24.3832 31.1 24.8209 31.3626 25.3023 31.5522C25.7837 31.7419 26.2724 31.8732 26.7684 31.9461C27.279 32.0337 27.7605 32.0774 28.2127 32.0774C28.9859 32.0774 29.7737 32.0045 30.576 31.8586C31.3784 31.7273 32.1078 31.5231 32.7643 31.2459L33.3333 32.7777C32.9831 32.9527 32.5163 33.1205 31.9328 33.281C31.3638 33.4561 30.7511 33.5946 30.0946 33.6968C29.4381 33.8135 28.8108 33.8718 28.2127 33.8718ZM24.602 22.2739C24.0185 22.1281 23.4933 21.8655 23.0265 21.4862C22.5596 21.1069 22.1876 20.6546 21.9104 20.1294C21.6479 19.6042 21.5166 19.0499 21.5166 18.4663C21.5166 17.5473 21.7281 16.7814 22.1512 16.1686C22.5888 15.5559 23.1432 15.0964 23.8143 14.79C24.4999 14.4837 25.222 14.3305 25.9806 14.3305C26.3162 14.3305 26.6736 14.3597 27.0529 14.418C27.4322 14.4764 27.7969 14.5639 28.147 14.6806L27.775 16.3656C27.4833 16.2926 27.1769 16.2343 26.856 16.1905C26.535 16.1468 26.2432 16.1249 25.9806 16.1249C25.4555 16.1249 24.9886 16.2197 24.5802 16.4093C24.1717 16.599 23.8507 16.8616 23.6173 17.1971C23.3839 17.5181 23.2672 17.8974 23.2672 18.335C23.2672 18.7289 23.3766 19.0863 23.5954 19.4073C23.8288 19.7137 24.1206 19.9835 24.4707 20.217C24.8209 20.4358 25.1783 20.6036 25.543 20.7203C25.9077 20.8224 26.2287 20.8661 26.5058 20.8516L24.602 22.2739Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3932">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const IQD = React.forwardRef<SVGSVGElement, IQDProps>(
+  ({ 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_3932)">
+        <circle cx="20" cy="20" r="20" fill="#2B713A"/>
+        <path d="M5.7659 24.2653L6.64121 22.7554C6.93298 22.945 7.34146 23.1274 7.86665 23.3024C8.39183 23.4775 9.00455 23.565 9.7048 23.565C10.4342 23.565 11.0105 23.4921 11.4335 23.3462C11.8712 23.2003 12.1849 22.9888 12.3745 22.7116C12.5787 22.4198 12.6809 22.0843 12.6809 21.705C12.6809 21.4132 12.6152 21.0558 12.4839 20.6327C12.3672 20.1951 12.1046 19.6115 11.6961 18.8821C11.2877 18.1381 10.6604 17.168 9.81422 15.9717L11.3241 14.987C12.0973 16.0519 12.71 17.0148 13.1623 17.8755C13.6291 18.7362 13.9574 19.4948 14.147 20.1513C14.3513 20.7932 14.4534 21.3476 14.4534 21.8144C14.4534 22.3979 14.3075 22.9669 14.0157 23.5213C13.7239 24.061 13.2352 24.506 12.5496 24.8561C11.8639 25.2062 10.9157 25.3813 9.7048 25.3813C9.17962 25.3813 8.66902 25.3375 8.17301 25.25C7.69158 25.1625 7.24663 25.0385 6.83816 24.878C6.42968 24.7029 6.07226 24.4987 5.7659 24.2653ZM18.0763 25.4032C17.1791 25.4032 16.4789 24.7029 16.4789 23.8057C16.4789 22.9085 17.1791 22.2083 18.0763 22.2083C18.9517 22.2083 19.6519 22.9085 19.6519 23.8057C19.6519 24.7029 18.9517 25.4032 18.0763 25.4032ZM28.2127 33.8718C27.4249 33.8718 26.608 33.777 25.7618 33.5873C24.9157 33.4123 24.1279 33.0986 23.3985 32.6464C22.6691 32.2087 22.0709 31.6106 21.6041 30.852C21.1518 30.108 20.9257 29.167 20.9257 28.0291C20.9257 26.9787 21.1373 25.994 21.5603 25.0749C21.9834 24.1559 22.5815 23.3243 23.3547 22.5803C24.1425 21.8363 25.0689 21.209 26.1338 20.6984C27.1988 20.1878 28.3732 19.8231 29.657 19.6042L30.1165 21.3111C29.0515 21.5007 28.0668 21.7852 27.1623 22.1645C26.2578 22.5438 25.4701 23.0107 24.799 23.565C24.1425 24.1048 23.6319 24.7248 23.2672 25.4251C22.9025 26.1399 22.7201 26.9204 22.7201 27.7665C22.7201 28.4522 22.8368 29.043 23.0702 29.539C23.3037 30.035 23.61 30.4435 23.9893 30.7645C24.3832 31.1 24.8209 31.3626 25.3023 31.5522C25.7837 31.7419 26.2724 31.8732 26.7684 31.9461C27.279 32.0337 27.7605 32.0774 28.2127 32.0774C28.9859 32.0774 29.7737 32.0045 30.576 31.8586C31.3784 31.7273 32.1078 31.5231 32.7643 31.2459L33.3333 32.7777C32.9831 32.9527 32.5163 33.1205 31.9328 33.281C31.3638 33.4561 30.7511 33.5946 30.0946 33.6968C29.4381 33.8135 28.8108 33.8718 28.2127 33.8718ZM24.602 22.2739C24.0185 22.1281 23.4933 21.8655 23.0265 21.4862C22.5596 21.1069 22.1876 20.6546 21.9104 20.1294C21.6479 19.6042 21.5166 19.0499 21.5166 18.4663C21.5166 17.5473 21.7281 16.7814 22.1512 16.1686C22.5888 15.5559 23.1432 15.0964 23.8143 14.79C24.4999 14.4837 25.222 14.3305 25.9806 14.3305C26.3162 14.3305 26.6736 14.3597 27.0529 14.418C27.4322 14.4764 27.7969 14.5639 28.147 14.6806L27.775 16.3656C27.4833 16.2926 27.1769 16.2343 26.856 16.1905C26.535 16.1468 26.2432 16.1249 25.9806 16.1249C25.4555 16.1249 24.9886 16.2197 24.5802 16.4093C24.1717 16.599 23.8507 16.8616 23.6173 17.1971C23.3839 17.5181 23.2672 17.8974 23.2672 18.335C23.2672 18.7289 23.3766 19.0863 23.5954 19.4073C23.8288 19.7137 24.1206 19.9835 24.4707 20.217C24.8209 20.4358 25.1783 20.6036 25.543 20.7203C25.9077 20.8224 26.2287 20.8661 26.5058 20.8516L24.602 22.2739Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3932">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 IQD.displayName = 'IQD';

package/react/dist/IconPlaceholder.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface IconPlaceholderProps extends Omit<IconBaseProps, 'children'> {}
+export interface IconPlaceholderProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const IconPlaceholder: React.FC<IconPlaceholderProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5 17.5V19H6.5V21H3V17.5H5ZM10.5 19V21H8.5V19H10.5ZM13.5 19V21H10.5V19H13.5ZM15.5 19V21H13.5V19H15.5ZM21 17.5V21H17.5V19H19V17.5H21ZM3 8.5H5V15.5H3V8.5ZM21 15.5H19V8.5H21V15.5ZM6.5 5H5V6.5H3V3H6.5V5ZM21 3V6.5H19V5H17.5V3H21ZM15.5 5H8.5V3H15.5V5Z" fill="currentColor"/>
+export const IconPlaceholder = React.forwardRef<SVGSVGElement, IconPlaceholderProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M5 17.5V19H6.5V21H3V17.5H5ZM10.5 19V21H8.5V19H10.5ZM13.5 19V21H10.5V19H13.5ZM15.5 19V21H13.5V19H15.5ZM21 17.5V21H17.5V19H19V17.5H21ZM3 8.5H5V15.5H3V8.5ZM21 15.5H19V8.5H21V15.5ZM6.5 5H5V6.5H3V3H6.5V5ZM21 3V6.5H19V5H17.5V3H21ZM15.5 5H8.5V3H15.5V5Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 IconPlaceholder.displayName = 'IconPlaceholder';

package/react/dist/Import.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ImportProps extends Omit<IconBaseProps, 'children'> {}
+export interface ImportProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Import: React.FC<ImportProps> = (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 19H20V8H4V19ZM12.8594 11.793L11.9395 12.5H17V14.5H11.9395L12.8594 15.207L11.6406 16.793L8.39062 14.293L7.36035 13.5L8.39062 12.707L11.6406 10.207L12.8594 11.793ZM14 4H4V2H14V4Z" fill="currentColor"/>
+export const Import = React.forwardRef<SVGSVGElement, ImportProps>(
+  ({ 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 19H20V8H4V19ZM12.8594 11.793L11.9395 12.5H17V14.5H11.9395L12.8594 15.207L11.6406 16.793L8.39062 14.293L7.36035 13.5L8.39062 12.707L11.6406 10.207L12.8594 11.793ZM14 4H4V2H14V4Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Import.displayName = 'Import';

package/react/dist/Info.tsx

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

package/react/dist/InfoFilled.tsx

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

package/react/dist/Ino.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface InoProps extends Omit<IconBaseProps, 'children'> {}
+export interface InoProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Ino: React.FC<InoProps> = (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="M7 18.5003C7 17.6719 6.32843 17.0003 5.5 17.0003C4.67157 17.0003 4 17.6719 4 18.5003V20.0003H5.5C6.32833 20.0003 6.99984 19.3286 7 18.5003ZM14.707 19.2933L13.293 20.7073L3.29297 10.7073L4.70703 9.29325L14.707 19.2933ZM9.22656 4.70439C12.1962 1.73475 16.769 1.07994 20.4531 3.09599L20.7178 3.24052L20.8584 3.50712C22.729 7.05772 22.0692 11.4125 19.2314 14.2503L15.8154 17.6673L14.4014 16.2532L17.8174 12.8362C19.9641 10.6895 20.5151 7.4325 19.2227 4.70927C16.3672 3.29415 12.911 3.85002 10.6416 6.11943L7.4541 9.30595L6.04004 7.89189L9.22656 4.70439ZM14.707 7.70732L13.4141 9.00029H17L17.707 10.7073L14.707 13.7073L13.293 12.2933L14.5859 11.0003H11L10.293 9.29325L13.293 6.29325L14.707 7.70732ZM9 18.5003C8.99984 20.4331 7.4329 22.0003 5.5 22.0003H2V18.5003C2 16.5673 3.567 15.0003 5.5 15.0003C7.433 15.0003 9 16.5673 9 18.5003Z" fill="currentColor"/>
+export const Ino = React.forwardRef<SVGSVGElement, InoProps>(
+  ({ 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="M7 18.5003C7 17.6719 6.32843 17.0003 5.5 17.0003C4.67157 17.0003 4 17.6719 4 18.5003V20.0003H5.5C6.32833 20.0003 6.99984 19.3286 7 18.5003ZM14.707 19.2933L13.293 20.7073L3.29297 10.7073L4.70703 9.29325L14.707 19.2933ZM9.22656 4.70439C12.1962 1.73475 16.769 1.07994 20.4531 3.09599L20.7178 3.24052L20.8584 3.50712C22.729 7.05772 22.0692 11.4125 19.2314 14.2503L15.8154 17.6673L14.4014 16.2532L17.8174 12.8362C19.9641 10.6895 20.5151 7.4325 19.2227 4.70927C16.3672 3.29415 12.911 3.85002 10.6416 6.11943L7.4541 9.30595L6.04004 7.89189L9.22656 4.70439ZM14.707 7.70732L13.4141 9.00029H17L17.707 10.7073L14.707 13.7073L13.293 12.2933L14.5859 11.0003H11L10.293 9.29325L13.293 6.29325L14.707 7.70732ZM9 18.5003C8.99984 20.4331 7.4329 22.0003 5.5 22.0003H2V18.5003C2 16.5673 3.567 15.0003 5.5 15.0003C7.433 15.0003 9 16.5673 9 18.5003Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Ino.displayName = 'Ino';

package/react/dist/Instagram.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface InstagramProps extends Omit<IconBaseProps, 'children'> {}
+export interface InstagramProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Instagram: React.FC<InstagramProps> = (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.9999 3C14.4454 3 14.7506 3.00884 15.71 3.05391C16.6695 3.09897 17.3209 3.24927 17.8951 3.47231C18.4932 3.70319 19.0364 4.05668 19.4898 4.51005C19.9432 4.96343 20.2967 5.50666 20.5276 6.10482C20.75 6.67809 20.9012 7.33123 20.9463 8.29011C20.9913 9.24899 21.0002 9.55474 21.0002 11.9999C21.0002 14.445 20.9911 14.7504 20.9463 15.7096C20.9015 16.6688 20.75 17.3208 20.5276 17.8949C20.2968 18.4931 19.9434 19.0364 19.49 19.4898C19.0366 19.9432 18.4933 20.2966 17.8951 20.5274C17.3218 20.7499 16.6686 20.901 15.71 20.9458C14.7514 20.9906 14.4454 21 11.9999 21C9.55452 21 9.24962 20.9909 8.29016 20.9458C7.3307 20.9007 6.67927 20.7499 6.10513 20.5274C5.5069 20.2966 4.9636 19.9432 4.5102 19.4898C4.05681 19.0364 3.70336 18.4931 3.4726 17.8949C3.24928 17.3216 3.09897 16.6685 3.05391 15.7096C3.00884 14.7507 3 14.4453 3 11.9999C3 9.55445 3.00884 9.24956 3.05391 8.29011C3.09897 7.33066 3.24928 6.67923 3.4726 6.10482C3.70348 5.50666 4.05697 4.96343 4.51035 4.51005C4.96373 4.05668 5.50697 3.70319 6.10513 3.47231C6.67927 3.24927 7.33155 3.09897 8.29016 3.05391C9.24877 3.00884 9.5548 3 11.9999 3ZM11.9999 7.49979C10.8064 7.49979 9.66182 7.9739 8.81788 8.81783C7.97395 9.66175 7.49983 10.8064 7.49983 11.9999C7.49983 13.1933 7.97395 14.338 8.81788 15.1819C9.66182 16.0258 10.8064 16.4999 11.9999 16.4999C13.1935 16.4999 14.3381 16.0258 15.182 15.1819C16.0259 14.338 16.5001 13.1933 16.5001 11.9999C16.5001 10.8064 16.0259 9.66175 15.182 8.81783C14.3381 7.9739 13.1935 7.49979 11.9999 7.49979ZM17.8503 7.27504C17.8503 7.05249 17.7844 6.83493 17.6608 6.64986C17.5372 6.46479 17.3615 6.32053 17.1559 6.23532C16.9503 6.15012 16.724 6.1278 16.5058 6.17118C16.2875 6.21456 16.087 6.3217 15.9296 6.47904C15.7722 6.63639 15.665 6.83687 15.6216 7.05514C15.5781 7.27341 15.6004 7.49966 15.6855 7.70527C15.7707 7.91088 15.9149 8.08662 16.1 8.21027C16.285 8.33392 16.5025 8.39991 16.7251 8.39991C17.0235 8.39991 17.3096 8.28141 17.5206 8.07046C17.7316 7.85952 17.8502 7.5734 17.8503 7.27504ZM11.9999 9.30004C12.534 9.29999 13.0561 9.4583 13.5002 9.75497C13.9442 10.0516 14.2904 10.4733 14.4948 10.9667C14.6992 11.4601 14.7527 12.003 14.6485 12.5268C14.5443 13.0506 14.2871 13.5318 13.9095 13.9094C13.5319 14.287 13.0507 14.5442 12.5269 14.6484C12.0031 14.7525 11.4602 14.6991 10.9668 14.4947C10.4734 14.2903 10.0517 13.9441 9.75504 13.5001C9.45837 13.056 9.30005 12.5339 9.30011 11.9999C9.30011 11.2838 9.58455 10.5971 10.0909 10.0908C10.5972 9.58449 11.2839 9.30004 11.9999 9.30004Z" fill="#0F0F0F"/>
+export const Instagram = React.forwardRef<SVGSVGElement, InstagramProps>(
+  ({ 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.9999 3C14.4454 3 14.7506 3.00884 15.71 3.05391C16.6695 3.09897 17.3209 3.24927 17.8951 3.47231C18.4932 3.70319 19.0364 4.05668 19.4898 4.51005C19.9432 4.96343 20.2967 5.50666 20.5276 6.10482C20.75 6.67809 20.9012 7.33123 20.9463 8.29011C20.9913 9.24899 21.0002 9.55474 21.0002 11.9999C21.0002 14.445 20.9911 14.7504 20.9463 15.7096C20.9015 16.6688 20.75 17.3208 20.5276 17.8949C20.2968 18.4931 19.9434 19.0364 19.49 19.4898C19.0366 19.9432 18.4933 20.2966 17.8951 20.5274C17.3218 20.7499 16.6686 20.901 15.71 20.9458C14.7514 20.9906 14.4454 21 11.9999 21C9.55452 21 9.24962 20.9909 8.29016 20.9458C7.3307 20.9007 6.67927 20.7499 6.10513 20.5274C5.5069 20.2966 4.9636 19.9432 4.5102 19.4898C4.05681 19.0364 3.70336 18.4931 3.4726 17.8949C3.24928 17.3216 3.09897 16.6685 3.05391 15.7096C3.00884 14.7507 3 14.4453 3 11.9999C3 9.55445 3.00884 9.24956 3.05391 8.29011C3.09897 7.33066 3.24928 6.67923 3.4726 6.10482C3.70348 5.50666 4.05697 4.96343 4.51035 4.51005C4.96373 4.05668 5.50697 3.70319 6.10513 3.47231C6.67927 3.24927 7.33155 3.09897 8.29016 3.05391C9.24877 3.00884 9.5548 3 11.9999 3ZM11.9999 7.49979C10.8064 7.49979 9.66182 7.9739 8.81788 8.81783C7.97395 9.66175 7.49983 10.8064 7.49983 11.9999C7.49983 13.1933 7.97395 14.338 8.81788 15.1819C9.66182 16.0258 10.8064 16.4999 11.9999 16.4999C13.1935 16.4999 14.3381 16.0258 15.182 15.1819C16.0259 14.338 16.5001 13.1933 16.5001 11.9999C16.5001 10.8064 16.0259 9.66175 15.182 8.81783C14.3381 7.9739 13.1935 7.49979 11.9999 7.49979ZM17.8503 7.27504C17.8503 7.05249 17.7844 6.83493 17.6608 6.64986C17.5372 6.46479 17.3615 6.32053 17.1559 6.23532C16.9503 6.15012 16.724 6.1278 16.5058 6.17118C16.2875 6.21456 16.087 6.3217 15.9296 6.47904C15.7722 6.63639 15.665 6.83687 15.6216 7.05514C15.5781 7.27341 15.6004 7.49966 15.6855 7.70527C15.7707 7.91088 15.9149 8.08662 16.1 8.21027C16.285 8.33392 16.5025 8.39991 16.7251 8.39991C17.0235 8.39991 17.3096 8.28141 17.5206 8.07046C17.7316 7.85952 17.8502 7.5734 17.8503 7.27504ZM11.9999 9.30004C12.534 9.29999 13.0561 9.4583 13.5002 9.75497C13.9442 10.0516 14.2904 10.4733 14.4948 10.9667C14.6992 11.4601 14.7527 12.003 14.6485 12.5268C14.5443 13.0506 14.2871 13.5318 13.9095 13.9094C13.5319 14.287 13.0507 14.5442 12.5269 14.6484C12.0031 14.7525 11.4602 14.6991 10.9668 14.4947C10.4734 14.2903 10.0517 13.9441 9.75504 13.5001C9.45837 13.056 9.30005 12.5339 9.30011 11.9999C9.30011 11.2838 9.58455 10.5971 10.0909 10.0908C10.5972 9.58449 11.2839 9.30004 11.9999 9.30004Z" fill="currentColor" />
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Instagram.displayName = 'Instagram';

package/react/dist/Institution.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface InstitutionProps extends Omit<IconBaseProps, 'children'> {}
+export interface InstitutionProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Institution: React.FC<InstitutionProps> = (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 7H11V5.38672L4 7.71973V20H11V9H22V22H2V6.2793L13 2.6123V7ZM13 20H20V11H13V20ZM19 18H14V16H19V18ZM19 15H14V13H19V15Z" fill="currentColor"/>
+export const Institution = React.forwardRef<SVGSVGElement, InstitutionProps>(
+  ({ 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 7H11V5.38672L4 7.71973V20H11V9H22V22H2V6.2793L13 2.6123V7ZM13 20H20V11H13V20ZM19 18H14V16H19V18ZM19 15H14V13H19V15Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Institution.displayName = 'Institution';