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

package/react/dist/XAF.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface XAFProps extends Omit<IconBaseProps, 'children'> {}
+export interface XAFProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const XAF: React.FC<XAFProps> = (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_3949)">
-      <circle cx="20" cy="20" r="20" fill="#50815C"/>
-      <path d="M4.875 16.075H10.9625V17.325H6.3375V19.8H10.7V21.05H6.3375V25H4.875V16.075ZM16.0254 15.9C17.0754 15.9 17.9504 16.175 18.6254 16.725C19.2754 17.25 19.6629 17.975 19.8004 18.875H18.3754C18.2254 18.2875 17.9504 17.8625 17.5379 17.5875C17.1379 17.3125 16.6254 17.1875 16.0004 17.1875C15.0629 17.1875 14.3629 17.5 13.8879 18.15C13.4504 18.725 13.2379 19.525 13.2379 20.55C13.2379 21.6 13.4504 22.4125 13.8754 22.975C14.3379 23.575 15.0629 23.8875 16.0379 23.8875C16.6754 23.8875 17.2004 23.725 17.6004 23.425C18.0254 23.0875 18.3254 22.575 18.5004 21.9H19.9254C19.7254 22.95 19.2629 23.7625 18.5254 24.35C17.8379 24.9 17.0129 25.175 16.0504 25.175C14.5629 25.175 13.4504 24.7 12.7254 23.775C12.0879 22.975 11.7754 21.9 11.7754 20.55C11.7754 19.225 12.1004 18.1375 12.7629 17.3125C13.5129 16.3625 14.6004 15.9 16.0254 15.9ZM21.3057 16.075H27.3932V17.325H22.7682V19.8H27.1307V21.05H22.7682V25H21.3057V16.075ZM31.1186 16.075H32.7811L36.1936 25H34.6311L33.8186 22.7625H30.0811L29.2686 25H27.7061L31.1186 16.075ZM30.5186 21.5625H33.3811L31.9811 17.65H31.9311L30.5186 21.5625Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3949">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const XAF = React.forwardRef<SVGSVGElement, XAFProps>(
+  ({ 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_3949)">
+        <circle cx="20" cy="20" r="20" fill="#50815C"/>
+        <path d="M4.875 16.075H10.9625V17.325H6.3375V19.8H10.7V21.05H6.3375V25H4.875V16.075ZM16.0254 15.9C17.0754 15.9 17.9504 16.175 18.6254 16.725C19.2754 17.25 19.6629 17.975 19.8004 18.875H18.3754C18.2254 18.2875 17.9504 17.8625 17.5379 17.5875C17.1379 17.3125 16.6254 17.1875 16.0004 17.1875C15.0629 17.1875 14.3629 17.5 13.8879 18.15C13.4504 18.725 13.2379 19.525 13.2379 20.55C13.2379 21.6 13.4504 22.4125 13.8754 22.975C14.3379 23.575 15.0629 23.8875 16.0379 23.8875C16.6754 23.8875 17.2004 23.725 17.6004 23.425C18.0254 23.0875 18.3254 22.575 18.5004 21.9H19.9254C19.7254 22.95 19.2629 23.7625 18.5254 24.35C17.8379 24.9 17.0129 25.175 16.0504 25.175C14.5629 25.175 13.4504 24.7 12.7254 23.775C12.0879 22.975 11.7754 21.9 11.7754 20.55C11.7754 19.225 12.1004 18.1375 12.7629 17.3125C13.5129 16.3625 14.6004 15.9 16.0254 15.9ZM21.3057 16.075H27.3932V17.325H22.7682V19.8H27.1307V21.05H22.7682V25H21.3057V16.075ZM31.1186 16.075H32.7811L36.1936 25H34.6311L33.8186 22.7625H30.0811L29.2686 25H27.7061L31.1186 16.075ZM30.5186 21.5625H33.3811L31.9811 17.65H31.9311L30.5186 21.5625Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3949">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 XAF.displayName = 'XAF';

package/react/dist/XInsight.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface XInsightProps extends Omit<IconBaseProps, 'children'> {}
+export interface XInsightProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const XInsight: React.FC<XInsightProps> = (props) => {
-  return (
-    <IconBase {...props}>
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M17.8539 2.85938H20.9552L14.1798 10.6031L22.1505 21.1406H15.9095L11.0214 14.7497L5.42827 21.1406H2.32516L9.57202 12.8578L1.92578 2.85938H8.32516L12.7436 8.70094L17.8539 2.85938ZM16.7655 19.2844H18.4839L7.39139 4.61813H5.54731L16.7655 19.2844Z" fill="currentColor"/>
+export const XInsight = React.forwardRef<SVGSVGElement, XInsightProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M17.8539 2.85938H20.9552L14.1798 10.6031L22.1505 21.1406H15.9095L11.0214 14.7497L5.42827 21.1406H2.32516L9.57202 12.8578L1.92578 2.85938H8.32516L12.7436 8.70094L17.8539 2.85938ZM16.7655 19.2844H18.4839L7.39139 4.61813H5.54731L16.7655 19.2844Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 XInsight.displayName = 'XInsight';

package/react/dist/XOF.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface XOFProps extends Omit<IconBaseProps, 'children'> {}
+export interface XOFProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const XOF: React.FC<XOFProps> = (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_3946)">
-      <circle cx="20" cy="20" r="20" fill="#50815C"/>
-      <path d="M9.925 13.92C11.29 13.92 12.4275 14.2775 13.305 14.9925C14.15 15.675 14.6538 16.6175 14.8325 17.7875H12.98C12.785 17.0237 12.4275 16.4712 11.8913 16.1137C11.3713 15.7562 10.705 15.5938 9.8925 15.5938C8.67375 15.5938 7.76375 16 7.14625 16.845C6.5775 17.5925 6.30125 18.6325 6.30125 19.965C6.30125 21.33 6.5775 22.3862 7.13 23.1175C7.73125 23.8975 8.67375 24.3037 9.94125 24.3037C10.77 24.3037 11.4525 24.0925 11.9725 23.7025C12.525 23.2637 12.915 22.5975 13.1425 21.72H14.995C14.735 23.085 14.1338 24.1412 13.175 24.905C12.2813 25.62 11.2088 25.9775 9.9575 25.9775C8.02375 25.9775 6.5775 25.36 5.635 24.1575C4.80625 23.1175 4.4 21.72 4.4 19.965C4.4 18.2425 4.8225 16.8287 5.68375 15.7562C6.65875 14.5212 8.0725 13.92 9.925 13.92ZM16.7894 14.1475H24.7031V15.7725H18.6906V18.99H24.3619V20.615H18.6906V25.75H16.7894V14.1475ZM29.5461 14.1475H31.7074L36.1436 25.75H34.1124L33.0561 22.8412H28.1974L27.1411 25.75H25.1099L29.5461 14.1475ZM28.7661 21.2812H32.4874L30.6674 16.195H30.6024L28.7661 21.2812Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3946">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const XOF = React.forwardRef<SVGSVGElement, XOFProps>(
+  ({ 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_3946)">
+        <circle cx="20" cy="20" r="20" fill="#50815C"/>
+        <path d="M9.925 13.92C11.29 13.92 12.4275 14.2775 13.305 14.9925C14.15 15.675 14.6538 16.6175 14.8325 17.7875H12.98C12.785 17.0237 12.4275 16.4712 11.8913 16.1137C11.3713 15.7562 10.705 15.5938 9.8925 15.5938C8.67375 15.5938 7.76375 16 7.14625 16.845C6.5775 17.5925 6.30125 18.6325 6.30125 19.965C6.30125 21.33 6.5775 22.3862 7.13 23.1175C7.73125 23.8975 8.67375 24.3037 9.94125 24.3037C10.77 24.3037 11.4525 24.0925 11.9725 23.7025C12.525 23.2637 12.915 22.5975 13.1425 21.72H14.995C14.735 23.085 14.1338 24.1412 13.175 24.905C12.2813 25.62 11.2088 25.9775 9.9575 25.9775C8.02375 25.9775 6.5775 25.36 5.635 24.1575C4.80625 23.1175 4.4 21.72 4.4 19.965C4.4 18.2425 4.8225 16.8287 5.68375 15.7562C6.65875 14.5212 8.0725 13.92 9.925 13.92ZM16.7894 14.1475H24.7031V15.7725H18.6906V18.99H24.3619V20.615H18.6906V25.75H16.7894V14.1475ZM29.5461 14.1475H31.7074L36.1436 25.75H34.1124L33.0561 22.8412H28.1974L27.1411 25.75H25.1099L29.5461 14.1475ZM28.7661 21.2812H32.4874L30.6674 16.195H30.6024L28.7661 21.2812Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3946">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 XOF.displayName = 'XOF';

package/react/dist/Youtube.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface YoutubeProps extends Omit<IconBaseProps, 'children'> {}
+export interface YoutubeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const Youtube: React.FC<YoutubeProps> = (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="M19.2725 4.95716L17.9452 4.81649C13.9741 4.3945 9.97138 4.3945 6.00021 4.81649L4.72753 4.95716C3.96915 5.04558 3.26982 5.42201 2.76569 6.01314C2.26157 6.60427 1.98875 7.3678 2.00036 8.15504V15.845C1.98875 16.6322 2.26157 17.3957 2.76569 17.9869C3.26982 18.578 3.96915 18.9544 4.72753 19.0428L6.05476 19.1835C10.0259 19.6055 14.0286 19.6055 17.9998 19.1835L19.2725 19.0428C20.0308 18.9544 20.7302 18.578 21.2343 17.9869C21.7384 17.3957 22.0112 16.6322 21.9996 15.845V8.15504C22.0112 7.3678 21.7384 6.60427 21.2343 6.01314C20.7302 5.42201 20.0308 5.04558 19.2725 4.95716ZM14.7272 12.5814L11.1909 15.0197C11.0896 15.0771 10.9759 15.1069 10.8603 15.1065C10.7448 15.1061 10.6312 15.0753 10.5304 15.0172C10.4295 14.9591 10.3446 14.8755 10.2836 14.7742C10.2227 14.6729 10.1876 14.5573 10.1819 14.4383V9.56173C10.1821 9.43416 10.216 9.30904 10.2798 9.19979C10.3437 9.09055 10.4352 9.00127 10.5444 8.94154C10.6537 8.8818 10.7767 8.85385 10.9002 8.86068C11.0237 8.86751 11.143 8.90886 11.2455 8.9803L14.7817 11.4186C14.8755 11.4816 14.9526 11.5678 15.0059 11.6693C15.0592 11.7709 15.0872 11.8845 15.0872 12C15.0872 12.1155 15.0592 12.2291 15.0059 12.3307C14.9526 12.4322 14.8755 12.5184 14.7817 12.5814H14.7272Z" fill="#0F0F0F"/>
+export const Youtube = React.forwardRef<SVGSVGElement, YoutubeProps>(
+  ({ 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="M19.2725 4.95716L17.9452 4.81649C13.9741 4.3945 9.97138 4.3945 6.00021 4.81649L4.72753 4.95716C3.96915 5.04558 3.26982 5.42201 2.76569 6.01314C2.26157 6.60427 1.98875 7.3678 2.00036 8.15504V15.845C1.98875 16.6322 2.26157 17.3957 2.76569 17.9869C3.26982 18.578 3.96915 18.9544 4.72753 19.0428L6.05476 19.1835C10.0259 19.6055 14.0286 19.6055 17.9998 19.1835L19.2725 19.0428C20.0308 18.9544 20.7302 18.578 21.2343 17.9869C21.7384 17.3957 22.0112 16.6322 21.9996 15.845V8.15504C22.0112 7.3678 21.7384 6.60427 21.2343 6.01314C20.7302 5.42201 20.0308 5.04558 19.2725 4.95716ZM14.7272 12.5814L11.1909 15.0197C11.0896 15.0771 10.9759 15.1069 10.8603 15.1065C10.7448 15.1061 10.6312 15.0753 10.5304 15.0172C10.4295 14.9591 10.3446 14.8755 10.2836 14.7742C10.2227 14.6729 10.1876 14.5573 10.1819 14.4383V9.56173C10.1821 9.43416 10.216 9.30904 10.2798 9.19979C10.3437 9.09055 10.4352 9.00127 10.5444 8.94154C10.6537 8.8818 10.7767 8.85385 10.9002 8.86068C11.0237 8.86751 11.143 8.90886 11.2455 8.9803L14.7817 11.4186C14.8755 11.4816 14.9526 11.5678 15.0059 11.6693C15.0592 11.7709 15.0872 11.8845 15.0872 12C15.0872 12.1155 15.0592 12.2291 15.0059 12.3307C14.9526 12.4322 14.8755 12.5184 14.7817 12.5814H14.7272Z" fill="currentColor"/>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 Youtube.displayName = 'Youtube';

package/react/dist/ZAR.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { IconBase, type IconBaseProps } from '../src/IconBase';
 
-export interface ZARProps extends Omit<IconBaseProps, 'children'> {}
+export interface ZARProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
 
-export const ZAR: React.FC<ZARProps> = (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_3970)">
-      <circle cx="20" cy="20" r="20" fill="#2B713A"/>
-      <path d="M25.02 27.75H22.185L18.81 21H15.7725V27.75H13.3425V11.73H19.5525C21.0525 11.73 22.2525 12.165 23.1525 13.035C24.0675 13.905 24.525 15.03 24.525 16.41C24.525 17.505 24.225 18.4275 23.625 19.1775C23.04 19.9125 22.275 20.4075 21.33 20.6625L25.02 27.75ZM21.3525 18.2775C21.8475 17.8275 22.095 17.2125 22.095 16.4325C22.095 15.6525 21.8475 15.0375 21.3525 14.5875C20.8575 14.1375 20.1975 13.9125 19.3725 13.9125H15.7725V18.93H19.3725C20.1975 18.93 20.8575 18.7125 21.3525 18.2775ZM29.0537 24.5325C29.5037 24.5325 29.9087 24.69 30.2462 25.005C30.5612 25.32 30.7412 25.725 30.7412 26.22C30.7412 26.67 30.5612 27.075 30.2462 27.4125C29.9087 27.705 29.5037 27.8625 29.0537 27.8625C28.5587 27.8625 28.1762 27.705 27.8837 27.4125C27.5462 27.075 27.3887 26.67 27.3887 26.22C27.3887 25.725 27.5462 25.32 27.8837 25.005C28.1762 24.69 28.5587 24.5325 29.0537 24.5325Z" fill="white"/>
-      </g>
-      <defs>
-      <clipPath id="clip0_72_3970">
-      <rect width="40" height="40" fill="white"/>
-      </clipPath>
-      </defs>
+export const ZAR = React.forwardRef<SVGSVGElement, ZARProps>(
+  ({ 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_3970)">
+        <circle cx="20" cy="20" r="20" fill="#2B713A"/>
+        <path d="M25.02 27.75H22.185L18.81 21H15.7725V27.75H13.3425V11.73H19.5525C21.0525 11.73 22.2525 12.165 23.1525 13.035C24.0675 13.905 24.525 15.03 24.525 16.41C24.525 17.505 24.225 18.4275 23.625 19.1775C23.04 19.9125 22.275 20.4075 21.33 20.6625L25.02 27.75ZM21.3525 18.2775C21.8475 17.8275 22.095 17.2125 22.095 16.4325C22.095 15.6525 21.8475 15.0375 21.3525 14.5875C20.8575 14.1375 20.1975 13.9125 19.3725 13.9125H15.7725V18.93H19.3725C20.1975 18.93 20.8575 18.7125 21.3525 18.2775ZM29.0537 24.5325C29.5037 24.5325 29.9087 24.69 30.2462 25.005C30.5612 25.32 30.7412 25.725 30.7412 26.22C30.7412 26.67 30.5612 27.075 30.2462 27.4125C29.9087 27.705 29.5037 27.8625 29.0537 27.8625C28.5587 27.8625 28.1762 27.705 27.8837 27.4125C27.5462 27.075 27.3887 26.67 27.3887 26.22C27.3887 25.725 27.5462 25.32 27.8837 25.005C28.1762 24.69 28.5587 24.5325 29.0537 24.5325Z" fill="white"/>
+        </g>
+        <defs>
+        <clipPath id="clip0_72_3970">
+        <rect width="40" height="40" fill="white"/>
+        </clipPath>
+        </defs>
       </svg>
-    </IconBase>
-  );
-};
+    );
+  }
+);
 
 ZAR.displayName = 'ZAR';