@liner-fe/icon 0.1.0 → 0.1.1

package/assets/folder/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 FolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFolder = forwardRef<SVGSVGElement, FolderProps>(
-  ({ 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="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.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="M4.5 8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39C43.5 40.1046 42.6046 41 41.5 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.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 fillRule="evenodd" clipRule="evenodd" d="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19 10.5H8.5V37H39.5V14.5H22L19 10.5Z" 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="M24 10.5L21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/folder-add/index.tsx

@@ -1,37 +1,37 @@
 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 FolderAddProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFolderAdd = forwardRef<SVGSVGElement, FolderAddProps>(
-  ({ 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="M20 8.5L22.4004 11.7002L23 12.5H41.5V39H6.5V8.5H20ZM20 21.5H14.25V29.5H20V35.5H28V29.5H33.75V21.5H28V16H20V21.5Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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="M4.5 8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39C43.5 40.1046 42.6046 41 41.5 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5ZM22.5 24V17.9998H25.5V24H31.75V27H25.5V33.4998H22.5V27H16.25V24H22.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="M22 23.5V17.9998H26V23.5H31.75V27.5H26V33.4998H22V27.5H16.25V23.5H22Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5ZM19 10.5H8.5V37H39.5V14.5H22L19 10.5Z" 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="M22.5 24V17.9998H25.5V24H31.75V27H25.5V33.4998H22.5V27H16.25V24H22.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 6.5H6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.5C42.6046 41 43.5 40.1046 43.5 39V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5ZM19.5 9.5H7.5V38H40.5V13.5H22.5L19.5 9.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/folder-open/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 FolderOpenProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFolderOpen = forwardRef<SVGSVGElement, FolderOpenProps>(
-  ({ 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="M6.5 6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.8C42.7802 41 43.616 40.2896 43.7739 39.3223L47.5 16.5H10L7.5 31.8125V13.5H43.5V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5H6.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="M6.5 6.5C5.39543 6.5 4.5 7.39543 4.5 8.5V39C4.5 40.1046 5.39543 41 6.5 41H41.8C42.7802 41 43.616 40.2896 43.7739 39.3223L47.5 16.5H10L8.5 25.6875V14.5H43.5V12.5C43.5 11.3954 42.6046 10.5 41.5 10.5H24L21 6.5H6.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 fillRule="evenodd" clipRule="evenodd" d="M6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V14.5H22L19 10.5H8.5V25.6875L10 16.5H47.5L43.7739 39.3223C43.616 40.2896 42.7802 41 41.8001 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5ZM10.706 37L13.3999 20.5H42.794L40.1001 37H10.706Z" 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="M6.5 6.5H21L24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8125L10 16.5H47.5L43.7739 39.3223C43.616 40.2896 42.7802 41 41.8001 41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5ZM9.52952 38L12.5499 19.5H43.9705L40.9501 38H9.52952Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/folder-open-share/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 FolderOpenShareProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFolderOpenShare = forwardRef<SVGSVGElement, FolderOpenShareProps>(
-  ({ 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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.3214 35.9219 30.0055 33.5781 32.3672 32.3721C32.3734 32.3689 32.3805 32.3655 32.3867 32.3623C32.4893 32.3103 32.5932 32.2606 32.6982 32.2129C32.7197 32.2031 32.7411 32.1932 32.7627 32.1836C32.867 32.1374 32.9725 32.0936 33.0791 32.0518C33.0957 32.0452 33.1123 32.0386 33.1289 32.0322C33.3665 31.9408 33.6095 31.8608 33.8574 31.792C33.8744 31.7873 33.8912 31.7819 33.9082 31.7773C34.5751 31.5972 35.2762 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8105L10 16.5H31.0254C29.8701 17.2679 28.9038 18.296 28.207 19.5H12.5498L9.5293 38H24.0928C24.0648 38.224 24.0437 38.45 24.0283 38.6777C24.01 38.9495 24 39.2236 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36.2021 19.0039C36.2171 19.0045 36.2321 19.0051 36.2471 19.0059C36.2569 19.0063 36.2666 19.0073 36.2764 19.0078C36.3376 19.0112 36.3984 19.0159 36.459 19.0215C36.4969 19.0249 36.5346 19.0289 36.5723 19.0332C36.6007 19.0365 36.629 19.0402 36.6572 19.0439C36.9633 19.0841 37.2608 19.1512 37.5469 19.2441L37.5508 19.2461C39.0168 19.7237 40.1832 20.8598 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C35.1814 29 34.4095 28.8018 33.7275 28.4531C33.719 28.4487 33.7107 28.4439 33.7021 28.4395C32.0974 27.6072 31 25.9326 31 24C31 21.8301 32.3825 19.9838 34.3145 19.292C34.3301 19.2864 34.3457 19.2808 34.3613 19.2754C34.432 19.2509 34.5032 19.2274 34.5752 19.2061C34.5924 19.201 34.6097 19.1963 34.627 19.1914C34.6922 19.1728 34.7579 19.1556 34.8242 19.1396C34.8524 19.1328 34.8808 19.1264 34.9092 19.1201C34.9706 19.1065 35.0325 19.0944 35.0947 19.083C35.1198 19.0784 35.1448 19.0735 35.1699 19.0693C35.2369 19.0581 35.3043 19.0485 35.3721 19.04C35.3948 19.0372 35.4176 19.0338 35.4404 19.0312C35.5142 19.023 35.5884 19.0167 35.6631 19.0117C35.6826 19.0104 35.7021 19.0089 35.7217 19.0078C35.8138 19.0028 35.9066 19 36 19L36.2021 19.0039Z" 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 31.5L36.3896 31.5098C36.3922 31.5099 36.3949 31.5096 36.3975 31.5098C36.4661 31.5131 36.5344 31.5193 36.6025 31.5244C36.6635 31.529 36.7245 31.5321 36.7852 31.5381C36.8811 31.5474 36.9764 31.5596 37.0713 31.5723C37.1022 31.5764 37.1333 31.5795 37.1641 31.584C37.269 31.5993 37.373 31.6184 37.4766 31.6377C37.4934 31.6408 37.5106 31.6432 37.5273 31.6465C38.7751 31.8876 39.9176 32.419 40.8857 33.167C40.8979 33.1763 40.9098 33.1859 40.9219 33.1953C41.5157 33.6595 42.0421 34.2052 42.4844 34.8164C42.5142 34.8577 42.5432 34.8996 42.5723 34.9414C42.6042 34.9874 42.636 35.0334 42.667 35.0801C42.6996 35.1291 42.7312 35.1788 42.7627 35.2285C42.8172 35.3146 42.8696 35.402 42.9209 35.4902C42.9513 35.5425 42.9825 35.5944 43.0117 35.6475C43.0336 35.6871 43.054 35.7275 43.0752 35.7676C43.1103 35.8339 43.1454 35.9003 43.1787 35.9678C43.1983 36.0076 43.2173 36.0477 43.2363 36.0879C43.2668 36.1524 43.2954 36.2178 43.3242 36.2832C43.7573 37.2678 44 38.3553 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.3746 28.0031 39.2499 28.0088 39.126V39.123C28.0104 39.0891 28.0127 39.0553 28.0146 39.0215C28.0208 38.9181 28.0281 38.8152 28.0381 38.7129C28.0415 38.6783 28.046 38.6438 28.0498 38.6094C28.0564 38.5502 28.0644 38.4914 28.0723 38.4326C28.0868 38.3235 28.1032 38.2151 28.1221 38.1074C28.1295 38.0654 28.1365 38.0233 28.1445 37.9814C28.1664 37.8675 28.1921 37.7548 28.2188 37.6426C28.2275 37.6058 28.2349 37.5688 28.2441 37.5322C28.318 37.2402 28.4087 36.955 28.5137 36.6768C28.5249 36.647 28.5363 36.6174 28.5479 36.5879C28.5902 36.4795 28.6357 36.3726 28.6826 36.2666C28.6986 36.2305 28.7139 36.1941 28.7305 36.1582C28.778 36.055 28.8282 35.9533 28.8799 35.8525C28.8959 35.8213 28.9113 35.7898 28.9277 35.7588C28.9305 35.7536 28.9328 35.7483 28.9355 35.7432C29.4696 34.7411 30.2116 33.8677 31.1025 33.1768C31.8486 32.5981 32.6983 32.1464 33.6211 31.8594C34.3725 31.6257 35.1717 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H7.5V31.8105L10 16.5H31.0254C28.5996 18.1123 27 20.869 27 24C27 26.1721 27.7695 28.1648 29.0508 29.7197C27.8089 30.6037 26.7419 31.7178 25.9131 33C24.7189 34.8475 24.0206 37.0439 24.002 39.4033C24.0017 39.4355 24 39.4677 24 39.5V41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19L36.2422 19.0059C36.2461 19.006 36.25 19.0057 36.2539 19.0059C36.3972 19.013 36.5388 19.0279 36.6787 19.0469C36.6946 19.049 36.7107 19.0504 36.7266 19.0527C36.7816 19.0607 36.8362 19.0703 36.8906 19.0801C36.916 19.0847 36.9415 19.0888 36.9668 19.0938C37.0209 19.1043 37.0745 19.1166 37.1279 19.1289C37.1517 19.1344 37.1755 19.1397 37.1992 19.1455C37.248 19.1575 37.2965 19.1702 37.3447 19.1836C37.3741 19.1918 37.4034 19.2003 37.4326 19.209C37.4725 19.2209 37.5123 19.2332 37.5518 19.2461C37.5979 19.2612 37.6439 19.2766 37.6895 19.293C37.7137 19.3017 37.7376 19.3112 37.7617 19.3203C37.8036 19.3361 37.8453 19.3523 37.8867 19.3691C37.932 19.3876 37.9769 19.407 38.0215 19.4268C38.0454 19.4373 38.0691 19.4481 38.0928 19.459C38.1331 19.4776 38.1731 19.4969 38.2129 19.5166C38.2544 19.5371 38.296 19.5574 38.3369 19.5791C38.3622 19.5925 38.3871 19.6063 38.4121 19.6201C38.4516 19.6419 38.4905 19.6647 38.5293 19.6875C38.5627 19.7071 38.596 19.7267 38.6289 19.7471C38.6576 19.7649 38.6865 19.7824 38.7148 19.8008C38.7519 19.8248 38.7888 19.8491 38.8252 19.874C38.8544 19.8941 38.8824 19.9159 38.9111 19.9365C38.947 19.9622 38.9834 19.987 39.0186 20.0137C39.0374 20.028 39.0556 20.0431 39.0742 20.0576C39.116 20.0903 39.1575 20.1233 39.1982 20.1572C39.2034 20.1615 39.2087 20.1656 39.2139 20.1699C40.3058 21.0871 41 22.4624 41 24C41 26.4833 39.1893 28.5418 36.8164 28.9316C36.8076 28.9331 36.7989 28.9351 36.79 28.9365C36.7096 28.9493 36.6286 28.9608 36.5469 28.9697C36.542 28.9703 36.5371 28.9712 36.5322 28.9717C36.4811 28.9771 36.4295 28.9795 36.3779 28.9834C36.2531 28.9928 36.1272 29 36 29L35.7422 28.9932C34.4202 28.926 33.2345 28.3449 32.3789 27.4463C31.9661 27.0127 31.6293 26.506 31.3926 25.9463C31.1395 25.3481 31 24.6904 31 24C31 22.7918 31.4282 21.6836 32.1416 20.8193C32.2174 20.7275 32.2969 20.6389 32.3789 20.5527C33.2897 19.5964 34.5752 19.0001 36 19Z" 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="M36 31.5C40.4183 31.5 44 35.0817 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 35.0817 31.5817 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V14.5H22L18.999 10.5H8.5V25.6865L10 16.5H31.0254C29.5614 17.473 28.398 18.8624 27.7061 20.5H13.3994L10.7061 37H24.2617C24.1455 37.5477 24.0671 38.1091 24.0283 38.6816C24.01 38.9521 24 39.2249 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconFolderOpenShare = forwardRef<SVGSVGElement, FolderOpenShareProp
 ;
   } 
   
-  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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.3214 35.9219 30.0055 33.5781 32.3672 32.3721C32.3734 32.3689 32.3805 32.3655 32.3867 32.3623C32.4893 32.3103 32.5932 32.2606 32.6982 32.2129C32.7197 32.2031 32.7411 32.1932 32.7627 32.1836C32.867 32.1374 32.9725 32.0936 33.0791 32.0518C33.0957 32.0452 33.1123 32.0386 33.1289 32.0322C33.3665 31.9408 33.6095 31.8608 33.8574 31.792C33.8744 31.7873 33.8912 31.7819 33.9082 31.7773C34.5751 31.5972 35.2762 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V13.5H22.5L19.5 9.5H7.5V31.8105L10 16.5H31.0254C29.8701 17.2679 28.9038 18.296 28.207 19.5H12.5498L9.5293 38H24.0928C24.0648 38.224 24.0437 38.45 24.0283 38.6777C24.01 38.9495 24 39.2236 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36.2021 19.0039C36.2171 19.0045 36.2321 19.0051 36.2471 19.0059C36.2569 19.0063 36.2666 19.0073 36.2764 19.0078C36.3376 19.0112 36.3984 19.0159 36.459 19.0215C36.4969 19.0249 36.5346 19.0289 36.5723 19.0332C36.6007 19.0365 36.629 19.0402 36.6572 19.0439C36.9633 19.0841 37.2608 19.1512 37.5469 19.2441L37.5508 19.2461C39.0168 19.7237 40.1832 20.8598 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C35.1814 29 34.4095 28.8018 33.7275 28.4531C33.719 28.4487 33.7107 28.4439 33.7021 28.4395C32.0974 27.6072 31 25.9326 31 24C31 21.8301 32.3825 19.9838 34.3145 19.292C34.3301 19.2864 34.3457 19.2808 34.3613 19.2754C34.432 19.2509 34.5032 19.2274 34.5752 19.2061C34.5924 19.201 34.6097 19.1963 34.627 19.1914C34.6922 19.1728 34.7579 19.1556 34.8242 19.1396C34.8524 19.1328 34.8808 19.1264 34.9092 19.1201C34.9706 19.1065 35.0325 19.0944 35.0947 19.083C35.1198 19.0784 35.1448 19.0735 35.1699 19.0693C35.2369 19.0581 35.3043 19.0485 35.3721 19.04C35.3948 19.0372 35.4176 19.0338 35.4404 19.0312C35.5142 19.023 35.5884 19.0167 35.6631 19.0117C35.6826 19.0104 35.7021 19.0089 35.7217 19.0078C35.8138 19.0028 35.9066 19 36 19L36.2021 19.0039Z" style={{ fill: `var(--${type})` }}/>

package/assets/folder-share/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 FolderShareProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFolderShare = forwardRef<SVGSVGElement, FolderShareProps>(
-  ({ 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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.4509 34.6478 31.858 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.732 17.8699 41.7043 16.9029 40.5 16.2061V13.5H22.5L19.5 9.5H7.5V38H24.0928C24.0314 38.4913 24 38.992 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.1665 19 40.0098 20.3784 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" 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 31.5C36.131 31.5 36.2612 31.5035 36.3906 31.5098C36.4167 31.511 36.4427 31.5131 36.4688 31.5146C36.5594 31.5199 36.6495 31.5269 36.7393 31.5352C36.7846 31.5393 36.8299 31.5429 36.875 31.5479C36.9679 31.558 37.0604 31.5697 37.1523 31.583C37.1807 31.5871 37.2091 31.5903 37.2373 31.5947C37.3498 31.6122 37.4614 31.6322 37.5723 31.6543C37.6161 31.663 37.6596 31.6732 37.7031 31.6826C37.7902 31.7015 37.8769 31.7215 37.9629 31.7432C37.9923 31.7506 38.0215 31.7589 38.0508 31.7666C38.1301 31.7876 38.2088 31.8097 38.2871 31.833C38.3354 31.8474 38.3837 31.8617 38.4316 31.877C38.6541 31.9479 38.8724 32.0278 39.0859 32.1172C39.1142 32.129 39.1418 32.1422 39.1699 32.1543C39.2489 32.1885 39.3276 32.2232 39.4053 32.2598C39.4449 32.2785 39.4841 32.2981 39.5234 32.3174C39.5888 32.3495 39.6534 32.3831 39.7178 32.417C39.7594 32.4389 39.8016 32.4598 39.8428 32.4824C39.9384 32.5349 40.0328 32.5893 40.126 32.6455C40.1545 32.6627 40.1826 32.6807 40.2109 32.6982C40.2845 32.7439 40.3577 32.7899 40.4297 32.8379C40.4669 32.8627 40.5033 32.8887 40.54 32.9141C40.5939 32.9513 40.6473 32.9889 40.7002 33.0273C40.7407 33.0568 40.7814 33.086 40.8213 33.1162C41.0013 33.2524 41.1751 33.3963 41.3428 33.5469C41.3817 33.5818 41.4198 33.6176 41.458 33.6533C41.4994 33.692 41.5405 33.731 41.5811 33.7705C41.6266 33.8149 41.6714 33.8599 41.7158 33.9053C41.7556 33.9459 41.7951 33.9868 41.834 34.0283C41.8704 34.0671 41.9067 34.106 41.9424 34.1455C41.9963 34.2053 42.0485 34.2667 42.1006 34.3281C42.1513 34.3879 42.201 34.4485 42.25 34.5098C42.2896 34.5594 42.3297 34.6086 42.3682 34.6592C42.3992 34.6999 42.4297 34.7409 42.46 34.7822C42.5024 34.8402 42.5441 34.8988 42.585 34.958C42.6084 34.9919 42.6314 35.0262 42.6543 35.0605C42.6862 35.1083 42.7172 35.1566 42.748 35.2051C42.7971 35.282 42.8451 35.3597 42.8916 35.4385C42.9328 35.5082 42.9736 35.5783 43.0127 35.6494C43.033 35.6863 43.0525 35.7235 43.0723 35.7607C43.1068 35.8259 43.1401 35.8918 43.1729 35.958C43.1969 36.0067 43.221 36.0553 43.2441 36.1045C43.263 36.1446 43.2807 36.1852 43.2988 36.2256C43.3271 36.2885 43.3561 36.3512 43.3828 36.415C43.405 36.468 43.4253 36.5217 43.4463 36.5752C43.8025 37.4813 44 38.4674 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 35.0817 31.5817 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C41.8878 16.5995 39.1311 15 36 15C31.0294 15 27 19.0294 27 24C27 26.1722 27.7694 28.1648 29.0508 29.7197C25.995 31.8949 24 35.4634 24 39.5V41H6.5C5.39543 41 4.5 40.1046 4.5 39V8.5C4.5 7.39543 5.39543 6.5 6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" 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="M36 31.5C37.2552 31.5 38.4428 31.7895 39.5 32.3047C39.5296 32.3191 39.5585 32.3348 39.5879 32.3496C39.6636 32.3876 39.7392 32.4255 39.8135 32.4658L39.8398 32.4805C39.8699 32.497 39.8989 32.5154 39.9287 32.5322C42.3585 33.9052 44 36.51 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0042 39.2933 28.0049 39.209 28.0088 39.125C28.0108 39.0813 28.0149 39.0377 28.0176 38.9941C28.0222 38.921 28.0266 38.848 28.0332 38.7754C28.0389 38.7117 28.0455 38.6482 28.0527 38.585C28.0581 38.5386 28.0642 38.4924 28.0703 38.4463C28.1076 38.1626 28.1603 37.8839 28.2266 37.6104C28.2288 37.6013 28.2302 37.5921 28.2324 37.583C28.2522 37.5024 28.2736 37.4224 28.2959 37.3428C28.3031 37.3171 28.3099 37.2912 28.3174 37.2656C29.2844 33.9349 32.3574 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.5269 17.5612 41.1378 16.397 39.5 15.7051V14.5H22L18.999 10.5H8.5V37H24.2617C24.0906 37.8063 24 38.6425 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.7614 19 41 21.2386 41 24C41 26.7614 38.7614 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconFolderShare = forwardRef<SVGSVGElement, FolderShareProps>(
 ;
   } 
   
-  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 31.5C37.6686 31.5 39.2179 32.0109 40.5 32.8848C40.5872 32.9442 40.6731 33.0056 40.7578 33.0684C40.7957 33.0964 40.8327 33.1256 40.8701 33.1543C40.929 33.1995 40.9874 33.2452 41.0449 33.292C41.0826 33.3226 41.1192 33.3544 41.1562 33.3857C41.2053 33.4271 41.2537 33.4692 41.3018 33.5117C41.3428 33.5481 41.3845 33.5839 41.4248 33.6211C41.4715 33.6642 41.5168 33.7087 41.5625 33.7529C41.7108 33.8965 41.8534 34.0456 41.9902 34.2002C42.0393 34.2557 42.0882 34.3113 42.1357 34.3682C42.1678 34.4065 42.1991 34.4455 42.2305 34.4844C42.2686 34.5317 42.3057 34.5797 42.3428 34.6279C42.3787 34.6747 42.4153 34.721 42.4502 34.7686C42.4927 34.8265 42.5342 34.8852 42.5752 34.9443C42.598 34.9772 42.6212 35.0098 42.6436 35.043C42.708 35.1389 42.7707 35.2361 42.8311 35.335C42.8494 35.365 42.8668 35.3955 42.8848 35.4258C42.9247 35.4932 42.9639 35.5612 43.002 35.6299C43.0295 35.6795 43.0556 35.73 43.082 35.7803C43.1083 35.8301 43.134 35.8802 43.1592 35.9307C43.186 35.9844 43.2126 36.0383 43.2383 36.0928C43.2701 36.1603 43.3011 36.2283 43.3311 36.2969C43.3467 36.3327 43.3628 36.3683 43.3779 36.4043C43.4206 36.5058 43.4615 36.6083 43.5 36.7119C43.8229 37.5801 44 38.5193 44 39.5V43C44 44.1046 43.1046 45 42 45H30C28.8954 45 28 44.1046 28 43V39.5C28 39.4592 28.0023 39.4186 28.0029 39.3779C28.0062 39.1632 28.0161 38.9505 28.0361 38.7402L28.041 38.6816C28.4509 34.6478 31.858 31.5 36 31.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V19.0254C42.732 17.8699 41.7043 16.9029 40.5 16.2061V13.5H22.5L19.5 9.5H7.5V38H24.0928C24.0314 38.4913 24 38.992 24 39.5V41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 19C38.1665 19 40.0098 20.3784 40.7041 22.3057C40.713 22.3303 40.721 22.3551 40.7295 22.3799C40.7508 22.442 40.7721 22.5042 40.791 22.5674C40.7979 22.5904 40.804 22.6136 40.8105 22.6367C40.828 22.6984 40.8443 22.7606 40.8594 22.8232C40.8663 22.8518 40.8725 22.8805 40.8789 22.9092C40.8926 22.9706 40.9046 23.0325 40.916 23.0947C40.9206 23.1198 40.9255 23.1448 40.9297 23.1699C40.9409 23.2369 40.9505 23.3042 40.959 23.3721C40.9618 23.3948 40.9652 23.4176 40.9678 23.4404C40.976 23.5142 40.9823 23.5884 40.9873 23.6631C40.9886 23.6826 40.9901 23.7021 40.9912 23.7217C40.9963 23.8138 41 23.9066 41 24C41 24.0931 40.9962 24.1855 40.9912 24.2773C40.9901 24.2969 40.9886 24.3164 40.9873 24.3359C40.9823 24.4106 40.976 24.4848 40.9678 24.5586C40.9653 24.5811 40.9618 24.6035 40.959 24.626C40.9503 24.6955 40.9402 24.7644 40.9287 24.833C40.9251 24.8542 40.9218 24.8754 40.918 24.8965C40.9061 24.962 40.8933 25.0272 40.8789 25.0918C40.8727 25.1196 40.866 25.1472 40.8594 25.1748C40.8434 25.2411 40.8262 25.3068 40.8076 25.3721C40.8027 25.3893 40.7981 25.4066 40.793 25.4238C40.7716 25.4959 40.7481 25.567 40.7236 25.6377C40.7182 25.6534 40.7126 25.669 40.707 25.6846C40.0154 27.6169 38.1701 29 36 29C33.2386 29 31 26.7614 31 24C31 21.2386 33.2386 19 36 19Z" style={{ fill: `var(--${type})` }}/>

package/assets/formal-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 FormalBagProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconFormalBag = forwardRef<SVGSVGElement, FormalBagProps>(
-  ({ 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 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" 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 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" 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 14V11C17 9.89543 17.8954 9 19 9H29C30.1046 9 31 9.89543 31 11V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM21 14V13H27V14H21ZM16 18V36H32V18H16ZM36 18V36H38V18H36ZM10 18H12V36H10V18Z" 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 14V10C17 8.89543 17.8954 8 19 8H29C30.1046 8 31 8.89543 31 10V14H40C41.1046 14 42 14.8954 42 16V38C42 39.1046 41.1046 40 40 40H8C6.89543 40 6 39.1046 6 38V16C6 14.8954 6.89543 14 8 14H17ZM20 14V11H28V14H20ZM15.5 17V37H32.5V17H15.5ZM35.5 17V37H39V17H35.5ZM9 17H12.5V37H9V17Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/globe/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 GlobeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconGlobe = forwardRef<SVGSVGElement, GlobeProps>(
-  ({ 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="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM27.265 40.6868C32.5447 39.6597 36.9514 36.1892 39.2604 31.5H31.5562C30.6722 34.9176 29.198 38.0376 27.265 40.6868ZM20.735 40.6868C18.802 38.0376 17.3278 34.9176 16.4438 31.5H8.73961C11.0486 36.1892 15.4553 39.6597 20.735 40.6868ZM19.5544 31.5C20.4996 34.7458 22.0385 37.6406 24 39.9982C25.9615 37.6406 27.5004 34.7458 28.4456 31.5H19.5544ZM29.1295 28.5H18.8705C18.6278 27.0481 18.5 25.5435 18.5 24.0002C18.5 22.4568 18.6278 20.9521 18.8706 19.5H29.1294C29.3722 20.9521 29.5 22.4568 29.5 24.0002C29.5 25.5435 29.3722 27.0481 29.1295 28.5ZM32.1666 28.5H40.398C40.7905 27.0667 41 25.5578 41 24C41 22.4422 40.7905 20.9333 40.398 19.5H32.1665C32.3858 20.9625 32.5 22.4665 32.5 24.0002C32.5 25.5338 32.3859 27.0377 32.1666 28.5ZM31.5561 16.5H39.2604C36.9513 11.8107 32.5445 8.34011 27.2646 7.31315C29.1977 9.96236 30.672 13.0823 31.5561 16.5ZM28.4454 16.5C27.5002 13.2544 25.9614 10.3598 24 8.00226C22.0386 10.3598 20.4998 13.2544 19.5546 16.5H28.4454ZM16.4439 16.5C17.328 13.0823 18.8023 9.96236 20.7354 7.31315C15.4555 8.34011 11.0487 11.8107 8.73961 16.5H16.4439ZM15.8335 19.5C15.6142 20.9625 15.5 22.4665 15.5 24.0002C15.5 25.5338 15.6141 27.0377 15.8334 28.5H7.60197C7.20954 27.0667 7 25.5578 7 24C7 22.4422 7.20954 20.9333 7.60197 19.5H15.8335Z" 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="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM27.265 40.6868C32.5447 39.6597 36.9514 36.1892 39.2604 31.5H31.5562C30.6722 34.9176 29.198 38.0376 27.265 40.6868ZM20.735 40.6868C18.802 38.0376 17.3278 34.9176 16.4438 31.5H8.73961C11.0486 36.1892 15.4553 39.6597 20.735 40.6868ZM19.5544 31.5C20.4996 34.7458 22.0385 37.6406 24 39.9982C25.9615 37.6406 27.5004 34.7458 28.4456 31.5H19.5544ZM29.1295 28.5H18.8705C18.6278 27.0481 18.5 25.5435 18.5 24.0002C18.5 22.4568 18.6278 20.9521 18.8706 19.5H29.1294C29.3722 20.9521 29.5 22.4568 29.5 24.0002C29.5 25.5435 29.3722 27.0481 29.1295 28.5ZM32.1666 28.5H40.398C40.7905 27.0667 41 25.5578 41 24C41 22.4422 40.7905 20.9333 40.398 19.5H32.1665C32.3858 20.9625 32.5 22.4665 32.5 24.0002C32.5 25.5338 32.3859 27.0377 32.1666 28.5ZM31.5561 16.5H39.2604C36.9513 11.8107 32.5445 8.34011 27.2646 7.31315C29.1977 9.96236 30.672 13.0823 31.5561 16.5ZM28.4454 16.5C27.5002 13.2544 25.9614 10.3598 24 8.00226C22.0386 10.3598 20.4998 13.2544 19.5546 16.5H28.4454ZM16.4439 16.5C17.328 13.0823 18.8023 9.96236 20.7354 7.31315C15.4555 8.34011 11.0487 11.8107 8.73961 16.5H16.4439ZM15.8335 19.5C15.6142 20.9625 15.5 22.4665 15.5 24.0002C15.5 25.5338 15.6141 27.0377 15.8334 28.5H7.60197C7.20954 27.0667 7 25.5578 7 24C7 22.4422 7.20954 20.9333 7.60197 19.5H15.8335Z" 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="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM28.8211 39.2609C32.6625 38.0485 35.8778 35.4257 37.8595 32H31.9408C31.2254 34.6224 30.1663 37.0683 28.8211 39.2609ZM19.1789 39.2609C17.8337 37.0683 16.7746 34.6224 16.0592 32H10.1405C12.1222 35.4257 15.3375 38.0485 19.1789 39.2609ZM20.2302 32C21.0983 34.7094 22.3917 37.1495 24 39.2024C25.6083 37.1495 26.9017 34.7094 27.7698 32H20.2302ZM28.7026 28H19.2974C19.1023 26.7049 19 25.3683 19 24.0002C19 22.632 19.1023 21.2952 19.2975 20H28.7025C28.8977 21.2952 29 22.632 29 24.0002C29 25.3683 28.8977 26.7049 28.7026 28ZM32.7416 28H39.4959C39.825 26.7215 40 25.3812 40 24C40 22.6188 39.825 21.2785 39.4959 20H32.7415C32.9119 21.3055 33 22.6415 33 24.0002C33 25.3588 32.9119 26.6947 32.7416 28ZM31.9406 16H37.8595C35.8778 12.5742 32.6623 9.95136 28.8207 8.739C30.166 10.9316 31.2252 13.3775 31.9406 16ZM27.7697 16C26.9016 13.2908 25.6082 10.8509 24 8.79805C22.3918 10.8509 21.0984 13.2908 20.2303 16H27.7697ZM16.0594 16C16.7748 13.3775 17.834 10.9316 19.1793 8.739C15.3377 9.95136 12.1222 12.5742 10.1405 16H16.0594ZM15.2585 20C15.0881 21.3055 15 22.6415 15 24.0002C15 25.3588 15.0881 26.6947 15.2584 28H8.50407C8.17501 26.7215 8 25.3812 8 24C8 22.6188 8.17501 21.2785 8.50407 20H15.2585Z" 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="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM27.265 40.6868C32.5447 39.6597 36.9514 36.1892 39.2604 31.5H31.5562C30.6722 34.9176 29.198 38.0376 27.265 40.6868ZM20.735 40.6868C18.802 38.0376 17.3278 34.9176 16.4438 31.5H8.73961C11.0486 36.1892 15.4553 39.6597 20.735 40.6868ZM19.5544 31.5C20.4996 34.7458 22.0385 37.6406 24 39.9982C25.9615 37.6406 27.5004 34.7458 28.4456 31.5H19.5544ZM29.1295 28.5H18.8705C18.6278 27.0481 18.5 25.5435 18.5 24.0002C18.5 22.4568 18.6278 20.9521 18.8706 19.5H29.1294C29.3722 20.9521 29.5 22.4568 29.5 24.0002C29.5 25.5435 29.3722 27.0481 29.1295 28.5ZM32.1666 28.5H40.398C40.7905 27.0667 41 25.5578 41 24C41 22.4422 40.7905 20.9333 40.398 19.5H32.1665C32.3858 20.9625 32.5 22.4665 32.5 24.0002C32.5 25.5338 32.3859 27.0377 32.1666 28.5ZM31.5561 16.5H39.2604C36.9513 11.8107 32.5445 8.34011 27.2646 7.31315C29.1977 9.96236 30.672 13.0823 31.5561 16.5ZM28.4454 16.5C27.5002 13.2544 25.9614 10.3598 24 8.00226C22.0386 10.3598 20.4998 13.2544 19.5546 16.5H28.4454ZM16.4439 16.5C17.328 13.0823 18.8023 9.96236 20.7354 7.31315C15.4555 8.34011 11.0487 11.8107 8.73961 16.5H16.4439ZM15.8335 19.5C15.6142 20.9625 15.5 22.4665 15.5 24.0002C15.5 25.5338 15.6141 27.0377 15.8334 28.5H7.60197C7.20954 27.0667 7 25.5578 7 24C7 22.4422 7.20954 20.9333 7.60197 19.5H15.8335Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/google/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 GoogleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconGoogle = forwardRef<SVGSVGElement, GoogleProps>(
-  ({ 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="M31.2612 15.3984C29.292 13.5157 26.7874 12.557 23.9978 12.557C19.052 12.557 14.8653 15.8954 13.3688 20.3824V20.3906C12.9888 21.5307 12.7729 22.7484 12.7729 24.0007C12.7729 25.253 12.9888 26.4708 13.3688 27.6108L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703C33.4268 41.2992 29.1266 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284C5.7331 29.9646 5 27.0646 5 24.0007C5 20.9352 5.73386 18.0338 7.0203 15.4691L7.01831 15.4675C10.1448 9.25783 16.5704 5 23.9978 5C29.1193 5 33.4203 6.88277 36.7109 9.94876L31.2612 15.3984Z" 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="M31.2612 15.3984C29.292 13.5157 26.7874 12.557 23.9978 12.557C19.052 12.557 14.8653 15.8954 13.3688 20.3824V20.3906C12.9888 21.5307 12.7729 22.7484 12.7729 24.0007C12.7729 25.253 12.9888 26.4708 13.3688 27.6108L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703C33.4268 41.2992 29.1266 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284C5.7331 29.9646 5 27.0646 5 24.0007C5 20.9352 5.73386 18.0338 7.0203 15.4691L7.01831 15.4675C10.1448 9.25783 16.5704 5 23.9978 5C29.1193 5 33.4203 6.88277 36.7109 9.94876L31.2612 15.3984Z" 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="M31.2612 15.3984C29.292 13.5157 26.7874 12.557 23.9978 12.557C19.052 12.557 14.8653 15.8954 13.3688 20.3824V20.3906C12.9888 21.5307 12.7729 22.7484 12.7729 24.0007C12.7729 25.253 12.9888 26.4708 13.3688 27.6108L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703C33.4268 41.2992 29.1266 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284C5.7331 29.9646 5 27.0646 5 24.0007C5 20.9352 5.73386 18.0338 7.0203 15.4691L7.01831 15.4675C10.1448 9.25783 16.5704 5 23.9978 5C29.1193 5 33.4203 6.88277 36.7109 9.94876L31.2612 15.3984Z" 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="M31.2612 15.3984C29.292 13.5157 26.7874 12.557 23.9978 12.557C19.052 12.557 14.8653 15.8954 13.3688 20.3824V20.3906C12.9888 21.5307 12.7729 22.7484 12.7729 24.0007C12.7729 25.253 12.9888 26.4708 13.3688 27.6108L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703C33.4268 41.2992 29.1266 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284C5.7331 29.9646 5 27.0646 5 24.0007C5 20.9352 5.73386 18.0338 7.0203 15.4691L7.01831 15.4675C10.1448 9.25783 16.5704 5 23.9978 5C29.1193 5 33.4203 6.88277 36.7109 9.94876L31.2612 15.3984Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/google-export/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 GoogleExportProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconGoogleExport = forwardRef<SVGSVGElement, GoogleExportProps>(
-  ({ 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="M19.07 5C18.1865 5 17.3686 5.46635 16.9186 6.2267L3.01018 29.7271C2.54575 30.5118 2.54541 31.4872 3.0093 32.2722L8.91816 42.2718C9.36795 43.033 10.1863 43.5 11.0705 43.5H30.6675C29.5874 42.6651 28.6536 41.6501 27.911 40.5H11.3558L5.74251 31.0006L19.3551 8H29.6446L37.9304 22.0002L37.9999 22C39.3187 22 40.5879 22.2128 41.7749 22.6058L32.0811 6.2267C31.6311 5.46635 30.8132 5 29.9297 5H19.07Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.8662 15.5L31.6601 23.8095C30.7951 24.3488 30.0038 24.9951 29.3046 25.73L25.1335 18.5H23.838L16.755 30.0099L17.3491 31H26.3779C26.1311 31.9589 25.9999 32.9641 25.9999 34H15.6505L13.2446 29.9901L22.1616 15.5H26.8662Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.3643 38.3588L39.2621 31.4609H32.9613V28.4609H41.4111C43.0531 28.4609 44.3842 29.792 44.3842 31.434V39.8838H41.3842V33.5815L34.4856 40.4801L32.3643 38.3588Z" 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="M19.07 5C18.1865 5 17.3686 5.46635 16.9186 6.2267L3.01018 29.7271C2.54575 30.5118 2.54541 31.4872 3.0093 32.2722L8.91816 42.2718C9.36795 43.033 10.1863 43.5 11.0705 43.5H30.6675C29.5874 42.6651 28.6536 41.6501 27.911 40.5H11.3558L5.74251 31.0006L19.3551 8H29.6446L37.9304 22.0002L37.9999 22C39.3187 22 40.5879 22.2128 41.7749 22.6058L32.0811 6.2267C31.6311 5.46635 30.8132 5 29.9297 5H19.07Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.8662 15.5L31.6601 23.8095C30.7951 24.3488 30.0038 24.9951 29.3046 25.73L25.1335 18.5H23.838L16.755 30.0099L17.3491 31H26.3779C26.1311 31.9589 25.9999 32.9641 25.9999 34H15.6505L13.2446 29.9901L22.1616 15.5H26.8662Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.3643 38.3588L39.2621 31.4609H32.9613V28.4609H41.4111C43.0531 28.4609 44.3842 29.792 44.3842 31.434V39.8838H41.3842V33.5815L34.4856 40.4801L32.3643 38.3588Z" 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="M19.0703 4.5C18.01 4.5 17.0285 5.05962 16.4885 5.97204L2.58014 29.4724C2.02282 30.4141 2.02242 31.5845 2.57909 32.5266L8.48794 42.5262C9.02769 43.4396 10.0098 44 11.0707 44H31.3645C29.8243 42.9759 28.5343 41.6055 27.6055 40H11.6413L6.32364 31.0008L19.6404 8.5H29.3597L37.3595 22.0168C37.5716 22.0056 37.7852 22 38.0001 22C39.5984 22 41.1236 22.3124 42.5182 22.8796L32.5116 5.97204C31.9716 5.05962 30.9901 4.5 29.9299 4.5H19.0703Z" style={{ fill: `var(--${type})` }}/>
 <path d="M27.1553 15L32.0902 23.5538C30.9032 24.2268 29.8423 25.0962 28.9515 26.1179L24.8451 19H24.1178L17.3405 30.0131L17.6326 30.5H26.5186C26.1814 31.6073 26.0001 32.7825 26.0001 34C26.0001 34.1675 26.0036 34.3342 26.0103 34.5H15.3678L12.6599 29.9869L21.8826 15H27.1553Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.0109 38.0053L38.0552 31.9609H32.9616V27.9609H41.4113C43.3295 27.9609 44.8844 29.5159 44.8844 31.434V39.8838H40.8844V34.7886L34.8393 40.8337L32.0109 38.0053Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconGoogleExport = forwardRef<SVGSVGElement, GoogleExportProps>(
 ;
   } 
   
-  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="M19.07 5C18.1865 5 17.3686 5.46635 16.9186 6.2267L3.01018 29.7271C2.54575 30.5118 2.54541 31.4872 3.0093 32.2722L8.91816 42.2718C9.36795 43.033 10.1863 43.5 11.0705 43.5H30.6675C29.5874 42.6651 28.6536 41.6501 27.911 40.5H11.3558L5.74251 31.0006L19.3551 8H29.6446L37.9304 22.0002L37.9999 22C39.3187 22 40.5879 22.2128 41.7749 22.6058L32.0811 6.2267C31.6311 5.46635 30.8132 5 29.9297 5H19.07Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.8662 15.5L31.6601 23.8095C30.7951 24.3488 30.0038 24.9951 29.3046 25.73L25.1335 18.5H23.838L16.755 30.0099L17.3491 31H26.3779C26.1311 31.9589 25.9999 32.9641 25.9999 34H15.6505L13.2446 29.9901L22.1616 15.5H26.8662Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.3643 38.3588L39.2621 31.4609H32.9613V28.4609H41.4111C43.0531 28.4609 44.3842 29.792 44.3842 31.434V39.8838H41.3842V33.5815L34.4856 40.4801L32.3643 38.3588Z" style={{ fill: `var(--${type})` }}/>

package/assets/graduationcap/index.tsx

@@ -1,37 +1,37 @@
 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 GraduationcapProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconGraduationcap = forwardRef<SVGSVGElement, GraduationcapProps>(
-  ({ 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="M24.9135 6.4688C24.3402 6.17446 23.6601 6.17446 23.0867 6.4688L2.716 16.9263C1.26719 17.6701 1.26719 19.741 2.716 20.4848L9.99658 24.2224V34.4258C9.99658 35.7381 10.7307 36.9402 11.8981 37.5395L22.2731 42.8656C23.2765 43.3807 24.4666 43.3807 25.47 42.8656L35.845 37.5395C37.0125 36.9402 37.7466 35.7381 37.7466 34.4258V24.3543L41.0626 22.652V35.625H44.0626V21.1119L45.2842 20.4848C46.7331 19.741 46.7331 17.6701 45.2842 16.9263L24.9135 6.4688ZM24.0001 9.37212L5.81903 18.7056L24.0001 28.039L42.1812 18.7056L24.0001 9.37212ZM12.9966 34.4258V25.7625L23.0867 30.9423C23.6601 31.2367 24.3402 31.2367 24.9135 30.9423L34.7466 25.8944V34.4258C34.7466 34.6133 34.6417 34.785 34.4749 34.8706L24.0999 40.1968C23.9566 40.2703 23.7866 40.2703 23.6432 40.1968L13.2682 34.8706C13.1015 34.785 12.9966 34.6133 12.9966 34.4258Z" 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.913 6.4688C24.3397 6.17446 23.6596 6.17446 23.0862 6.4688L2.71551 16.9263C1.26671 17.6701 1.2667 19.741 2.71551 20.4848C9.81594 24.1299 16.9754 27.4557 24.2662 30.7483C24.4011 30.8092 24.556 30.8073 24.6894 30.7429C30.0533 28.1534 35.2966 25.5595 40.5625 22.8924V36.125H44.5625V20.8547C44.8028 20.7316 45.0432 20.6083 45.2838 20.4848C46.7326 19.741 46.7326 17.6701 45.2838 16.9263L24.913 6.4688Z" style={{ fill: `var(--${type})` }}/>
 <path d="M10.9996 34.876V28.0487L23.0314 33.4824C23.9757 33.9089 25.0605 33.895 25.9936 33.4446L36.9996 28.1313V34.876C36.9996 35.6151 36.5921 36.2939 35.9397 36.6413L24.9397 42.4993C24.3521 42.8122 23.6472 42.8122 23.0595 42.4993L12.0595 36.6413C11.4072 36.2939 10.9996 35.6151 10.9996 34.876Z" 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="M24.9135 6.4688C24.3402 6.17446 23.6601 6.17446 23.0867 6.4688L2.716 16.9263C1.26719 17.6701 1.26719 19.741 2.716 20.4848L9.49658 23.9657V34.4257C9.49658 35.9255 10.3356 37.2993 11.6698 37.9842L22.0448 43.3103C23.1915 43.899 24.5516 43.899 25.6984 43.3103L36.0734 37.9842C37.4076 37.2993 38.2466 35.9255 38.2466 34.4257V24.0977L40.5626 22.9087V36.1249H44.5626V20.8553L45.2842 20.4848C46.7331 19.741 46.7331 17.6701 45.2842 16.9263L24.9135 6.4688ZM24.0001 10.4962L8.00867 18.7056L24.0001 26.9149L39.9916 18.7056L24.0001 10.4962ZM13.4966 34.4257V26.0191L23.0867 30.9423C23.6601 31.2367 24.3402 31.2367 24.9135 30.9423L34.2466 26.1511V34.4257L23.8716 39.7518L13.4966 34.4257Z" 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="M24.9135 6.4688C24.3402 6.17446 23.6601 6.17446 23.0867 6.4688L2.716 16.9263C1.26719 17.6701 1.26719 19.741 2.716 20.4848L9.99658 24.2224V34.4258C9.99658 35.7381 10.7307 36.9402 11.8981 37.5395L22.2731 42.8656C23.2765 43.3807 24.4666 43.3807 25.47 42.8656L35.845 37.5395C37.0125 36.9402 37.7466 35.7381 37.7466 34.4258V24.3543L41.0626 22.652V35.625H44.0626V21.1119L45.2842 20.4848C46.7331 19.741 46.7331 17.6701 45.2842 16.9263L24.9135 6.4688ZM24.0001 9.37212L5.81903 18.7056L24.0001 28.039L42.1812 18.7056L24.0001 9.37212ZM12.9966 34.4258V25.7625L23.0867 30.9423C23.6601 31.2367 24.3402 31.2367 24.9135 30.9423L34.7466 25.8944V34.4258C34.7466 34.6133 34.6417 34.785 34.4749 34.8706L24.0999 40.1968C23.9566 40.2703 23.7866 40.2703 23.6432 40.1968L13.2682 34.8706C13.1015 34.785 12.9966 34.6133 12.9966 34.4258Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;