@liner-fe/icon 0.1.0 → 0.1.2

package/assets/arrow-drop-right/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowDropRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowDropRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowDropRight = forwardRef<SVGSVGElement, ArrowDropRightProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M17 12.502L17 35.6736C17 36.5645 18.0771 37.0107 18.7071 36.3807L29.5858 25.502C30.3668 24.721 30.3668 23.4546 29.5858 22.6736L18.7071 11.7949C18.0771 11.1649 17 11.6111 17 12.502Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-forward/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowForwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowForwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowForward = forwardRef<SVGSVGElement, ArrowForwardProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.5857 37.5857L31.1713 24L17.5857 10.4144L20.4141 7.58594L33.9998 21.1716C35.5619 22.7337 35.5619 25.2663 33.9998 26.8284L20.4141 40.4141L17.5857 37.5857Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-left/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowLeftProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowLeftProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowLeft = forwardRef<SVGSVGElement, ArrowLeftProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M12.829 21.9997L22.9924 11.8362L20.164 9.00781L8.00043 21.1714C6.43833 22.7335 6.43833 25.2662 8.00043 26.8282L20.164 38.9918L22.9924 36.1634L12.8287 25.9997L41.0001 25.9997L41.0001 21.9997L12.829 21.9997Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-right/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowRight = forwardRef<SVGSVGElement, ArrowRightProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3777 25.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.3777Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3777 25.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.3777Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.1706 26.0005L25.0077 36.1634L27.8361 38.9918L39.9997 26.8283C41.5618 25.2662 41.5618 22.7335 39.9997 21.1714L27.8361 9.00781L25.0077 11.8362L35.1719 22.0005L7 22.0005V26.0005L35.1706 26.0005Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M36.3777 25.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.3777Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-turn/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowTurnProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowTurnProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowTurn = forwardRef<SVGSVGElement, ArrowTurnProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M10 31C7.79086 31 6 29.2091 6 27V5.5H10V27H36.1716L27.4022 18.2306L30.2306 15.4022L41 26.1716C42.5621 27.7337 42.5621 30.2663 41 31.8284L30.2306 42.5978L27.4022 39.7694L36.1716 31H10Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-up/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowUpProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowUpProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowUp = forwardRef<SVGSVGElement, ArrowUpProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.6207Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.6207Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M26 12.8278L36.1639 22.9917L38.9923 20.1633L26.8287 7.9997C25.2666 6.4376 22.734 6.4376 21.1719 7.9997L9.0083 20.1633L11.8367 22.9917L22 12.8285V41.0003H26V12.8278Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.6207Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-up-down/index.tsx

@@ -1,39 +1,39 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowUpDownProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowUpDownProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowUpDown = forwardRef<SVGSVGElement, ArrowUpDownProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M32.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.6195Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M32.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.6195Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M16.0005 13.8274L22.5873 20.4142L25.4157 17.5858L16.4566 8.62663C15.1002 7.27029 12.9012 7.27029 11.5449 8.62663L2.58569 17.5858L5.41412 20.4142L12.0005 13.8278V40H16.0005V13.8274Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.0009 34.1745L25.4141 27.5877L22.5857 30.4162L31.5449 39.3753C32.9012 40.7317 35.1003 40.7317 36.4566 39.3753L45.4158 30.4162L42.5873 27.5877L36.0009 34.1742V8.00097L32.0009 8.00097V34.1745Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M32.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.6195Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/arrow-up-left/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowUpLeftProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowUpLeftProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowUpLeft = forwardRef<SVGSVGElement, ArrowUpLeftProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M12.5858 15.8286L12.5858 31H8.58581L8.58581 13C8.58581 10.7909 10.3767 9 12.5858 9H30.5858V13L15.4141 13L39 36.5859L36.1716 39.4144L12.5858 15.8286Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-up-right/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowUpRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowUpRightProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowUpRight = forwardRef<SVGSVGElement, ArrowUpRightProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M34.9999 15.8286L34.9999 31H38.9999L38.9999 13C38.9999 10.7909 37.209 9 34.9999 9H16.9999V13L32.1716 13L8.58569 36.5859L11.4141 39.4144L34.9999 15.8286Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 14.6214Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/arrow-upward/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface ArrowUpwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ArrowUpwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconArrowUpward = forwardRef<SVGSVGElement, ArrowUpwardProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.9392 30.0602L24.3535 16.4746C24.1583 16.2793 23.8417 16.2793 23.6464 16.4746L10.0608 30.0602L7.93945 27.9389L21.5251 14.3533C22.8919 12.9864 25.108 12.9864 26.4748 14.3533L40.0605 27.9389L37.9392 30.0602Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.9392 30.0602L24.3535 16.4746C24.1583 16.2793 23.8417 16.2793 23.6464 16.4746L10.0608 30.0602L7.93945 27.9389L21.5251 14.3533C22.8919 12.9864 25.108 12.9864 26.4748 14.3533L40.0605 27.9389L37.9392 30.0602Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.5857 30.4138L24 16.8281L10.4144 30.4138L7.58594 27.5853L21.1716 13.9997C22.7337 12.4376 25.2663 12.4376 26.8284 13.9997L40.4141 27.5853L37.5857 30.4138Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.9392 30.0602L24.3535 16.4746C24.1583 16.2793 23.8417 16.2793 23.6464 16.4746L10.0608 30.0602L7.93945 27.9389L21.5251 14.3533C22.8919 12.9864 25.108 12.9864 26.4748 14.3533L40.0605 27.9389L37.9392 30.0602Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/bag/index.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface BagProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface BagProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBag = forwardRef<SVGSVGElement, BagProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M30 5C31.1046 5 32 5.89543 32 7V13H42L42.2041 13.0107C42.2705 13.0175 42.3361 13.027 42.4004 13.04L42.4033 13.041L42.5713 13.083C42.5742 13.0839 42.5771 13.085 42.5801 13.0859C42.6128 13.0958 42.6448 13.1076 42.6768 13.1191C42.7037 13.1288 42.7305 13.1386 42.7568 13.1494C42.7863 13.1615 42.815 13.1751 42.8438 13.1885C42.8726 13.2019 42.9016 13.2147 42.9297 13.2295C42.9563 13.2435 42.9819 13.2592 43.0078 13.2744C43.0365 13.2912 43.065 13.308 43.0928 13.3262C43.1165 13.3417 43.1391 13.3585 43.1621 13.375C43.1898 13.3948 43.2175 13.4144 43.2441 13.4355C43.2651 13.4523 43.2854 13.4698 43.3057 13.4873C43.334 13.5117 43.3618 13.5365 43.3887 13.5625C43.4062 13.5795 43.4235 13.5967 43.4404 13.6143C43.466 13.6408 43.4905 13.6683 43.5146 13.6963C43.5315 13.7159 43.5483 13.7356 43.5645 13.7559C43.5872 13.7844 43.6087 13.8139 43.6299 13.8438C43.646 13.8665 43.6615 13.8896 43.6768 13.9131C43.694 13.9397 43.7105 13.9667 43.7266 13.9941C43.7415 14.0197 43.7567 14.045 43.7705 14.0713C43.7884 14.1054 43.8043 14.1405 43.8203 14.1758C43.8301 14.1973 43.8406 14.2184 43.8496 14.2402C43.8646 14.2766 43.8768 14.3141 43.8896 14.3516C43.8975 14.3743 43.9061 14.3968 43.9131 14.4199C43.9253 14.4604 43.9356 14.5015 43.9453 14.543C43.9503 14.5644 43.9556 14.5857 43.96 14.6074C43.9853 14.7344 44 14.8655 44 15V41C44 41.1337 43.986 41.2642 43.9609 41.3906C43.9566 41.4127 43.9504 41.4343 43.9453 41.4561C43.9356 41.4976 43.9253 41.5386 43.9131 41.5791C43.9061 41.6022 43.8974 41.6247 43.8896 41.6475C43.8768 41.6849 43.8646 41.7224 43.8496 41.7588C43.8406 41.7807 43.83 41.8018 43.8203 41.8232C43.8043 41.8585 43.7884 41.8936 43.7705 41.9277C43.7567 41.954 43.7415 41.9793 43.7266 42.0049C43.7105 42.0323 43.694 42.0593 43.6768 42.0859C43.6615 42.1094 43.646 42.1325 43.6299 42.1553C43.6087 42.1851 43.5872 42.2146 43.5645 42.2432C43.5483 42.2634 43.5315 42.2831 43.5146 42.3027C43.4906 42.3307 43.466 42.3582 43.4404 42.3848C43.4235 42.4024 43.4062 42.4195 43.3887 42.4365C43.3618 42.4625 43.334 42.4873 43.3057 42.5117C43.2854 42.5293 43.2651 42.5467 43.2441 42.5635C43.2175 42.5847 43.1898 42.6042 43.1621 42.624C43.1391 42.6405 43.1165 42.6573 43.0928 42.6729C43.065 42.691 43.0365 42.7078 43.0078 42.7246C42.9819 42.7398 42.9563 42.7555 42.9297 42.7695C42.9016 42.7843 42.8726 42.7971 42.8438 42.8105C42.815 42.824 42.7863 42.8375 42.7568 42.8496C42.7305 42.8604 42.7037 42.8702 42.6768 42.8799C42.6448 42.8914 42.6128 42.9032 42.5801 42.9131C42.5336 42.9271 42.4863 42.9385 42.4385 42.9492C42.4257 42.9521 42.4133 42.9564 42.4004 42.959C42.336 42.9721 42.2706 42.9825 42.2041 42.9893C42.137 42.9961 42.0689 43 42 43H6C5.86552 43 5.73445 42.9853 5.60742 42.96C5.58574 42.9556 5.56439 42.9503 5.54297 42.9453C5.50147 42.9356 5.46038 42.9253 5.41992 42.9131C5.3968 42.9061 5.37432 42.8975 5.35156 42.8896C5.31412 42.8768 5.27664 42.8646 5.24023 42.8496C5.21836 42.8406 5.19726 42.8301 5.17578 42.8203C5.14054 42.8043 5.1054 42.7884 5.07129 42.7705C5.04504 42.7567 5.01969 42.7415 4.99414 42.7266C4.9667 42.7105 4.93968 42.694 4.91309 42.6768C4.88965 42.6615 4.8665 42.646 4.84375 42.6299C4.81394 42.6087 4.78443 42.5872 4.75586 42.5645C4.73559 42.5483 4.71591 42.5315 4.69629 42.5146C4.66833 42.4905 4.64084 42.466 4.61426 42.4404C4.59666 42.4235 4.57947 42.4062 4.5625 42.3887C4.53655 42.3618 4.51173 42.334 4.4873 42.3057C4.46978 42.2854 4.45226 42.2651 4.43555 42.2441C4.41438 42.2175 4.39482 42.1898 4.375 42.1621C4.35853 42.1391 4.34167 42.1165 4.32617 42.0928C4.30803 42.065 4.29119 42.0365 4.27441 42.0078C4.25925 41.9819 4.24351 41.9563 4.22949 41.9297C4.21473 41.9016 4.20192 41.8726 4.18848 41.8438C4.17506 41.815 4.16148 41.7863 4.14941 41.7568C4.13862 41.7305 4.12882 41.7037 4.11914 41.6768C4.10763 41.6448 4.09584 41.6128 4.08594 41.5801C4.04937 41.4592 4.02386 41.3335 4.01074 41.2041L4 41V15C4 14.9311 4.00394 14.863 4.01074 14.7959C4.113 13.7872 4.96435 13 6 13H16V7C16 5.89543 16.8954 5 18 5H30ZM20 13H28V9H20V13Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M30 5C31.1046 5 32 5.89543 32 7V13H42L42.2041 13.0107C43.2128 13.113 44 13.9643 44 15V41C44 42.0357 43.2128 42.887 42.2041 42.9893L42 43H6C4.96435 43 4.113 42.2128 4.01074 41.2041L4 41V15C4 13.8954 4.89543 13 6 13H16V7C16 5.89543 16.8954 5 18 5H30ZM7 40H41V16H7V40ZM19 13H29V8H19V13Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M30 5C31.1046 5 32 5.89543 32 7V13H42L42.2041 13.0107C43.2128 13.113 44 13.9643 44 15V41C44 42.0357 43.2128 42.887 42.2041 42.9893L42 43H6C4.96435 43 4.113 42.2128 4.01074 41.2041L4 41V15C4 13.8954 4.89543 13 6 13H16V7C16 5.89543 16.8954 5 18 5H30ZM8 39H40V17H8V39ZM20 13H28V9H20V13Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M30 5C31.1046 5 32 5.89543 32 7V13H42L42.2041 13.0107C43.2128 13.113 44 13.9643 44 15V41C44 42.0357 43.2128 42.887 42.2041 42.9893L42 43H6C4.96435 43 4.113 42.2128 4.01074 41.2041L4 41V15C4 13.8954 4.89543 13 6 13H16V7C16 5.89543 16.8954 5 18 5H30ZM7 40H41V16H7V40ZM19 13H29V8H19V13Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/balance/index.tsx

@@ -1,34 +1,34 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface BalanceProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface BalanceProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBalance = forwardRef<SVGSVGElement, BalanceProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.2842 11.1646L39.312 7.9497L38.4184 4.05078L5.98584 11.4838L6.8794 15.3827L21.2842 12.0814L21.2842 39.0006H11.5469V43.0006H34.8807V39.0006H25.2842L25.2842 11.1646Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39.1225 22.3672C39.5542 23.6622 38.5903 24.9996 37.2251 24.9996H30.7748C29.4097 24.9996 28.4458 23.6622 28.8775 22.3672L32.1026 12.6917C32.7104 10.8683 35.2896 10.8683 35.8974 12.6917L39.1225 22.3672Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18.1225 27.3672C18.5542 28.6622 17.5903 29.9996 16.2251 29.9996H9.77485C8.40973 29.9996 7.44579 28.6622 7.87748 27.3672L11.1026 17.6917C11.7104 15.8683 14.2896 15.8683 14.8974 17.6917L18.1225 27.3672Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24.7841 10.7672L39.2004 7.46325L38.5302 4.53906L6.09766 11.972L6.76783 14.8962L21.7841 11.4548L21.7841 39.5018H11.547V42.5018H34.8808V39.5018H24.7841L24.7841 10.7672Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39.1224 22.3683C39.5541 23.6633 38.5902 25.0007 37.2251 25.0007H30.7748C29.4096 25.0007 28.4457 23.6633 28.8774 22.3682L32.1025 12.6928C32.7103 10.8694 35.2895 10.8694 35.8973 12.6928L39.1224 22.3683Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18.1224 27.3683C18.5541 28.6633 17.5902 30.0007 16.2251 30.0007H9.77476C8.40964 30.0007 7.4457 28.6633 7.87739 27.3683L11.1025 17.6928C11.7103 15.8694 14.2895 15.8694 14.8973 17.6928L18.1224 27.3683Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.2842 11.1647L39.3122 7.9497L38.4187 4.05078L5.98608 11.4838L6.87965 15.3827L21.2842 12.0814L21.2842 39.0009H11.5471V43.0009H34.8809V39.0009H25.2842L25.2842 11.1647Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.7749 27.7405H38.0523C39.4174 27.7405 40.3813 26.4031 39.9496 25.108L35.8109 12.692C35.2031 10.8686 32.624 10.8686 32.0162 12.6919L27.8775 25.108C27.4458 26.4031 28.4098 27.7405 29.7749 27.7405ZM35.2774 23.7405L33.9136 19.649L32.5497 23.7405H35.2774Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.0523 32.925H8.77488C7.40976 32.925 6.44583 31.5877 6.87751 30.2926L11.0162 17.8765C11.624 16.0531 14.2031 16.0531 14.8109 17.8765L18.9496 30.2926C19.3813 31.5877 18.4174 32.925 17.0523 32.925ZM12.9136 24.8335L14.2774 28.925H11.5497L12.9136 24.8335Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconBalance = forwardRef<SVGSVGElement, BalanceProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24.7841 10.7672L39.2004 7.46325L38.5302 4.53906L6.09766 11.972L6.76783 14.8962L21.7841 11.4548L21.7841 39.5018H11.547V42.5018H34.8808V39.5018H24.7841L24.7841 10.7672Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.7748 27.7414H38.0521C39.4173 27.7414 40.3812 26.404 39.9495 25.1089L35.8108 12.6929C35.203 10.8695 32.6239 10.8695 32.0161 12.6929L27.8774 25.1089C27.4457 26.404 28.4096 27.7414 29.7748 27.7414ZM36.6647 24.7414L33.9134 16.4876L31.1622 24.7414H36.6647Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.0521 32.926H8.77476C7.40964 32.926 6.4457 31.5886 6.87739 30.2935L11.0161 17.8774C11.6239 16.054 14.203 16.054 14.8108 17.8774L18.9495 30.2935C19.3812 31.5886 18.4173 32.926 17.0521 32.926ZM12.9134 21.6722L15.6647 29.926H10.1622L12.9134 21.6722Z" style={{ fill: `var(--${type})` }}/>