@liner-fe/icon 0.0.55 → 0.1.1

package/assets/regenerate/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 RegenerateProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Regenerate = forwardRef<SVGSVGElement, RegenerateProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconRegenerate = forwardRef<SVGSVGElement, RegenerateProps>(
+  ({ 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="M8.5 15.8692L8.5 7H5.5V16C5.5 17.933 7.067 19.5 9 19.5H18V16.5H11.5874C14.1288 12.303 18.7384 9.5 24 9.5C30.311 9.5 35.684 13.5327 37.6753 19.1665C37.7722 19.4406 37.861 19.7185 37.9416 20H41.0404C40.8944 19.3756 40.7148 18.7638 40.5038 18.1668C38.1022 11.3719 31.6219 6.5 24 6.5C17.2683 6.5 11.4273 10.3002 8.5 15.8692Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6.95923 28H10.0587C11.795 34.0628 17.3793 38.5 24 38.5C29.2632 38.5 33.8714 35.6958 36.4122 31.5L29.5532 31.5L29.5532 28.5L38.5532 28.5C40.4862 28.5 42.0532 30.067 42.0532 32V41H39.0532V32.93C36.0026 38.0613 30.4029 41.5 24 41.5C15.7112 41.5 8.76838 35.7374 6.95923 28Z" 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="M8.5 15.8692L8.5 7H5.5V16C5.5 17.933 7.067 19.5 9 19.5H18V16.5H11.5874C14.1288 12.303 18.7384 9.5 24 9.5C30.311 9.5 35.684 13.5327 37.6753 19.1665C37.7722 19.4406 37.861 19.7185 37.9416 20H41.0404C40.8944 19.3756 40.7148 18.7638 40.5038 18.1668C38.1022 11.3719 31.6219 6.5 24 6.5C17.2683 6.5 11.4273 10.3002 8.5 15.8692Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6.95923 28H10.0587C11.795 34.0628 17.3793 38.5 24 38.5C29.2632 38.5 33.8714 35.6958 36.4122 31.5L29.5532 31.5L29.5532 28.5L38.5532 28.5C40.4862 28.5 42.0532 30.067 42.0532 32V41H39.0532V32.93C36.0026 38.0613 30.4029 41.5 24 41.5C15.7112 41.5 8.76838 35.7374 6.95923 28Z" 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="M18 20V16H12.5088C15.0397 12.3718 19.2444 10 24 10C30.0926 10 35.281 13.8929 37.2039 19.3332C37.2816 19.5529 37.3539 19.7753 37.4208 20H41.5535C41.3987 19.3182 41.2052 18.6507 40.9753 18.0002C38.5052 11.0117 31.8404 6 24 6C17.7367 6 12.2237 9.19823 9 14.0475L9 7H5V16C5 18.2091 6.79086 20 9 20H18Z" style={{ fill: `var(--${type})` }}/>
 <path d="M10.5798 28H6.44604C8.26496 36.016 15.4337 42 24 42C29.9806 42 35.28 39.0833 38.5532 34.5948V41H42.5532V32C42.5532 29.7909 40.7624 28 38.5532 28L29.5532 28L29.5532 32L35.4906 32C32.9607 35.627 28.7575 38 24 38C17.658 38 12.3009 33.783 10.5798 28Z" 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="M8.5 15.8692L8.5 7H5.5V16C5.5 17.933 7.067 19.5 9 19.5H18V16.5H11.5874C14.1288 12.303 18.7384 9.5 24 9.5C30.311 9.5 35.684 13.5327 37.6753 19.1665C37.7722 19.4406 37.861 19.7185 37.9416 20H41.0404C40.8944 19.3756 40.7148 18.7638 40.5038 18.1668C38.1022 11.3719 31.6219 6.5 24 6.5C17.2683 6.5 11.4273 10.3002 8.5 15.8692Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6.95923 28H10.0587C11.795 34.0628 17.3793 38.5 24 38.5C29.2632 38.5 33.8714 35.6958 36.4122 31.5L29.5532 31.5L29.5532 28.5L38.5532 28.5C40.4862 28.5 42.0532 30.067 42.0532 32V41H39.0532V32.93C36.0026 38.0613 30.4029 41.5 24 41.5C15.7112 41.5 8.76838 35.7374 6.95923 28Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/remove-from-folder/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 RemoveFromFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const RemoveFromFolder = forwardRef<SVGSVGElement, RemoveFromFolderProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconRemoveFromFolder = forwardRef<SVGSVGElement, RemoveFromFolderProps>(
+  ({ 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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19.5 26.5H4.5V23.5H19.5V26.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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19.5 26.5H4.5V23.5H19.5V26.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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19.5 27H4.5V23H19.5V27Z" 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="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M19.5 26.5H4.5V23.5H19.5V26.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/report/index.tsx

@@ -1,30 +1,30 @@
 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 ReportProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Report = forwardRef<SVGSVGElement, ReportProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconReport = forwardRef<SVGSVGElement, ReportProps>(
+  ({ 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="M41 7C42.1046 7 43 7.89543 43 9V35C43 36.1046 42.1046 37 41 37H24L14.4404 43.3555C13.1112 44.239 11.333 43.2856 11.333 41.6895V37H7C5.89543 37 5 36.1046 5 35V9C5 7.89543 5.89543 7 7 7H41ZM24 26C23.3869 26 22.8378 26.2204 22.4033 26.6553C21.9691 27.09 21.75 27.6383 21.75 28.25C21.75 28.8617 21.9691 29.41 22.4033 29.8447C22.8378 30.2796 23.3869 30.5 24 30.5C24.6131 30.5 25.1622 30.2796 25.5967 29.8447C26.0309 29.41 26.25 28.8617 26.25 28.25C26.25 27.6383 26.0309 27.09 25.5967 26.6553C25.1622 26.2204 24.6131 26 24 26ZM22 14V23H26V14H22Z" 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="M41 7C42.1046 7 43 7.89543 43 9V35C43 36.1046 42.1046 37 41 37H24L14.4406 43.3553C13.1113 44.239 11.3333 43.286 11.3333 41.6898V37H7C5.89543 37 5 36.1046 5 35V9C5 7.89543 5.89543 7 7 7H41ZM22.5 23V14H25.5V23H22.5ZM24 26C23.455 26 22.9669 26.1955 22.5807 26.582C22.1946 26.9685 22 27.4562 22 28C22 28.5438 22.1946 29.0315 22.5807 29.418C22.9669 29.8045 23.455 30 24 30C24.545 30 25.0331 29.8045 25.4193 29.418C25.8054 29.0315 26 28.5438 26 28C26 27.4562 25.8054 26.9685 25.4193 26.582C25.0331 26.1955 24.545 26 24 26Z" 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="M24 25.6562C23.3869 25.6562 22.8377 25.8762 22.4033 26.311C21.9689 26.7458 21.75 27.2945 21.75 27.9062C21.75 28.518 21.9689 29.0667 22.4033 29.5015C22.8377 29.9363 23.3869 30.1562 24 30.1562C24.6131 30.1562 25.1623 29.9363 25.5967 29.5015C26.0311 29.0667 26.25 28.518 26.25 27.9062C26.25 27.2945 26.0311 26.7458 25.5967 26.311C25.1623 25.8762 24.6131 25.6562 24 25.6562Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22 14V23.5H26V14H22Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41 7C42.1046 7 43 7.89543 43 9V35C43 36.1046 42.1046 37 41 37H24L14.4406 43.3553C13.1113 44.239 11.3333 43.286 11.3333 41.6898V37H7C5.89543 37 5 36.1046 5 35V9C5 7.89543 5.89543 7 7 7H41ZM15.3333 33V37.9585L22.7917 33H39V11H9V33H15.3333Z" style={{ fill: `var(--${type})` }}/>
@@ -32,7 +32,7 @@ export const Report = forwardRef<SVGSVGElement, ReportProps>(
 ;
   } 
   
-  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 26C23.455 26 22.9669 26.1955 22.5807 26.582C22.1946 26.9685 22 27.4562 22 28C22 28.5438 22.1946 29.0315 22.5807 29.418C22.9669 29.8045 23.455 30 24 30C24.545 30 25.0331 29.8045 25.4193 29.418C25.8054 29.0315 26 28.5438 26 28C26 27.4562 25.8054 26.9685 25.4193 26.582C25.0331 26.1955 24.545 26 24 26Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.5 14V23.5H25.5V14H22.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41 7C42.1046 7 43 7.89543 43 9V35C43 36.1046 42.1046 37 41 37H24L14.4406 43.3553C13.1113 44.239 11.3333 43.286 11.3333 41.6898V37H7C5.89543 37 5 36.1046 5 35V9C5 7.89543 5.89543 7 7 7H41ZM14.3333 34V39.8241L23.0938 34H40V10H8V34H14.3333Z" style={{ fill: `var(--${type})` }}/>

package/assets/restaurant/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 RestaurantProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Restaurant = forwardRef<SVGSVGElement, RestaurantProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconRestaurant = forwardRef<SVGSVGElement, RestaurantProps>(
+  ({ 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="M24.5 19.4502C24.5 21.6891 23.0286 23.5841 21 24.2217V42.499H12V24.2217C9.97156 23.5845 8.5 21.6899 8.5 19.4512V5.80568H11.5V19.4512C11.5 20.5558 12.3954 21.4512 13.5 21.4512H15V39.499H18V21.4512H19.499C20.604 21.4509 21.5 20.5552 21.5 19.4502V5.8047H24.5V19.4502Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.4727 6.20997C36.8438 4.27021 39.9997 5.2066 40 7.67384V42.4981H31V28.2979C27.3374 27.4451 25.4495 23.2352 27.4121 19.8975L35.3457 6.40626L35.4727 6.20997ZM29.998 21.418C29.025 23.0728 30.0591 25.184 31.9629 25.4297C33.1274 25.5798 33.9998 26.572 34 27.7461V39.4981H37V9.51076L29.998 21.418Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 18.4385H15V5.8047H18V18.4385Z" 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.5 19.4502C24.5 21.6891 23.0286 23.5841 21 24.2217V42.499H12V24.2217C9.97156 23.5845 8.5 21.6899 8.5 19.4512V5.80568H11.5V19.4512C11.5 20.5558 12.3954 21.4512 13.5 21.4512H15V39.499H18V21.4512H19.499C20.604 21.4509 21.5 20.5552 21.5 19.4502V5.8047H24.5V19.4502Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.4727 6.20997C36.8438 4.27021 39.9997 5.2066 40 7.67384V42.4981H31V28.2979C27.3374 27.4451 25.4495 23.2352 27.4121 19.8975L35.3457 6.40626L35.4727 6.20997ZM29.998 21.418C29.025 23.0728 30.0591 25.184 31.9629 25.4297C33.1274 25.5798 33.9998 26.572 34 27.7461V39.4981H37V9.51076L29.998 21.418Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 18.4385H15V5.8047H18V18.4385Z" 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.0664 5.91844C36.7117 3.58989 40.5 4.714 40.5 7.67528V42.9995H30.5V28.6821C26.7703 27.5578 24.9163 23.1586 26.9814 19.646L34.9141 6.15477L35.0664 5.91844ZM30.4297 21.6733C29.6386 23.0191 30.4791 24.7355 32.0273 24.935C33.4413 25.1174 34.5 26.3219 34.5 27.7475V38.9995H36.5V11.3491L30.4297 21.6733Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25 19.4497C25 21.7816 23.5484 23.7731 21.5 24.5737V42.9985H11.5V24.5737C9.45172 23.7735 8 21.7824 8 19.4507V5.80516H12V19.4507C12 20.2791 12.6716 20.9507 13.5 20.9507H15.5V38.9985H17.5V20.9507H19.499C20.3279 20.9504 21 20.2786 21 19.4497V5.80419H25V19.4497Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18.5 18.438H14.5V5.80419H18.5V18.438Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const Restaurant = forwardRef<SVGSVGElement, RestaurantProps>(
 ;
   } 
   
-  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.5 19.4502C24.5 21.6891 23.0286 23.5841 21 24.2217V42.499H12V24.2217C9.97156 23.5845 8.5 21.6899 8.5 19.4512V5.80568H11.5V19.4512C11.5 20.5558 12.3954 21.4512 13.5 21.4512H15V39.499H18V21.4512H19.499C20.604 21.4509 21.5 20.5552 21.5 19.4502V5.8047H24.5V19.4502Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.4727 6.20997C36.8438 4.27021 39.9997 5.2066 40 7.67384V42.4981H31V28.2979C27.3374 27.4451 25.4495 23.2352 27.4121 19.8975L35.3457 6.40626L35.4727 6.20997ZM29.998 21.418C29.025 23.0728 30.0591 25.184 31.9629 25.4297C33.1274 25.5798 33.9998 26.572 34 27.7461V39.4981H37V9.51076L29.998 21.418Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 18.4385H15V5.8047H18V18.4385Z" style={{ fill: `var(--${type})` }}/>

package/assets/retry/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 RetryProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Retry = forwardRef<SVGSVGElement, RetryProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconRetry = forwardRef<SVGSVGElement, RetryProps>(
+  ({ 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="M23.5 6.5C29.8688 6.5 35.4389 9.90259 38.5 14.9854V7.5H41.5V20H29V17H36.2002C33.7296 12.5278 28.9674 9.5 23.5 9.5C17.189 9.50007 11.8164 13.5333 9.8252 19.167L9.63574 19.7383C9.22259 21.0841 9 22.5149 9 24C9 32.0081 15.4919 38.4999 23.5 38.5C26.2187 38.5 28.7625 37.7505 30.9375 36.4482C30.9786 36.4236 31.0197 36.399 31.0605 36.374C34.2274 34.435 36.5934 31.3153 37.543 27.626C37.8413 26.4671 38 25.2521 38 24H41C41 25.5101 40.8079 26.9752 40.4482 28.373L40.4492 28.374C40.2811 29.0271 40.0752 29.6649 39.8359 30.2861C39.7412 30.5321 39.6405 30.7751 39.5352 31.0156C39.5146 31.0625 39.4946 31.1096 39.4736 31.1562C39.3938 31.3341 39.3101 31.5099 39.2246 31.6846C39.2033 31.7281 39.1828 31.7721 39.1611 31.8154C39.0659 32.0059 38.9672 32.1944 38.8652 32.3809C38.8611 32.3884 38.8567 32.3958 38.8525 32.4033C38.7573 32.577 38.6595 32.7489 38.5586 32.9189C38.5353 32.9581 38.5118 32.9971 38.4883 33.0361C38.3798 33.2157 38.268 33.3931 38.1533 33.5684C38.136 33.5949 38.1181 33.621 38.1006 33.6475C37.7289 34.2088 37.3257 34.7473 36.8936 35.2607C36.8656 35.294 36.8378 35.3273 36.8096 35.3604C36.533 35.6841 36.2445 35.9971 35.9453 36.2998C35.9212 36.3242 35.8983 36.3498 35.874 36.374C35.7293 36.5188 35.5813 36.6602 35.4316 36.7998C35.4018 36.8276 35.3718 36.8552 35.3418 36.8828C35.1997 37.0134 35.0555 37.1416 34.9092 37.2676C34.8638 37.3066 34.8182 37.3452 34.7725 37.3838C34.4548 37.6516 34.1275 37.9083 33.791 38.1533C33.7624 38.1742 33.7338 38.1951 33.7051 38.2158C33.531 38.341 33.3546 38.4631 33.1758 38.582C33.1568 38.5946 33.1381 38.6076 33.1191 38.6201C32.9399 38.7383 32.759 38.8541 32.5752 38.9658C32.5461 38.9835 32.5165 39.0001 32.4873 39.0176C32.3228 39.1162 32.1562 39.2114 31.9883 39.3047C31.9601 39.3203 31.9326 39.337 31.9043 39.3525C31.7186 39.4544 31.5305 39.5522 31.3408 39.6475C31.3109 39.6625 31.281 39.6775 31.251 39.6924C31.0588 39.7875 30.865 39.8796 30.6689 39.9678C30.6495 39.9765 30.6298 39.9845 30.6104 39.9932C30.4344 40.0715 30.2571 40.1471 30.0781 40.2197C30.0286 40.2398 29.9794 40.2606 29.9297 40.2803C29.9051 40.29 29.8801 40.299 29.8555 40.3086C29.7657 40.3436 29.6755 40.3776 29.585 40.4111C29.5408 40.4275 29.4965 40.4439 29.4521 40.46C28.94 40.6452 28.417 40.8078 27.8838 40.9453C27.8672 40.9496 27.8506 40.9538 27.834 40.958C27.7133 40.9887 27.5923 41.0187 27.4707 41.0469C27.4515 41.0513 27.4323 41.0552 27.4131 41.0596C27.3099 41.0831 27.2064 41.1052 27.1025 41.127C27.0463 41.1387 26.9901 41.1509 26.9336 41.1621C26.8661 41.1755 26.7983 41.1875 26.7305 41.2002C26.6632 41.2128 26.5959 41.2255 26.5283 41.2373C26.464 41.2485 26.3995 41.259 26.335 41.2695C26.2689 41.2803 26.203 41.2917 26.1367 41.3018C26.1328 41.3024 26.129 41.3041 26.125 41.3047L25.7285 41.3594C25.6922 41.364 25.6556 41.3667 25.6191 41.3711C25.5172 41.3834 25.415 41.3957 25.3125 41.4062C25.2836 41.4092 25.2546 41.4112 25.2256 41.4141C25.1246 41.4239 25.0234 41.4332 24.9219 41.4414C24.8653 41.446 24.8087 41.4511 24.752 41.4551C24.6743 41.4606 24.5965 41.4653 24.5186 41.4697C24.448 41.4738 24.3774 41.4773 24.3066 41.4805C24.2264 41.4841 24.146 41.4867 24.0654 41.4893C24.0209 41.4907 23.9763 41.4931 23.9316 41.4941C23.7882 41.4976 23.6443 41.5 23.5 41.5C13.8351 41.4999 6 33.6649 6 24C6 22.0849 6.30843 20.239 6.87891 18.5107L6.99609 18.167C9.39774 11.3721 15.8781 6.50007 23.5 6.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="M23.5 6.5C29.8688 6.5 35.4389 9.90259 38.5 14.9854V7.5H41.5V20H29V17H36.2002C33.7296 12.5278 28.9674 9.5 23.5 9.5C17.189 9.50007 11.8164 13.5333 9.8252 19.167L9.63574 19.7383C9.22259 21.0841 9 22.5149 9 24C9 32.0081 15.4919 38.4999 23.5 38.5C26.2187 38.5 28.7625 37.7505 30.9375 36.4482C30.9786 36.4236 31.0197 36.399 31.0605 36.374C34.2274 34.435 36.5934 31.3153 37.543 27.626C37.8413 26.4671 38 25.2521 38 24H41C41 25.5101 40.8079 26.9752 40.4482 28.373L40.4492 28.374C40.2811 29.0271 40.0752 29.6649 39.8359 30.2861C39.7412 30.5321 39.6405 30.7751 39.5352 31.0156C39.5146 31.0625 39.4946 31.1096 39.4736 31.1562C39.3938 31.3341 39.3101 31.5099 39.2246 31.6846C39.2033 31.7281 39.1828 31.7721 39.1611 31.8154C39.0659 32.0059 38.9672 32.1944 38.8652 32.3809C38.8611 32.3884 38.8567 32.3958 38.8525 32.4033C38.7573 32.577 38.6595 32.7489 38.5586 32.9189C38.5353 32.9581 38.5118 32.9971 38.4883 33.0361C38.3798 33.2157 38.268 33.3931 38.1533 33.5684C38.136 33.5949 38.1181 33.621 38.1006 33.6475C37.7289 34.2088 37.3257 34.7473 36.8936 35.2607C36.8656 35.294 36.8378 35.3273 36.8096 35.3604C36.533 35.6841 36.2445 35.9971 35.9453 36.2998C35.9212 36.3242 35.8983 36.3498 35.874 36.374C35.7293 36.5188 35.5813 36.6602 35.4316 36.7998C35.4018 36.8276 35.3718 36.8552 35.3418 36.8828C35.1997 37.0134 35.0555 37.1416 34.9092 37.2676C34.8638 37.3066 34.8182 37.3452 34.7725 37.3838C34.4548 37.6516 34.1275 37.9083 33.791 38.1533C33.7624 38.1742 33.7338 38.1951 33.7051 38.2158C33.531 38.341 33.3546 38.4631 33.1758 38.582C33.1568 38.5946 33.1381 38.6076 33.1191 38.6201C32.9399 38.7383 32.759 38.8541 32.5752 38.9658C32.5461 38.9835 32.5165 39.0001 32.4873 39.0176C32.3228 39.1162 32.1562 39.2114 31.9883 39.3047C31.9601 39.3203 31.9326 39.337 31.9043 39.3525C31.7186 39.4544 31.5305 39.5522 31.3408 39.6475C31.3109 39.6625 31.281 39.6775 31.251 39.6924C31.0588 39.7875 30.865 39.8796 30.6689 39.9678C30.6495 39.9765 30.6298 39.9845 30.6104 39.9932C30.4344 40.0715 30.2571 40.1471 30.0781 40.2197C30.0286 40.2398 29.9794 40.2606 29.9297 40.2803C29.9051 40.29 29.8801 40.299 29.8555 40.3086C29.7657 40.3436 29.6755 40.3776 29.585 40.4111C29.5408 40.4275 29.4965 40.4439 29.4521 40.46C28.94 40.6452 28.417 40.8078 27.8838 40.9453C27.8672 40.9496 27.8506 40.9538 27.834 40.958C27.7133 40.9887 27.5923 41.0187 27.4707 41.0469C27.4515 41.0513 27.4323 41.0552 27.4131 41.0596C27.3099 41.0831 27.2064 41.1052 27.1025 41.127C27.0463 41.1387 26.9901 41.1509 26.9336 41.1621C26.8661 41.1755 26.7983 41.1875 26.7305 41.2002C26.6632 41.2128 26.5959 41.2255 26.5283 41.2373C26.464 41.2485 26.3995 41.259 26.335 41.2695C26.2689 41.2803 26.203 41.2917 26.1367 41.3018C26.1328 41.3024 26.129 41.3041 26.125 41.3047L25.7285 41.3594C25.6922 41.364 25.6556 41.3667 25.6191 41.3711C25.5172 41.3834 25.415 41.3957 25.3125 41.4062C25.2836 41.4092 25.2546 41.4112 25.2256 41.4141C25.1246 41.4239 25.0234 41.4332 24.9219 41.4414C24.8653 41.446 24.8087 41.4511 24.752 41.4551C24.6743 41.4606 24.5965 41.4653 24.5186 41.4697C24.448 41.4738 24.3774 41.4773 24.3066 41.4805C24.2264 41.4841 24.146 41.4867 24.0654 41.4893C24.0209 41.4907 23.9763 41.4931 23.9316 41.4941C23.7882 41.4976 23.6443 41.5 23.5 41.5C13.8351 41.4999 6 33.6649 6 24C6 22.0849 6.30843 20.239 6.87891 18.5107L6.99609 18.167C9.39774 11.3721 15.8781 6.50007 23.5 6.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="M11.2718 11.2721C18.3012 4.24264 29.6984 4.24264 36.7278 11.2721C37.591 12.1353 38.348 13.0664 39.0003 14.0475V7.00059H43.0003V20.0006H30.0003V16.0006H35.4896C35.0242 15.3341 34.496 14.6965 33.8997 14.1002C28.4324 8.63293 19.5682 8.63305 14.1009 14.1002C8.63354 19.5675 8.63354 28.4317 14.1009 33.899C19.5682 39.3662 28.4324 39.3663 33.8997 33.899C34.0587 33.74 34.2129 33.5781 34.3626 33.4137C35.2582 32.4283 36.0143 31.3143 36.6019 30.1031C36.6806 29.9405 36.7563 29.7768 36.8284 29.6119C36.8452 29.5736 36.8618 29.5352 36.8782 29.4967L36.9212 29.3971C36.9941 29.2228 37.0633 29.0466 37.1292 28.8688C37.3601 28.2443 37.5459 27.6066 37.6849 26.9606L37.7523 26.6266C37.9137 25.7759 38.0003 24.8982 38.0003 24.0006H42.0003C42.0003 26.5272 41.4781 28.9319 40.5384 31.1139L40.5208 31.1559C40.5177 31.1631 40.5142 31.1701 40.511 31.1774C40.4644 31.2845 40.4161 31.3907 40.3675 31.4967C40.355 31.524 40.343 31.5515 40.3304 31.5787C40.287 31.672 40.2425 31.7646 40.1976 31.857C40.1589 31.9368 40.1193 32.0161 40.0794 32.0953C40.058 32.1377 40.0367 32.1801 40.0149 32.2223C39.9883 32.2741 39.962 32.326 39.9349 32.3775C39.8277 32.5809 39.7174 32.7824 39.6028 32.9811C39.4239 33.2916 39.2344 33.5975 39.0355 33.899C38.9952 33.96 38.9553 34.0212 38.9144 34.0816C38.6845 34.421 38.4422 34.7544 38.1868 35.0807C37.3686 36.1268 36.4366 37.0794 35.4105 37.9215C35.3459 37.9745 35.2802 38.0258 35.2151 38.0777C35.167 38.1162 35.1192 38.155 35.0706 38.193C34.9977 38.25 34.9244 38.3062 34.8509 38.3619C34.8088 38.3938 34.7663 38.4252 34.7239 38.4566C34.66 38.5042 34.596 38.5516 34.5315 38.5983C34.4701 38.6427 34.4081 38.6864 34.346 38.7301C34.2711 38.7828 34.1959 38.8349 34.1204 38.8863C34.0912 38.9063 34.0619 38.9262 34.0325 38.9459C33.9302 39.0148 33.8274 39.0825 33.7239 39.149C33.7093 39.1585 33.6947 39.168 33.68 39.1774C33.5873 39.2366 33.4942 39.2948 33.4007 39.3522C33.3504 39.383 33.2999 39.4136 33.2493 39.444C33.175 39.4885 33.1005 39.5324 33.0257 39.5758C32.9837 39.6002 32.9419 39.625 32.8997 39.649C32.8179 39.6956 32.736 39.7415 32.6536 39.7867C32.5869 39.8234 32.5197 39.8593 32.4524 39.8951C32.405 39.9204 32.3575 39.9455 32.3099 39.9703C32.2243 40.0149 32.1384 40.0589 32.0521 40.1022C32.0082 40.1241 31.9643 40.146 31.9202 40.1676C31.8292 40.2123 31.7377 40.2562 31.6458 40.2994C31.6065 40.3179 31.5671 40.336 31.5276 40.3541C29.6089 41.2388 27.5085 41.7952 25.2972 41.9527C25.2916 41.9531 25.2861 41.9533 25.2806 41.9537C24.8576 41.9835 24.4308 42.0006 24.0003 42.0006C19.3936 42.0007 14.7866 40.242 11.2718 36.7272C4.24274 29.6978 4.24274 18.3014 11.2718 11.2721Z" 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="M23.5 6.5C29.8688 6.5 35.4389 9.90259 38.5 14.9854V7.5H41.5V20H29V17H36.2002C33.7296 12.5278 28.9674 9.5 23.5 9.5C17.189 9.50007 11.8164 13.5333 9.8252 19.167L9.63574 19.7383C9.22259 21.0841 9 22.5149 9 24C9 32.0081 15.4919 38.4999 23.5 38.5C26.2187 38.5 28.7625 37.7505 30.9375 36.4482C30.9786 36.4236 31.0197 36.399 31.0605 36.374C34.2274 34.435 36.5934 31.3153 37.543 27.626C37.8413 26.4671 38 25.2521 38 24H41C41 25.5101 40.8079 26.9752 40.4482 28.373L40.4492 28.374C40.2811 29.0271 40.0752 29.6649 39.8359 30.2861C39.7412 30.5321 39.6405 30.7751 39.5352 31.0156C39.5146 31.0625 39.4946 31.1096 39.4736 31.1562C39.3938 31.3341 39.3101 31.5099 39.2246 31.6846C39.2033 31.7281 39.1828 31.7721 39.1611 31.8154C39.0659 32.0059 38.9672 32.1944 38.8652 32.3809C38.8611 32.3884 38.8567 32.3958 38.8525 32.4033C38.7573 32.577 38.6595 32.7489 38.5586 32.9189C38.5353 32.9581 38.5118 32.9971 38.4883 33.0361C38.3798 33.2157 38.268 33.3931 38.1533 33.5684C38.136 33.5949 38.1181 33.621 38.1006 33.6475C37.7289 34.2088 37.3257 34.7473 36.8936 35.2607C36.8656 35.294 36.8378 35.3273 36.8096 35.3604C36.533 35.6841 36.2445 35.9971 35.9453 36.2998C35.9212 36.3242 35.8983 36.3498 35.874 36.374C35.7293 36.5188 35.5813 36.6602 35.4316 36.7998C35.4018 36.8276 35.3718 36.8552 35.3418 36.8828C35.1997 37.0134 35.0555 37.1416 34.9092 37.2676C34.8638 37.3066 34.8182 37.3452 34.7725 37.3838C34.4548 37.6516 34.1275 37.9083 33.791 38.1533C33.7624 38.1742 33.7338 38.1951 33.7051 38.2158C33.531 38.341 33.3546 38.4631 33.1758 38.582C33.1568 38.5946 33.1381 38.6076 33.1191 38.6201C32.9399 38.7383 32.759 38.8541 32.5752 38.9658C32.5461 38.9835 32.5165 39.0001 32.4873 39.0176C32.3228 39.1162 32.1562 39.2114 31.9883 39.3047C31.9601 39.3203 31.9326 39.337 31.9043 39.3525C31.7186 39.4544 31.5305 39.5522 31.3408 39.6475C31.3109 39.6625 31.281 39.6775 31.251 39.6924C31.0588 39.7875 30.865 39.8796 30.6689 39.9678C30.6495 39.9765 30.6298 39.9845 30.6104 39.9932C30.4344 40.0715 30.2571 40.1471 30.0781 40.2197C30.0286 40.2398 29.9794 40.2606 29.9297 40.2803C29.9051 40.29 29.8801 40.299 29.8555 40.3086C29.7657 40.3436 29.6755 40.3776 29.585 40.4111C29.5408 40.4275 29.4965 40.4439 29.4521 40.46C28.94 40.6452 28.417 40.8078 27.8838 40.9453C27.8672 40.9496 27.8506 40.9538 27.834 40.958C27.7133 40.9887 27.5923 41.0187 27.4707 41.0469C27.4515 41.0513 27.4323 41.0552 27.4131 41.0596C27.3099 41.0831 27.2064 41.1052 27.1025 41.127C27.0463 41.1387 26.9901 41.1509 26.9336 41.1621C26.8661 41.1755 26.7983 41.1875 26.7305 41.2002C26.6632 41.2128 26.5959 41.2255 26.5283 41.2373C26.464 41.2485 26.3995 41.259 26.335 41.2695C26.2689 41.2803 26.203 41.2917 26.1367 41.3018C26.1328 41.3024 26.129 41.3041 26.125 41.3047L25.7285 41.3594C25.6922 41.364 25.6556 41.3667 25.6191 41.3711C25.5172 41.3834 25.415 41.3957 25.3125 41.4062C25.2836 41.4092 25.2546 41.4112 25.2256 41.4141C25.1246 41.4239 25.0234 41.4332 24.9219 41.4414C24.8653 41.446 24.8087 41.4511 24.752 41.4551C24.6743 41.4606 24.5965 41.4653 24.5186 41.4697C24.448 41.4738 24.3774 41.4773 24.3066 41.4805C24.2264 41.4841 24.146 41.4867 24.0654 41.4893C24.0209 41.4907 23.9763 41.4931 23.9316 41.4941C23.7882 41.4976 23.6443 41.5 23.5 41.5C13.8351 41.4999 6 33.6649 6 24C6 22.0849 6.30843 20.239 6.87891 18.5107L6.99609 18.167C9.39774 11.3721 15.8781 6.50007 23.5 6.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/rocket/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 RocketProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Rocket = forwardRef<SVGSVGElement, RocketProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconRocket = forwardRef<SVGSVGElement, RocketProps>(
+  ({ 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.2499 19.0963C32.3545 19.0963 33.2499 18.2009 33.2499 17.0963C33.2499 15.9918 32.3545 15.0963 31.2499 15.0963C30.1454 15.0963 29.2499 15.9918 29.2499 17.0963C29.2499 18.2009 30.1454 19.0963 31.2499 19.0963Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.3613 24.7639L32.548 26.5869L32.5615 26.6119C34.6931 30.5663 34.0891 35.6056 30.7494 38.9452L27.2614 42.4333C27.0164 42.6783 26.6191 42.6783 26.374 42.4333L21.1606 37.2197L18.3322 40.0482C17.5511 40.8292 16.2848 40.8292 15.5037 40.0482L8.43267 32.9771C7.65162 32.1961 7.65163 30.9297 8.43267 30.1487L11.2606 27.3207L5.32761 21.3877C5.01124 21.0714 5.01124 20.5584 5.32761 20.242L7.77511 17.7945C11.6222 13.9475 17.4769 13.3316 21.9667 15.947L21.9717 15.9499L23.7415 14.1705C28.262 9.62559 34.1399 6.67678 40.4857 5.77023C41.7837 5.58481 42.8957 6.70123 42.7103 7.9992C41.805 14.336 38.8753 20.2255 34.3613 24.7639ZM15.903 26.3053L25.8685 16.2861C29.5927 12.5419 34.3424 10.0035 39.5013 8.98023C38.4807 14.1411 35.9558 18.9066 32.2342 22.6483L22.2642 32.6665L20.0993 30.5016L25.0484 25.5525L22.9271 23.4312L17.978 28.3803L15.903 26.3053ZM23.6831 35.4996L26.8177 38.6343L28.6281 36.8239C30.7787 34.6733 31.3375 31.5336 30.3043 28.8691L25.414 33.7594L23.6831 35.4996ZM13.3828 29.4412L11.2611 31.5629L16.918 37.2198L19.0396 35.0981L13.3828 29.4412ZM13.0481 24.8656L19.745 18.1688C16.5162 16.6701 12.5598 17.2525 9.89643 19.9159L8.99741 20.8149L13.0481 24.8656Z" 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.2499 19.0963C32.3545 19.0963 33.2499 18.2009 33.2499 17.0963C33.2499 15.9918 32.3545 15.0963 31.2499 15.0963C30.1454 15.0963 29.2499 15.9918 29.2499 17.0963C29.2499 18.2009 30.1454 19.0963 31.2499 19.0963Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.3613 24.7639L32.548 26.5869L32.5615 26.6119C34.6931 30.5663 34.0891 35.6056 30.7494 38.9452L27.2614 42.4333C27.0164 42.6783 26.6191 42.6783 26.374 42.4333L21.1606 37.2197L18.3322 40.0482C17.5511 40.8292 16.2848 40.8292 15.5037 40.0482L8.43267 32.9771C7.65162 32.1961 7.65163 30.9297 8.43267 30.1487L11.2606 27.3207L5.32761 21.3877C5.01124 21.0714 5.01124 20.5584 5.32761 20.242L7.77511 17.7945C11.6222 13.9475 17.4769 13.3316 21.9667 15.947L21.9717 15.9499L23.7415 14.1705C28.262 9.62559 34.1399 6.67678 40.4857 5.77023C41.7837 5.58481 42.8957 6.70123 42.7103 7.9992C41.805 14.336 38.8753 20.2255 34.3613 24.7639ZM15.903 26.3053L25.8685 16.2861C29.5927 12.5419 34.3424 10.0035 39.5013 8.98023C38.4807 14.1411 35.9558 18.9066 32.2342 22.6483L22.2642 32.6665L20.0993 30.5016L25.0484 25.5525L22.9271 23.4312L17.978 28.3803L15.903 26.3053ZM23.6831 35.4996L26.8177 38.6343L28.6281 36.8239C30.7787 34.6733 31.3375 31.5336 30.3043 28.8691L25.414 33.7594L23.6831 35.4996ZM13.3828 29.4412L11.2611 31.5629L16.918 37.2198L19.0396 35.0981L13.3828 29.4412ZM13.0481 24.8656L19.745 18.1688C16.5162 16.6701 12.5598 17.2525 9.89643 19.9159L8.99741 20.8149L13.0481 24.8656Z" 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="M30.646 19.0008C31.7506 19.0008 32.646 18.1053 32.646 17.0008C32.646 15.8962 31.7506 15.0008 30.646 15.0008C29.5414 15.0008 28.646 15.8962 28.646 17.0008C28.646 18.1053 29.5414 19.0008 30.646 19.0008Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M33.7574 24.6682L31.7423 26.6941L31.744 26.6978C33.6775 30.9265 32.9038 36.0894 29.4228 39.5703L26.6569 42.3362C26.4119 42.5813 26.0146 42.5813 25.7696 42.3362L20.5571 37.1238L17.7282 39.9526C16.9472 40.7337 15.6809 40.7337 14.8998 39.9526L7.82874 32.8816C7.04769 32.1005 7.04769 30.8342 7.82874 30.0531L10.6572 27.2247L5.44379 22.0106C5.19875 21.7656 5.19875 21.3683 5.44379 21.1232L8.15999 18.407C11.6688 14.8982 16.8763 14.1234 21.1353 16.0825L21.139 16.0842L23.1377 14.0748C27.6582 9.52989 33.5361 6.58108 39.8819 5.67453C41.1799 5.48911 42.2919 6.60552 42.1064 7.9035C41.2012 14.2403 38.2715 20.1298 33.7574 24.6682ZM16.0067 26.9164L25.9737 16.8956C29.1869 13.6651 33.1935 11.3674 37.566 10.2171C36.4196 14.5959 34.1333 18.6181 30.9214 21.8474L27.919 24.866L20.9376 31.8473L19.8494 30.7592L24.7981 25.8105L21.9697 22.9821L17.021 27.9307L16.0067 26.9164ZM28.6035 29.8499L23.7848 34.6946L26.2132 37.1231L26.5944 36.7419C28.465 34.8714 29.1346 32.2547 28.6035 29.8499ZM13.4856 30.0531L17.7282 34.2958L16.314 35.71L12.0714 31.4674L13.4856 30.0531ZM13.1539 24.0639L17.9984 19.2194C15.5565 18.6615 12.8904 19.3335 10.9884 21.2355L10.657 21.5669L13.1539 24.0639Z" 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.2499 19.0963C32.3545 19.0963 33.2499 18.2009 33.2499 17.0963C33.2499 15.9918 32.3545 15.0963 31.2499 15.0963C30.1454 15.0963 29.2499 15.9918 29.2499 17.0963C29.2499 18.2009 30.1454 19.0963 31.2499 19.0963Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M34.3613 24.7639L32.548 26.5869L32.5615 26.6119C34.6931 30.5663 34.0891 35.6056 30.7494 38.9452L27.2614 42.4333C27.0164 42.6783 26.6191 42.6783 26.374 42.4333L21.1606 37.2197L18.3322 40.0482C17.5511 40.8292 16.2848 40.8292 15.5037 40.0482L8.43267 32.9771C7.65162 32.1961 7.65163 30.9297 8.43267 30.1487L11.2606 27.3207L5.32761 21.3877C5.01124 21.0714 5.01124 20.5584 5.32761 20.242L7.77511 17.7945C11.6222 13.9475 17.4769 13.3316 21.9667 15.947L21.9717 15.9499L23.7415 14.1705C28.262 9.62559 34.1399 6.67678 40.4857 5.77023C41.7837 5.58481 42.8957 6.70123 42.7103 7.9992C41.805 14.336 38.8753 20.2255 34.3613 24.7639ZM15.903 26.3053L25.8685 16.2861C29.5927 12.5419 34.3424 10.0035 39.5013 8.98023C38.4807 14.1411 35.9558 18.9066 32.2342 22.6483L22.2642 32.6665L20.0993 30.5016L25.0484 25.5525L22.9271 23.4312L17.978 28.3803L15.903 26.3053ZM23.6831 35.4996L26.8177 38.6343L28.6281 36.8239C30.7787 34.6733 31.3375 31.5336 30.3043 28.8691L25.414 33.7594L23.6831 35.4996ZM13.3828 29.4412L11.2611 31.5629L16.918 37.2198L19.0396 35.0981L13.3828 29.4412ZM13.0481 24.8656L19.745 18.1688C16.5162 16.6701 12.5598 17.2525 9.89643 19.9159L8.99741 20.8149L13.0481 24.8656Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/search/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 SearchProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Search = forwardRef<SVGSVGElement, SearchProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconSearch = forwardRef<SVGSVGElement, SearchProps>(
+  ({ 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" 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="M26.2657 29.0941C24.16 30.6258 21.5679 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.5678 30.6259 24.1599 29.0941 26.2657L41.9143 39.0858L39.0858 41.9142L26.2657 29.0941ZM27.5294 18.7647C27.5294 23.6053 23.6053 27.5294 18.7647 27.5294C13.9241 27.5294 10 23.6053 10 18.7647C10 13.9241 13.9241 10 18.7647 10C23.6053 10 27.5294 13.9241 27.5294 18.7647Z" 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/secret-mode/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 SecretModeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const SecretMode = forwardRef<SVGSVGElement, SecretModeProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconSecretMode = forwardRef<SVGSVGElement, SecretModeProps>(
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.9077 19.8809L32.2913 7.60357C31.3704 5.59057 28.8355 4.9273 27.0468 6.23131L23.9997 8.45261L20.9586 6.23565C19.1664 4.92916 16.6264 5.59775 15.7097 7.61729L10.1391 19.8899C8.21278 19.5222 6.29744 19.0771 4.39776 18.5547L3.60229 21.4473C7.83456 22.6112 12.1415 23.4061 16.4758 23.8321C21.6631 24.3943 26.8976 24.3753 32.0817 23.7752C36.2278 23.3372 40.347 22.5613 44.3978 21.4473L43.6023 18.5547C41.718 19.0729 39.8183 19.5149 37.9077 19.8809ZM29.5632 8.85157C29.4317 8.564 29.0695 8.46925 28.814 8.65553L23.9997 12.1651L19.1913 8.65988C18.9353 8.47323 18.5725 8.56875 18.4415 8.85725L13.2187 20.3636C14.4037 20.557 15.5926 20.7185 16.7841 20.8479C21.7617 21.3361 26.7768 21.3179 31.7517 20.7934C32.7801 20.6741 33.8063 20.5309 34.8297 20.3639L29.5632 8.85157Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4834 34.698C22.2176 38.9767 18.6632 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.9727 26.001 21.068 28.3978 22.1176 31.7054C23.4078 31.4397 24.7412 31.4501 26.028 31.7369C27.1985 28.6497 30.1834 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.1813 42.8187 25.5301 39.1864 25.4993 34.6941C24.5088 34.4522 23.4734 34.4535 22.4834 34.698ZM14.3176 39.3646C17.1794 39.3646 19.4994 37.0446 19.4994 34.1828C19.4994 31.321 17.1794 29.001 14.3176 29.001C11.4557 29.001 9.13574 31.321 9.13574 34.1828C9.13574 37.0446 11.4557 39.3646 14.3176 39.3646ZM33.681 39.8187C36.5428 39.8187 38.8628 37.4987 38.8628 34.6369C38.8628 31.7751 36.5428 29.4551 33.681 29.4551C30.8191 29.4551 28.4991 31.7751 28.4991 34.6369C28.4991 37.4987 30.8191 39.8187 33.681 39.8187Z" 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="M26.7522 5.82741C28.7966 4.33711 31.6936 5.09514 32.746 7.39571L38.1985 19.3147C39.9665 18.9663 41.7248 18.5521 43.4697 18.0723L44.5303 21.9291C40.469 23.046 36.3392 23.8253 32.1825 24.267C26.9329 24.878 21.6317 24.8972 16.3789 24.3246C12.0326 23.8947 7.71385 23.0962 3.46973 21.9291L4.53035 18.0723C6.29032 18.5563 8.06382 18.9734 9.84712 19.3237L15.2545 7.41077C16.3021 5.10272 19.2049 4.33862 21.2531 5.83176L23.9997 7.83399L26.7522 5.82741Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4332 35.2282C21.9199 39.2532 18.4821 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.795 26.001 20.7657 28.1704 21.9502 31.2297C23.3588 30.9293 24.8182 30.9422 26.2225 31.2684C27.5065 28.43 30.3631 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.3568 42.8187 25.8161 39.4642 25.5193 35.2154C24.5088 34.9422 23.4419 34.9465 22.4332 35.2282ZM14.3176 38.3646C16.6271 38.3646 18.4994 36.4923 18.4994 34.1828C18.4994 31.8732 16.6271 30.001 14.3176 30.001C12.008 30.001 10.1357 31.8732 10.1357 34.1828C10.1357 36.4923 12.008 38.3646 14.3176 38.3646ZM33.681 38.8187C35.9905 38.8187 37.8628 36.9464 37.8628 34.6369C37.8628 32.3273 35.9905 30.4551 33.681 30.4551C31.3714 30.4551 29.4991 32.3273 29.4991 34.6369C29.4991 36.9464 31.3714 38.8187 33.681 38.8187Z" 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="M26.7522 5.82741C28.7965 4.33711 31.6935 5.09513 32.746 7.39571L38.1985 19.3148C39.9664 18.9663 41.7247 18.5521 43.4697 18.0723L44.5303 21.9291C40.4688 23.046 36.3389 23.8253 32.1819 24.2671C26.9324 24.878 21.6312 24.8972 16.3784 24.3245C12.0323 23.8947 7.71369 23.0962 3.46973 21.9291L4.53035 18.0723C6.2903 18.5563 8.06379 18.9734 9.84708 19.3237L15.2544 7.41077C16.3021 5.10272 19.2049 4.33862 21.2531 5.83176L23.9997 7.83399L26.7522 5.82741ZM31.7394 20.2916C26.7714 20.8181 21.7627 20.8362 16.7919 20.3459C15.8411 20.242 14.8921 20.1175 13.9454 19.9725L18.8968 9.06405L23.9997 12.784L29.1085 9.05971L34.101 19.9731C33.3153 20.0934 32.5279 20.1996 31.7394 20.2916Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4332 35.2282C21.9199 39.2532 18.4821 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.795 26.001 20.7657 28.1704 21.9502 31.2297C23.3588 30.9293 24.8182 30.9422 26.2225 31.2684C27.5065 28.43 30.3631 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.3568 42.8187 25.8161 39.4642 25.5193 35.2154C24.5088 34.9422 23.4419 34.9465 22.4332 35.2282ZM14.3176 38.3646C16.6271 38.3646 18.4994 36.4923 18.4994 34.1828C18.4994 31.8732 16.6271 30.001 14.3176 30.001C12.008 30.001 10.1357 31.8732 10.1357 34.1828C10.1357 36.4923 12.008 38.3646 14.3176 38.3646ZM33.681 38.8187C35.9905 38.8187 37.8628 36.9464 37.8628 34.6369C37.8628 32.3273 35.9905 30.4551 33.681 30.4551C31.3714 30.4551 29.4991 32.3273 29.4991 34.6369C29.4991 36.9464 31.3714 38.8187 33.681 38.8187Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.9077 19.8809L32.2913 7.60357C31.3704 5.59057 28.8355 4.9273 27.0468 6.23131L23.9997 8.45261L20.9586 6.23565C19.1664 4.92916 16.6264 5.59775 15.7097 7.61729L10.1391 19.8899C8.21278 19.5222 6.29744 19.0771 4.39776 18.5547L3.60229 21.4473C7.83456 22.6112 12.1415 23.4061 16.4758 23.8321C21.6631 24.3943 26.8976 24.3753 32.0817 23.7752C36.2278 23.3372 40.347 22.5613 44.3978 21.4473L43.6023 18.5547C41.718 19.0729 39.8183 19.5149 37.9077 19.8809ZM29.5632 8.85157C29.4317 8.564 29.0695 8.46925 28.814 8.65553L23.9997 12.1651L19.1913 8.65988C18.9353 8.47323 18.5725 8.56875 18.4415 8.85725L13.2187 20.3636C14.4037 20.557 15.5926 20.7185 16.7841 20.8479C21.7617 21.3361 26.7768 21.3179 31.7517 20.7934C32.7801 20.6741 33.8063 20.5309 34.8297 20.3639L29.5632 8.85157Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4834 34.698C22.2176 38.9767 18.6632 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.9727 26.001 21.068 28.3978 22.1176 31.7054C23.4078 31.4397 24.7412 31.4501 26.028 31.7369C27.1985 28.6497 30.1834 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.1813 42.8187 25.5301 39.1864 25.4993 34.6941C24.5088 34.4522 23.4734 34.4535 22.4834 34.698ZM14.3176 39.3646C17.1794 39.3646 19.4994 37.0446 19.4994 34.1828C19.4994 31.321 17.1794 29.001 14.3176 29.001C11.4557 29.001 9.13574 31.321 9.13574 34.1828C9.13574 37.0446 11.4557 39.3646 14.3176 39.3646ZM33.681 39.8187C36.5428 39.8187 38.8628 37.4987 38.8628 34.6369C38.8628 31.7751 36.5428 29.4551 33.681 29.4551C30.8191 29.4551 28.4991 31.7751 28.4991 34.6369C28.4991 37.4987 30.8191 39.8187 33.681 39.8187Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/send/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 SendProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Send = forwardRef<SVGSVGElement, SendProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconSend = forwardRef<SVGSVGElement, SendProps>(
+  ({ 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="M41.0229 22.6772C42.4872 23.4169 42.4872 25.5078 41.0229 26.2475L8.36699 42.7447C6.77568 43.5486 5.00729 42.026 5.56587 40.3329L9.86122 27.3135L32.5024 25.0494C32.7848 25.0211 32.9999 24.7835 32.9999 24.4996C32.9999 24.2158 32.7848 23.9781 32.5024 23.9499L9.88648 21.6883L5.56582 8.59178C5.00726 6.89871 6.77565 5.37614 8.36695 6.18004L41.0229 22.6772Z" 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="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.173 26.3692L32.5011 25.0296C32.7814 25.0127 33.0002 24.7805 33.0002 24.4996C33.0002 24.2188 32.7814 23.9865 32.5011 23.9697L10.1979 22.6315L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772Z" 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="M5.56606 8.59196C5.00754 6.89901 6.77564 5.37634 8.36684 6.17985L41.0231 22.6769C42.4873 23.4166 42.4871 25.5074 41.0231 26.2472L8.36684 42.7453C6.77567 43.5487 5.0076 42.0261 5.56606 40.3332L10.5954 25.089C10.7295 24.6822 10.7296 24.2429 10.5954 23.8361L5.56606 8.59196ZM14.3551 26.4621L10.8795 36.9943L31.7272 26.4621H14.3551ZM14.3541 22.4621H31.7272L10.8795 11.9308L14.3541 22.4621Z" 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="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.5953 25.0892C10.7295 24.6823 10.7296 24.243 10.5953 23.836L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772ZM34.9325 22.9614L9.17253 9.94796L13.4443 22.8961C13.4514 22.9179 13.4584 22.9396 13.4653 22.9614H34.9325ZM13.4661 25.9614C13.4589 25.984 13.4517 26.0066 13.4442 26.0292L9.17259 38.9767L34.9362 25.9614H13.4661Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/setting/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 SettingProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Setting = forwardRef<SVGSVGElement, SettingProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconSetting = forwardRef<SVGSVGElement, SettingProps>(
+  ({ 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM28.0001 24C28.0001 26.2091 26.2093 28 24.0001 28C21.791 28 20.0001 26.2091 20.0001 24C20.0001 21.7909 21.791 20 24.0001 20C26.2093 20 28.0001 21.7909 28.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM37.7502 13.8162L39.695 17.1847L35.683 20.4876L35.9246 22.643C35.9744 23.087 36.0002 23.5397 36.0002 24C36.0002 24.4605 35.9744 24.9134 35.9246 25.3577L35.6828 27.5132L39.695 30.8162L37.7502 34.1847L32.878 32.3594L31.1306 33.653C30.4069 34.1888 29.6221 34.6443 28.7894 35.0073L26.7992 35.8749L25.945 41H22.0553L21.2011 35.8749L19.2109 35.0073C18.378 34.6442 17.5929 34.1885 16.8691 33.6526L15.1216 32.3588L10.2502 34.1838L8.30533 30.8153L12.3174 27.5124L12.0757 25.357C12.0259 24.913 12.0002 24.4603 12.0002 24C12.0002 23.5395 12.0259 23.0866 12.0758 22.6423L12.3176 20.4868L8.30533 17.1838L10.2502 13.8153L15.1223 15.6406L16.8697 14.347C17.5934 13.8112 18.3782 13.3557 19.2109 12.9927L21.2011 12.1251L22.0553 7H25.945L26.7992 12.1251L28.7894 12.9927C29.6224 13.3558 30.4074 13.8115 31.1312 14.3474L32.8787 15.6412L37.7502 13.8162Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" style={{ fill: `var(--${type})` }}/>
 </svg>