@liner-fe/icon 0.0.55 → 0.1.1

package/assets/desktop-on-cursor/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 DesktopOnCursorProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DesktopOnCursor = forwardRef<SVGSVGElement, DesktopOnCursorProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDesktopOnCursor = forwardRef<SVGSVGElement, DesktopOnCursorProps>(
+  ({ 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="M9 33V12H39V21H42V11C42 9.89543 41.1046 9 40 9H8C6.89543 9 6 9.89543 6 11V34C6 35.1046 6.89543 36 8 36H28V33H9Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 38.5H34V41.5H14V38.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.216 20.6461C27.9913 19.7961 28.8941 19.0908 29.6645 19.5144L41.3975 25.965C42.1742 26.392 42.0526 27.5434 41.2039 27.7989L37.6682 28.8629L42.177 34.5698L39.823 36.4296L35.3184 30.728L33.4628 33.847C33.0096 34.6087 31.8629 34.448 31.6365 33.5912L28.216 20.6461Z" 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="M9 33V12H39V21H42V11C42 9.89543 41.1046 9 40 9H8C6.89543 9 6 9.89543 6 11V34C6 35.1046 6.89543 36 8 36H28V33H9Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 38.5H34V41.5H14V38.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.216 20.6461C27.9913 19.7961 28.8941 19.0908 29.6645 19.5144L41.3975 25.965C42.1742 26.392 42.0526 27.5434 41.2039 27.7989L37.6682 28.8629L42.177 34.5698L39.823 36.4296L35.3184 30.728L33.4628 33.847C33.0096 34.6087 31.8629 34.448 31.6365 33.5912L28.216 20.6461Z" 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 32V13H38V21H42V11C42 9.89543 41.1046 9 40 9H8C6.89543 9 6 9.89543 6 11V34C6 35.1046 6.89543 36 8 36H28V32H10Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 38H34V42H14V38Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.216 20.6461C27.9913 19.7961 28.8941 19.0908 29.6645 19.5144L41.3975 25.965C42.1742 26.392 42.0526 27.5434 41.2039 27.7989L38.183 28.708L42.5693 34.2598L39.4307 36.7395L35.0446 31.1881L33.4628 33.847C33.0096 34.6087 31.8629 34.448 31.6365 33.5912L28.216 20.6461Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const DesktopOnCursor = forwardRef<SVGSVGElement, DesktopOnCursorProps>(
 ;
   } 
   
-  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="M9 33V12H39V21H42V11C42 9.89543 41.1046 9 40 9H8C6.89543 9 6 9.89543 6 11V34C6 35.1046 6.89543 36 8 36H28V33H9Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 38.5H34V41.5H14V38.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.216 20.6461C27.9913 19.7961 28.8941 19.0908 29.6645 19.5144L41.3975 25.965C42.1742 26.392 42.0526 27.5434 41.2039 27.7989L37.6682 28.8629L42.177 34.5698L39.823 36.4296L35.3184 30.728L33.4628 33.847C33.0096 34.6087 31.8629 34.448 31.6365 33.5912L28.216 20.6461Z" style={{ fill: `var(--${type})` }}/>

package/assets/document/index.tsx

@@ -1,38 +1,38 @@
 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 DocumentProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Document = forwardRef<SVGSVGElement, DocumentProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDocument = forwardRef<SVGSVGElement, DocumentProps>(
+  ({ 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="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H39V42C39 43.1046 38.1045 44 37 44Z" style={{ fill: `var(--${type})` }}/>
 <path d="M37.134 18.0769L26.001 6.14395V18.0769L37.134 18.0769Z" 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="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H39V42C39 43.1046 38.1045 44 37 44Z" style={{ fill: `var(--${type})` }}/>
 <path d="M37.6005 18.5769L25.501 5.60803V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H37.6005Z" 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="M11 44H37C38.1045 44 39 43.1046 39 42V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM35 22.0769V40H13V8H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H35ZM31.6635 18.0769L26.001 12.0076V18.0769L31.6635 18.0769Z" 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="M11 44H37C38.1045 44 39 43.1046 39 42V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM36 21.5769V41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36ZM33.4976 18.5769L25.501 10.0057V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H33.4976Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/document-add/index.tsx

@@ -1,41 +1,41 @@
 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 DocumentAddProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DocumentAdd = forwardRef<SVGSVGElement, DocumentAddProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDocumentAdd = forwardRef<SVGSVGElement, DocumentAddProps>(
+  ({ 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="M22.001 4V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H39V25.6902C38.3525 25.5654 37.6839 25.5 37 25.5C31.201 25.5 26.5 30.201 26.5 36C26.5 39.2047 27.9357 42.074 30.1989 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.001Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.001 6.14395V18.0769L37.134 18.0769L26.001 6.14395Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.9996 43.4996V38H29.5V34H34.9996V28.5H38.9996V34H44.5V38H38.9996V43.4996H34.9996Z" 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="M22.501 4V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H39V26.1063C38.5101 26.0363 38.0093 26 37.5 26C31.701 26 27 30.701 27 36.5C27 39.438 28.2067 42.0942 30.1515 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.501Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.501 5.60803V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H37.6005L25.501 5.60803Z" style={{ fill: `var(--${type})` }}/>
 <path d="M35.9996 43.9996V38H30V35H35.9996V29H38.9996V35H45V38H38.9996V43.9996H35.9996Z" 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="M35 25.6903V22.0769H26.001C23.7918 22.0769 22.001 20.2861 22.001 18.0769V8H13V40H27.2888C27.9307 41.5567 28.9359 42.9252 30.1989 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V25.6902C38.3525 25.5654 37.6839 25.5 37 25.5C36.3161 25.5 35.6474 25.5654 35 25.6903ZM26.001 12.0076L31.6635 18.0769L26.001 18.0769V12.0076Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.9996 43.4996V38H29.5V34H34.9996V28.5H38.9996V34H44.5V38H38.9996V43.4996H34.9996Z" 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="M36 26.1063V21.5769H26.001C24.068 21.5769 22.501 20.0099 22.501 18.0769V7H12V41H28.0104C28.5446 42.1244 29.2727 43.1388 30.1515 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V26.1063C38.5101 26.0363 38.0093 26 37.5 26C36.9907 26 36.4899 26.0363 36 26.1063ZM25.501 10.0057L33.4976 18.5769H26.001C25.7248 18.5769 25.501 18.3531 25.501 18.0769V10.0057Z" style={{ fill: `var(--${type})` }}/>
 <path d="M35.9996 43.9996V38H30V35H35.9996V29H38.9996V35H45V38H38.9996V43.9996H35.9996Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/document-check/index.tsx

@@ -1,41 +1,41 @@
 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 DocumentCheckProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DocumentCheck = forwardRef<SVGSVGElement, DocumentCheckProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDocumentCheck = forwardRef<SVGSVGElement, DocumentCheckProps>(
+  ({ 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="M22.001 4V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H39V25.6902C38.3525 25.5654 37.6839 25.5 37 25.5C31.201 25.5 26.5 30.201 26.5 36C26.5 39.2047 27.9357 42.074 30.1989 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.001Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.001 6.14395V18.0769L37.134 18.0769L26.001 6.14395Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31.4142 33.5856L35.037 37.2084L41.6368 30.6316L44.4602 33.465L36.7998 41.0987C35.823 42.0721 34.2425 42.0707 33.2674 41.0956L28.5858 36.4141L31.4142 33.5856Z" 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="M22.501 4V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H39V26.1063C38.5101 26.0363 38.0093 26 37.5 26C31.701 26 27 30.701 27 36.5C27 39.438 28.2067 42.0942 30.1515 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H22.501Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.501 5.60803V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H37.6005L25.501 5.60803Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31.0607 33.9392L35.0363 37.9149L41.9897 30.9859L44.1073 33.1109L36.4469 40.7446C35.6654 41.5233 34.401 41.5222 33.6209 40.7421L28.9393 36.0605L31.0607 33.9392Z" 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="M11 44H30.1989C28.9359 42.9252 27.9307 41.5567 27.2888 40H13V8H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H35V25.6903C35.6474 25.5654 36.3161 25.5 37 25.5C37.6839 25.5 38.3525 25.5654 39 25.6902V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM31.6635 18.0769L26.001 12.0076V18.0769L31.6635 18.0769Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31.4142 33.5856L35.037 37.2084L41.6368 30.6316L44.4602 33.465L36.7998 41.0987C35.823 42.0721 34.2425 42.0707 33.2674 41.0956L28.5858 36.4141L31.4142 33.5856Z" 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="M11 44H30.1989C29.2141 43.1619 28.386 42.1452 27.7646 41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36V25.547C36.3291 25.5159 36.6627 25.5 37 25.5C37.6839 25.5 38.3525 25.5654 39 25.6902V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM33.4976 18.5769L25.501 10.0057V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H33.4976Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31.0607 33.9392L35.0363 37.9149L41.9897 30.9859L44.1073 33.1109L36.4469 40.7446C35.6654 41.5233 34.401 41.5222 33.6209 40.7421L28.9393 36.0605L31.0607 33.9392Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/document-warning/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 DocumentWarningProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DocumentWarning = forwardRef<SVGSVGElement, DocumentWarningProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDocumentWarning = forwardRef<SVGSVGElement, DocumentWarningProps>(
+  ({ 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="M11 44H26.0048C25.4958 43.1184 25.3165 42.0464 25.5913 41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36V25.1164C37.0016 24.862 38.0874 24.9968 39 25.5208V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM33.4976 18.5769L25.501 10.0057V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H33.4976Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2692 27.9896C36.0395 26.6591 37.9606 26.6591 38.7309 27.9896L46.262 40.9979C47.0339 42.3312 46.0718 44 44.5311 44H29.4689C27.9283 44 26.9662 42.3312 27.7381 40.9979L35.2692 27.9896ZM36 32V37.5H38V32H36ZM36.291 39.791C36.484 39.5977 36.7281 39.5 37.0006 39.5C37.2731 39.5 37.5172 39.5977 37.7103 39.791C37.9033 39.9842 38.0006 40.2281 38.0006 40.5C38.0006 40.7719 37.9033 41.0158 37.7103 41.209C37.5172 41.4023 37.2731 41.5 37.0006 41.5C36.7281 41.5 36.484 41.4023 36.291 41.209C36.0979 41.0158 36.0006 40.7719 36.0006 40.5C36.0006 40.2281 36.0979 39.9842 36.291 39.791Z" 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="M11 44H26.0048C25.4958 43.1184 25.3165 42.0464 25.5913 41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36V25.1164C37.0016 24.862 38.0874 24.9968 39 25.5208V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM33.4976 18.5769L25.501 10.0057V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H33.4976Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2692 27.9896C36.0395 26.6591 37.9606 26.6591 38.7309 27.9896L46.262 40.9979C47.0339 42.3312 46.0718 44 44.5311 44H29.4689C27.9283 44 26.9662 42.3312 27.7381 40.9979L35.2692 27.9896ZM36 32V37.5H38V32H36ZM36.291 39.791C36.484 39.5977 36.7281 39.5 37.0006 39.5C37.2731 39.5 37.5172 39.5977 37.7103 39.791C37.9033 39.9842 38.0006 40.2281 38.0006 40.5C38.0006 40.7719 37.9033 41.0158 37.7103 41.209C37.5172 41.4023 37.2731 41.5 37.0006 41.5C36.7281 41.5 36.484 41.4023 36.291 41.209C36.0979 41.0158 36.0006 40.7719 36.0006 40.5C36.0006 40.2281 36.0979 39.9842 36.291 39.791Z" 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="M11 44H24.8857C24.3504 42.7806 24.2908 41.3445 24.8847 40H13V8H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H35V24.4027C36.2692 23.8547 37.7307 23.8547 39 24.4026V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM31.6635 18.0769L26.001 12.0076V18.0769L31.6635 18.0769Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2692 27.9896C36.0395 26.6591 37.9606 26.6591 38.7309 27.9896L46.262 40.9979C47.0339 42.3312 46.0718 44 44.5311 44H29.4689C27.9283 44 26.9662 42.3312 27.7381 40.9979L35.2692 27.9896ZM36 32V37.5H38V32H36ZM36.291 39.791C36.484 39.5977 36.7281 39.5 37.0006 39.5C37.2731 39.5 37.5172 39.5977 37.7103 39.791C37.9033 39.9842 38.0006 40.2281 38.0006 40.5C38.0006 40.7719 37.9033 41.0158 37.7103 41.209C37.5172 41.4023 37.2731 41.5 37.0006 41.5C36.7281 41.5 36.484 41.4023 36.291 41.209C36.0979 41.0158 36.0006 40.7719 36.0006 40.5C36.0006 40.2281 36.0979 39.9842 36.291 39.791Z" 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="M11 44H26.0048C25.4958 43.1184 25.3165 42.0464 25.5913 41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36V25.1164C37.0016 24.862 38.0874 24.9968 39 25.5208V20.865C39 20.3586 38.8078 19.871 38.4623 19.5007L24.5938 4.63565C24.2155 4.23021 23.6859 4 23.1314 4H11C9.89543 4 9 4.89543 9 6V42C9 43.1046 9.89543 44 11 44ZM33.4976 18.5769L25.501 10.0057V18.0769C25.501 18.3531 25.7248 18.5769 26.001 18.5769H33.4976Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2692 27.9896C36.0395 26.6591 37.9606 26.6591 38.7309 27.9896L46.262 40.9979C47.0339 42.3312 46.0718 44 44.5311 44H29.4689C27.9283 44 26.9662 42.3312 27.7381 40.9979L35.2692 27.9896ZM36 32V37.5H38V32H36ZM36.291 39.791C36.484 39.5977 36.7281 39.5 37.0006 39.5C37.2731 39.5 37.5172 39.5977 37.7103 39.791C37.9033 39.9842 38.0006 40.2281 38.0006 40.5C38.0006 40.7719 37.9033 41.0158 37.7103 41.209C37.5172 41.4023 37.2731 41.5 37.0006 41.5C36.7281 41.5 36.484 41.4023 36.291 41.209C36.0979 41.0158 36.0006 40.7719 36.0006 40.5C36.0006 40.2281 36.0979 39.9842 36.291 39.791Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/double-arrow-backward/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 DoubleArrowBackwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DoubleArrowBackward = forwardRef<SVGSVGElement, DoubleArrowBackwardProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDoubleArrowBackward = forwardRef<SVGSVGElement, DoubleArrowBackwardProps>(
+  ({ 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="M14.4748 23.6464L25.0605 13.0608L22.9391 10.9395L12.3535 21.5251C10.9867 22.8919 10.9867 25.108 12.3535 26.4748L22.9391 37.0605L25.0605 34.9392L14.4748 24.3535C14.2796 24.1583 14.2796 23.8417 14.4748 23.6464Z" style={{ fill: `var(--${type})` }}/>
 <path d="M27.4748 23.6464L38.0605 13.0608L35.9391 10.9395L25.3535 21.5251C23.9867 22.8919 23.9867 25.108 25.3535 26.4748L35.9391 37.0605L38.0605 34.9392L27.4748 24.3535C27.2796 24.1583 27.2796 23.8417 27.4748 23.6464Z" 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="M14.4748 23.6464L25.0605 13.0608L22.9391 10.9395L12.3535 21.5251C10.9867 22.8919 10.9867 25.108 12.3535 26.4748L22.9391 37.0605L25.0605 34.9392L14.4748 24.3535C14.2796 24.1583 14.2796 23.8417 14.4748 23.6464Z" style={{ fill: `var(--${type})` }}/>
 <path d="M27.4748 23.6464L38.0605 13.0608L35.9391 10.9395L25.3535 21.5251C23.9867 22.8919 23.9867 25.108 25.3535 26.4748L35.9391 37.0605L38.0605 34.9392L27.4748 24.3535C27.2796 24.1583 27.2796 23.8417 27.4748 23.6464Z" 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="M14.4748 23.6464L25.0605 13.0608L22.9391 10.9395L12.3535 21.5251C10.9867 22.8919 10.9867 25.108 12.3535 26.4748L22.9391 37.0605L25.0605 34.9392L14.4748 24.3535C14.2796 24.1583 14.2796 23.8417 14.4748 23.6464Z" style={{ fill: `var(--${type})` }}/>
 <path d="M27.4748 23.6464L38.0605 13.0608L35.9391 10.9395L25.3535 21.5251C23.9867 22.8919 23.9867 25.108 25.3535 26.4748L35.9391 37.0605L38.0605 34.9392L27.4748 24.3535C27.2796 24.1583 27.2796 23.8417 27.4748 23.6464Z" 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="M14.4748 23.6464L25.0605 13.0608L22.9391 10.9395L12.3535 21.5251C10.9867 22.8919 10.9867 25.108 12.3535 26.4748L22.9391 37.0605L25.0605 34.9392L14.4748 24.3535C14.2796 24.1583 14.2796 23.8417 14.4748 23.6464Z" style={{ fill: `var(--${type})` }}/>
 <path d="M27.4748 23.6464L38.0605 13.0608L35.9391 10.9395L25.3535 21.5251C23.9867 22.8919 23.9867 25.108 25.3535 26.4748L35.9391 37.0605L38.0605 34.9392L27.4748 24.3535C27.2796 24.1583 27.2796 23.8417 27.4748 23.6464Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/double-arrow-forward/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 DoubleArrowForwardProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DoubleArrowForward = forwardRef<SVGSVGElement, DoubleArrowForwardProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDoubleArrowForward = forwardRef<SVGSVGElement, DoubleArrowForwardProps>(
+  ({ 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="M20.5249 23.6465L9.93921 13.0608L12.0605 10.9395L22.6462 21.5252C24.013 22.892 24.013 25.1081 22.6462 26.4749L12.0605 37.0605L9.93921 34.9392L20.5249 24.3536C20.7201 24.1583 20.7201 23.8417 20.5249 23.6465Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.5249 23.6465L22.9392 13.0608L25.0605 10.9395L35.6462 21.5252C37.013 22.892 37.013 25.1081 35.6462 26.4749L25.0605 37.0605L22.9392 34.9392L33.5249 24.3536C33.7201 24.1583 33.7201 23.8417 33.5249 23.6465Z" 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="M20.5249 23.6465L9.93921 13.0608L12.0605 10.9395L22.6462 21.5252C24.013 22.892 24.013 25.1081 22.6462 26.4749L12.0605 37.0605L9.93921 34.9392L20.5249 24.3536C20.7201 24.1583 20.7201 23.8417 20.5249 23.6465Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.5249 23.6465L22.9392 13.0608L25.0605 10.9395L35.6462 21.5252C37.013 22.892 37.013 25.1081 35.6462 26.4749L25.0605 37.0605L22.9392 34.9392L33.5249 24.3536C33.7201 24.1583 33.7201 23.8417 33.5249 23.6465Z" 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="M20.5249 23.6465L9.93921 13.0608L12.0605 10.9395L22.6462 21.5252C24.013 22.892 24.013 25.1081 22.6462 26.4749L12.0605 37.0605L9.93921 34.9392L20.5249 24.3536C20.7201 24.1583 20.7201 23.8417 20.5249 23.6465Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.5249 23.6465L22.9392 13.0608L25.0605 10.9395L35.6462 21.5252C37.013 22.892 37.013 25.1081 35.6462 26.4749L25.0605 37.0605L22.9392 34.9392L33.5249 24.3536C33.7201 24.1583 33.7201 23.8417 33.5249 23.6465Z" 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="M20.5249 23.6465L9.93921 13.0608L12.0605 10.9395L22.6462 21.5252C24.013 22.892 24.013 25.1081 22.6462 26.4749L12.0605 37.0605L9.93921 34.9392L20.5249 24.3536C20.7201 24.1583 20.7201 23.8417 20.5249 23.6465Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.5249 23.6465L22.9392 13.0608L25.0605 10.9395L35.6462 21.5252C37.013 22.892 37.013 25.1081 35.6462 26.4749L25.0605 37.0605L22.9392 34.9392L33.5249 24.3536C33.7201 24.1583 33.7201 23.8417 33.5249 23.6465Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/download/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 DownloadProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Download = forwardRef<SVGSVGElement, DownloadProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDownload = forwardRef<SVGSVGElement, DownloadProps>(
+  ({ 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.5 5V29.3791L34.6262 20.2528L36.7476 22.3741L26.4751 32.6466C25.1082 34.0135 22.8921 34.0135 21.5253 32.6466L11.2528 22.3741L13.3741 20.2528L22.5 29.3787V5H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41 39.5H7V42.5H41V39.5Z" 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.5 5V29.3791L34.6262 20.2528L36.7476 22.3741L26.4751 32.6466C25.1082 34.0135 22.8921 34.0135 21.5253 32.6466L11.2528 22.3741L13.3741 20.2528L22.5 29.3787V5H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41 39.5H7V42.5H41V39.5Z" 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 5V28.1719L34.2727 19.8993L37.1011 22.7277L26.8286 33.0002C25.2665 34.5623 22.7339 34.5623 21.1718 33.0002L10.8993 22.7277L13.7277 19.8993L22 28.1716V5H26Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41 39H7V43H41V39Z" 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.5 5V29.3791L34.6262 20.2528L36.7476 22.3741L26.4751 32.6466C25.1082 34.0135 22.8921 34.0135 21.5253 32.6466L11.2528 22.3741L13.3741 20.2528L22.5 29.3787V5H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41 39.5H7V42.5H41V39.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/drop-down/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 DropDownProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DropDown = forwardRef<SVGSVGElement, DropDownProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDropDown = forwardRef<SVGSVGElement, DropDownProps>(
+  ({ 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.5 17H12.3284C11.4375 17 10.9913 18.0771 11.6213 18.7071L22.5 29.5858C23.281 30.3668 24.5474 30.3668 25.3284 29.5858L36.2071 18.7071C36.8371 18.0771 36.3909 17 35.5 17Z" 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="M21.5253 30.6484L10.9395 20.0625L13.0608 17.9412L23.6467 28.5271C23.8419 28.7221 24.1586 28.7222 24.3538 28.5271L34.9397 17.9412L37.061 20.0625L26.4751 30.6484C25.1083 32.0151 22.8922 32.015 21.5253 30.6484Z" 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="M21.5253 30.6484L10.9395 20.0625L13.0608 17.9412L23.6467 28.5271C23.8419 28.7221 24.1586 28.7222 24.3538 28.5271L34.9397 17.9412L37.061 20.0625L26.4751 30.6484C25.1083 32.0151 22.8922 32.015 21.5253 30.6484Z" 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="M21.5253 30.6484L10.9395 20.0625L13.0608 17.9412L23.6467 28.5271C23.8419 28.7221 24.1586 28.7222 24.3538 28.5271L34.9397 17.9412L37.061 20.0625L26.4751 30.6484C25.1083 32.0151 22.8922 32.015 21.5253 30.6484Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/drop-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 DropUpProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const DropUp = forwardRef<SVGSVGElement, DropUpProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconDropUp = forwardRef<SVGSVGElement, DropUpProps>(
+  ({ 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="M21.5253 17.3516L10.9395 27.9375L13.0608 30.0588L23.6467 19.4729C23.8419 19.2779 24.1586 19.2778 24.3538 19.4729L34.9397 30.0588L37.061 27.9375L26.4751 17.3516C25.1083 15.9849 22.8922 15.985 21.5253 17.3516Z" 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="M21.5253 17.3516L10.9395 27.9375L13.0608 30.0588L23.6467 19.4729C23.8419 19.2779 24.1586 19.2778 24.3538 19.4729L34.9397 30.0588L37.061 27.9375L26.4751 17.3516C25.1083 15.9849 22.8922 15.985 21.5253 17.3516Z" 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="M21.5253 17.3516L10.9395 27.9375L13.0608 30.0588L23.6467 19.4729C23.8419 19.2779 24.1586 19.2778 24.3538 19.4729L34.9397 30.0588L37.061 27.9375L26.4751 17.3516C25.1083 15.9849 22.8922 15.985 21.5253 17.3516Z" 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="M21.5253 17.3516L10.9395 27.9375L13.0608 30.0588L23.6467 19.4729C23.8419 19.2779 24.1586 19.2778 24.3538 19.4729L34.9397 30.0588L37.061 27.9375L26.4751 17.3516C25.1083 15.9849 22.8922 15.985 21.5253 17.3516Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/email/index.tsx

@@ -1,38 +1,38 @@
 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 EmailProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Email = forwardRef<SVGSVGElement, EmailProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconEmail = forwardRef<SVGSVGElement, EmailProps>(
+  ({ 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="M4.83894 9.37133L24 23.514L43.161 9.3713C42.8337 9.13754 42.4329 9 42 9H6C5.56708 9 5.16629 9.13755 4.83894 9.37133Z" style={{ fill: `var(--${type})` }}/>
 <path d="M4 13.7237V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.7236L24 28.4856L4 13.7237Z" 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="M4.46554 9.71718L24 24.1355L43.5345 9.71721C43.1676 9.27882 42.6164 9 42 9H6C5.38365 9 4.83242 9.2788 4.46554 9.71718Z" style={{ fill: `var(--${type})` }}/>
 <path d="M44 13.1023L24 27.8642L4 13.1022V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.1023Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM8 16.9118V35H40V16.9117L24 28.4673L8 16.9118ZM38.5844 13H9.41553L24 23.5332L38.5844 13Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM7 15.5728V36H41V15.5727L23.9999 27.8505L7 15.5728ZM40.8229 12H7.177L23.9999 24.1499L40.8229 12Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;