@liner-fe/icon 0.0.55 → 0.1.1

package/assets/car/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 CarProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Car = forwardRef<SVGSVGElement, CarProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCar = forwardRef<SVGSVGElement, CarProps>(
+  ({ 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="M28.6329 11.5772C27.7269 10.5731 26.4379 10 25.0855 10H12.458C10.8334 10 9.32015 10.8255 8.44072 12.1915L3.76203 19.4587C3.74942 19.4783 3.7376 19.498 3.72655 19.5179C3.24171 20.1586 2.9541 20.9569 2.9541 21.8223V31.6604C2.9541 33.7714 4.6654 35.4827 6.77638 35.4827H8.00478C8.74434 37.7937 10.91 39.4668 13.4664 39.4668C16.0229 39.4668 18.1886 37.7937 18.9281 35.4827H29.0279C29.7674 37.7937 31.9331 39.4668 34.4895 39.4668C37.046 39.4668 39.2116 37.7937 39.9512 35.4827H41.1769C43.2879 35.4827 44.9992 33.7714 44.9992 31.6604V27.4198C44.9992 24.77 43.435 22.37 41.0107 21.3002L35.0205 18.6567L28.6329 11.5772ZM34.4895 28C31.7526 28 29.4636 29.9177 28.8929 32.4827H19.063C18.4923 29.9177 16.2033 28 13.4664 28C10.7296 28 8.44056 29.9177 7.86985 32.4827H6.77638C6.32225 32.4827 5.9541 32.1145 5.9541 31.6604V21.8223C5.9541 21.3681 6.32225 21 6.77638 21H32.8998L39.7995 24.0448C41.1365 24.6348 41.9992 25.9584 41.9992 27.4198V31.6604C41.9992 32.1145 41.631 32.4827 41.1769 32.4827H40.0861C39.5154 29.9177 37.2264 28 34.4895 28ZM30.3873 18L26.4055 13.5869C26.0684 13.2133 25.5887 13 25.0855 13H20.7002V18H30.3873ZM17.7002 18V13H12.458C11.8535 13 11.2904 13.3072 10.9632 13.8155L8.26911 18H17.7002ZM16.1999 33.7334C16.1999 35.243 14.9761 36.4668 13.4664 36.4668C11.9568 36.4668 10.733 35.243 10.733 33.7334C10.733 32.2238 11.9568 31 13.4664 31C14.9761 31 16.1999 32.2238 16.1999 33.7334ZM34.4895 36.4668C35.9991 36.4668 37.2229 35.243 37.2229 33.7334C37.2229 32.2238 35.9991 31 34.4895 31C32.9799 31 31.7561 32.2238 31.7561 33.7334C31.7561 35.243 32.9799 36.4668 34.4895 36.4668Z" 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="M28.6329 11.5772C27.7269 10.5731 26.4379 10 25.0855 10H12.458C10.8334 10 9.32015 10.8255 8.44072 12.1915L3.76203 19.4587C3.74942 19.4783 3.7376 19.498 3.72655 19.5179C3.24171 20.1586 2.9541 20.9569 2.9541 21.8223V31.6604C2.9541 33.7714 4.6654 35.4827 6.77638 35.4827H8.00478C8.74434 37.7937 10.91 39.4668 13.4664 39.4668C16.0229 39.4668 18.1886 37.7937 18.9281 35.4827H29.0279C29.7674 37.7937 31.9331 39.4668 34.4895 39.4668C37.046 39.4668 39.2116 37.7937 39.9512 35.4827H41.1769C43.2879 35.4827 44.9992 33.7714 44.9992 31.6604V27.4198C44.9992 24.77 43.435 22.37 41.0107 21.3002L35.0205 18.6567L28.6329 11.5772ZM34.4895 28C31.7526 28 29.4636 29.9177 28.8929 32.4827H19.063C18.4923 29.9177 16.2033 28 13.4664 28C10.7296 28 8.44056 29.9177 7.86985 32.4827H6.77638C6.32225 32.4827 5.9541 32.1145 5.9541 31.6604V21.8223C5.9541 21.3681 6.32225 21 6.77638 21H32.8998L39.7995 24.0448C41.1365 24.6348 41.9992 25.9584 41.9992 27.4198V31.6604C41.9992 32.1145 41.631 32.4827 41.1769 32.4827H40.0861C39.5154 29.9177 37.2264 28 34.4895 28ZM30.3873 18L26.4055 13.5869C26.0684 13.2133 25.5887 13 25.0855 13H20.7002V18H30.3873ZM17.7002 18V13H12.458C11.8535 13 11.2904 13.3072 10.9632 13.8155L8.26911 18H17.7002ZM16.1999 33.7334C16.1999 35.243 14.9761 36.4668 13.4664 36.4668C11.9568 36.4668 10.733 35.243 10.733 33.7334C10.733 32.2238 11.9568 31 13.4664 31C14.9761 31 16.1999 32.2238 16.1999 33.7334ZM34.4895 36.4668C35.9991 36.4668 37.2229 35.243 37.2229 33.7334C37.2229 32.2238 35.9991 31 34.4895 31C32.9799 31 31.7561 32.2238 31.7561 33.7334C31.7561 35.243 32.9799 36.4668 34.4895 36.4668Z" 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="M5.59746 17.0585C4.5045 18.6457 2.9541 20.1774 2.9541 22.1045V22.1045V31.6602C2.9541 33.7712 4.6654 35.4825 6.77638 35.4825H8.4998C9.49106 37.1965 11.3441 38.3496 13.4664 38.3496C15.5888 38.3496 17.4418 37.1965 18.4331 35.4825H29.5229C30.5141 37.1965 32.3672 38.3496 34.4895 38.3496C36.6119 38.3496 38.4649 37.1965 39.4562 35.4825H41.1769C43.2879 35.4825 44.9992 33.7712 44.9992 31.6602V27.5194C44.9992 24.819 43.3755 22.3835 40.8829 21.3449L33.5971 18.3092L28.6388 12.5807C27.7313 11.5322 26.413 10.9297 25.0263 10.9297H12.3705C10.7941 10.9297 9.31912 11.7073 8.42841 13.0079C7.50093 14.3623 6.53234 15.7008 5.59746 17.0585ZM34.4895 26.8828C31.7112 26.8828 29.3944 28.859 28.8682 31.4825H19.0878C18.5616 28.859 16.2448 26.8828 13.4664 26.8828C10.6881 26.8828 8.37133 28.859 7.84511 31.4825H6.9541V22.3958H32.9524C32.9695 22.3958 32.9864 22.3956 33.0033 22.3951L39.3444 25.0373C40.3464 25.4548 40.9992 26.4339 40.9992 27.5194V31.4825H40.1109C39.5846 28.859 37.2679 26.8828 34.4895 26.8828ZM25.6144 15.1985L28.2835 18.2822H21.2002V14.9297H25.0263C25.252 14.9297 25.4666 15.0278 25.6144 15.1985ZM17.2002 14.9297V18.2822H9.66455L11.7287 15.268C11.8737 15.0563 12.1138 14.9297 12.3705 14.9297H17.2002ZM15.1999 32.6162C15.1999 33.5736 14.4238 34.3496 13.4664 34.3496C12.5091 34.3496 11.733 33.5736 11.733 32.6162C11.733 31.6589 12.5091 30.8828 13.4664 30.8828C14.4238 30.8828 15.1999 31.6589 15.1999 32.6162ZM34.4895 34.3496C35.4469 34.3496 36.2229 33.5736 36.2229 32.6162C36.2229 31.6589 35.4469 30.8828 34.4895 30.8828C33.5322 30.8828 32.7561 31.6589 32.7561 32.6162C32.7561 33.5736 33.5322 34.3496 34.4895 34.3496Z" 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="M28.6329 11.5772C27.7269 10.5731 26.4379 10 25.0855 10H12.458C10.8334 10 9.32015 10.8255 8.44072 12.1915L3.76203 19.4587C3.74942 19.4783 3.7376 19.498 3.72655 19.5179C3.24171 20.1586 2.9541 20.9569 2.9541 21.8223V31.6604C2.9541 33.7714 4.6654 35.4827 6.77638 35.4827H8.00478C8.74434 37.7937 10.91 39.4668 13.4664 39.4668C16.0229 39.4668 18.1886 37.7937 18.9281 35.4827H29.0279C29.7674 37.7937 31.9331 39.4668 34.4895 39.4668C37.046 39.4668 39.2116 37.7937 39.9512 35.4827H41.1769C43.2879 35.4827 44.9992 33.7714 44.9992 31.6604V27.4198C44.9992 24.77 43.435 22.37 41.0107 21.3002L35.0205 18.6567L28.6329 11.5772ZM34.4895 28C31.7526 28 29.4636 29.9177 28.8929 32.4827H19.063C18.4923 29.9177 16.2033 28 13.4664 28C10.7296 28 8.44056 29.9177 7.86985 32.4827H6.77638C6.32225 32.4827 5.9541 32.1145 5.9541 31.6604V21.8223C5.9541 21.3681 6.32225 21 6.77638 21H32.8998L39.7995 24.0448C41.1365 24.6348 41.9992 25.9584 41.9992 27.4198V31.6604C41.9992 32.1145 41.631 32.4827 41.1769 32.4827H40.0861C39.5154 29.9177 37.2264 28 34.4895 28ZM30.3873 18L26.4055 13.5869C26.0684 13.2133 25.5887 13 25.0855 13H20.7002V18H30.3873ZM17.7002 18V13H12.458C11.8535 13 11.2904 13.3072 10.9632 13.8155L8.26911 18H17.7002ZM16.1999 33.7334C16.1999 35.243 14.9761 36.4668 13.4664 36.4668C11.9568 36.4668 10.733 35.243 10.733 33.7334C10.733 32.2238 11.9568 31 13.4664 31C14.9761 31 16.1999 32.2238 16.1999 33.7334ZM34.4895 36.4668C35.9991 36.4668 37.2229 35.243 37.2229 33.7334C37.2229 32.2238 35.9991 31 34.4895 31C32.9799 31 31.7561 32.2238 31.7561 33.7334C31.7561 35.243 32.9799 36.4668 34.4895 36.4668Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/casual-shoe/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 CasualShoeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const CasualShoe = forwardRef<SVGSVGElement, CasualShoeProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCasualShoe = forwardRef<SVGSVGElement, CasualShoeProps>(
+  ({ 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" 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="M3.00371 27.8771C3.07351 22.8737 4.12607 17.931 6.10343 13.3306L6.24262 13.0068C6.50498 12.3964 7.10556 12.0008 7.76994 12.0008H8.75587C9.34322 12.0008 9.90088 12.259 10.2809 12.7069L12.1619 14.9237C12.8935 15.786 14.194 15.8707 15.0313 15.1105L19.5825 10.9783C20.2244 10.3955 21.1686 10.2926 21.9209 10.7235L35.3546 18.4175C35.4514 18.473 35.5526 18.5202 35.6572 18.5587L40.4199 20.3134C43.1718 21.3273 45 23.9491 45 26.8818V31C45 33.2091 43.2091 35 41 35H5C3.89543 35 3 34.1046 3 33V28C3 27.9587 3.00125 27.9177 3.00371 27.8771ZM7 30.0008V31H41V30.0008H7ZM40.8677 26C40.5973 25.1211 39.9309 24.3961 39.0371 24.0668L35.657 22.8215L35.2525 26H40.8677ZM31.2202 26L31.8538 21.0221L30.4817 20.2362L27.4788 24.7272L24.1569 22.5095L27.0075 18.2464L25.7951 17.552L22.972 21.7741L19.6501 19.5564L22.3208 15.5622L21.1947 14.9172L17.7201 18.072C15.2083 20.3525 11.3068 20.0985 9.11183 17.5116L8.87775 17.2358C8.61591 17.9928 8.38097 18.7583 8.17325 19.5306L8.29832 19.5883C10.9966 20.8337 12.9416 23.2088 13.6768 26H31.2202ZM9.43542 26H7.08503C7.14149 25.2012 7.22594 24.4052 7.33811 23.6137C8.2542 24.2045 8.97593 25.0353 9.43542 26Z" 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="M40.8125 21.499C43.4447 22.4687 45.2317 24.9095 45.3823 27.6864C45.3891 27.8127 45.3926 27.9397 45.3926 28.0674V31.1875C45.3926 33.3966 43.6017 35.1875 41.3926 35.1875H5.39258C4.28801 35.1875 3.39258 34.2921 3.39258 33.1875V29.6875C3.39258 29.5952 3.39883 29.5044 3.41094 29.4154C3.39885 29.3385 3.39258 29.2597 3.39258 29.1795C3.39258 24.2689 4.39264 19.4097 6.3318 14.8982L6.6352 14.1923C6.89755 13.5819 7.49814 13.1864 8.16251 13.1864H9.14845C9.7358 13.1864 10.2935 13.4445 10.6735 13.8924L12.5544 16.1093C13.2861 16.9716 14.5866 17.0562 15.4239 16.296L19.9751 12.1638C20.6169 11.5811 21.5612 11.4782 22.3135 11.9091L35.7472 19.6031C35.8439 19.6585 35.9452 19.7057 36.0498 19.7443L40.8125 21.499ZM13.4645 27.6864H33.0498L33.6947 21.8847L30.0305 19.7861L27.4564 23.6359L24.965 21.9726L27.4249 18.2938L25.3435 17.1017L22.9491 20.6827L20.4577 19.0195L22.7379 15.6093L21.4534 14.8737L17.4405 18.5171C15.3473 20.4176 12.096 20.206 10.2669 18.0502L8.92502 16.4687C8.46239 17.5836 8.06183 18.7209 7.72444 19.8752L8.08879 20.0434C11.1392 21.4513 13.1752 24.3805 13.4645 27.6864ZM10.4474 27.6864H6.4262C6.49952 26.0595 6.69245 24.4428 7.00233 22.8492C8.8958 23.7926 10.1786 25.6151 10.4474 27.6864ZM36.5742 23.1346L36.0683 27.6864H42.3745C42.2297 26.1678 41.2277 24.849 39.7754 24.314L36.5742 23.1346ZM6.39258 32.1875V30.6875H42.3926V31.1875C42.3926 31.7398 41.9449 32.1875 41.3926 32.1875H6.39258Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/chart-bar/index.tsx

@@ -1,20 +1,20 @@
 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 ChartBarProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const ChartBar = forwardRef<SVGSVGElement, ChartBarProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconChartBar = forwardRef<SVGSVGElement, ChartBarProps>(
+  ({ 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.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${type})` }}/>
@@ -22,12 +22,12 @@ export const ChartBar = forwardRef<SVGSVGElement, ChartBarProps>(
 </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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM22.374 21.3371C21.2694 21.3371 20.374 22.2325 20.374 23.3371V34.3215C20.374 35.4261 21.2695 36.3215 22.3741 36.3215L25.3669 36.3214C26.4714 36.3214 27.3668 35.4259 27.3668 34.3214V23.337C27.3668 22.2324 26.4714 21.3369 25.3668 21.337L22.374 21.3371ZM10 30.0802C10 28.9757 10.8954 28.0802 11.9999 28.0802L14.9928 28.0801C16.0974 28.0801 16.9928 28.9755 16.9928 30.0801L16.9928 34.3212C16.9928 35.4258 16.0974 36.3212 14.9929 36.3212L12.0001 36.3213C10.8955 36.3213 10 35.4259 10 34.3213L10 30.0802ZM32.7479 12.0001C31.6433 12.0002 30.7479 12.8956 30.7479 14.0001L30.7479 34.3213C30.7479 35.4259 31.6434 36.3213 32.748 36.3213L35.7408 36.3212C36.8454 36.3212 37.7407 35.4258 37.7407 34.3212L37.7407 14.0001C37.7407 12.8955 36.8453 12 35.7407 12.0001L32.7479 12.0001Z" 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 8C32 6.89543 32.8954 6 34 6H40C41.1046 6 42 6.89543 42 8V36C42 37.1046 41.1046 38 40 38H34C32.8954 38 32 37.1046 32 36V8ZM36 34V10H38V34H36Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 17.5859C19.8954 17.5859 19 18.4814 19 19.5859V35.9997C19 37.1043 19.8954 37.9997 21 37.9997H27C28.1046 37.9997 29 37.1043 29 35.9997V19.5859C29 18.4814 28.1046 17.5859 27 17.5859H21ZM23 21.5859V33.9997H25V21.5859H23Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM10 34V30.4141H12V34H10Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const ChartBar = forwardRef<SVGSVGElement, ChartBarProps>(
 ;
   } 
   
-  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.001 8C32.001 6.89543 32.8964 6 34.001 6H40.0006C41.1052 6 42.0006 6.89543 42.0006 8V36C42.0006 37.1046 41.1052 38 40.0006 38H34.001C32.8964 38 32.001 37.1046 32.001 36V8ZM35.001 35V9H39.0006V35H35.001Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21.0009 17.5862C19.8964 17.5862 19.001 18.4816 19.001 19.5862V35.9999C19.001 37.1045 19.8964 38 21.001 37.9999L27.0009 37.9998C28.1054 37.9998 29.0008 37.1043 29.0008 35.9998V19.586C29.0008 18.4814 28.1054 17.586 27.0008 17.586L21.0009 17.5862ZM22.001 20.5861V34.9999L26.0008 34.9998V20.586L22.001 20.5861Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 28.4141C6 27.3095 6.89543 26.4141 8 26.4141H14C15.1046 26.4141 16 27.3095 16 28.4141V36C16 37.1046 15.1046 38 14 38H8C6.89543 38 6 37.1046 6 36V28.4141ZM9 35V29.4141H13V35H9Z" style={{ fill: `var(--${type})` }}/>

package/assets/chart-line-uptrend/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 ChartLineUptrendProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const ChartLineUptrend = forwardRef<SVGSVGElement, ChartLineUptrendProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconChartLineUptrend = forwardRef<SVGSVGElement, ChartLineUptrendProps>(
+  ({ 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.815 25.6003L37.6207 12.8276L33.9793 11.1724L28.1735 23.945L22.5903 18.3619C20.5435 16.3151 17.0676 17.0527 16.0285 19.7544L10.1333 35.082L13.8667 36.5179L19.7619 21.1903L25.3451 26.7735C27.3199 28.7483 30.6593 28.1428 31.815 25.6003Z" 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="M8 6C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6H8ZM31.3598 25.3934L37.1655 12.6207L34.4344 11.3793L28.6287 24.152C28.4842 24.4698 28.0668 24.5455 27.8199 24.2986L22.2368 18.7155C20.4458 16.9245 17.4044 17.5699 16.4952 19.9339L10.6 35.2615L13.4 36.3384L19.2952 21.0108C19.4251 20.6731 19.8596 20.5809 20.1155 20.8368L25.6986 26.4199C27.4266 28.1479 30.3486 27.618 31.3598 25.3934Z" 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 6V39C5 41.2091 6.79086 43 9 43H42V39H9V6H5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M35.2173 23.7995L41.0231 11.0268L37.3816 9.37158L31.5758 22.1443L25.9927 16.5611C23.9459 14.5143 20.47 15.2519 19.4309 17.9536L13.5356 33.2812L17.269 34.7171L23.1643 19.3895L28.7474 24.9727C30.7222 26.9475 34.0616 26.342 35.2173 23.7995Z" 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="M5.5 6V39C5.5 40.933 7.067 42.5 9 42.5H42V39.5H9C8.72386 39.5 8.5 39.2761 8.5 39V6H5.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M34.7621 23.5926L40.5679 10.8199L37.8368 9.57851L32.031 22.3512C31.8866 22.669 31.4691 22.7447 31.2223 22.4978L25.6391 16.9147C23.8482 15.1237 20.8068 15.7692 19.8976 18.1331L14.0023 33.4608L16.8024 34.5377L22.6976 19.2101C22.8275 18.8724 23.262 18.7802 23.5178 19.036L29.101 24.6192C30.8289 26.3471 33.7509 25.8173 34.7621 23.5926Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/check-mark/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 CheckMarkProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const CheckMark = forwardRef<SVGSVGElement, CheckMarkProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCheckMark = forwardRef<SVGSVGElement, CheckMarkProps>(
+  ({ 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 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" 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="M9.76642 19.9372L20.3116 30.4824L37.9306 12.9249L40.7541 15.7582L23.1351 33.3158C21.5722 34.8732 19.0434 34.871 17.4832 33.3108L6.93799 22.7656L9.76642 19.9372Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M9.41307 20.2908L19.9583 30.836C20.1533 31.031 20.4694 31.0313 20.6648 30.8366L38.2837 13.2791L40.4013 15.4041L22.7824 32.9616C21.4148 34.3244 19.2021 34.3225 17.8369 32.9573L7.29175 22.4121L9.41307 20.2908Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/check-mark-fill/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 CheckMarkFillProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const CheckMarkFill = forwardRef<SVGSVGElement, CheckMarkFillProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCheckMarkFill = forwardRef<SVGSVGElement, CheckMarkFillProps>(
+  ({ 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.4293 21.3317L22.6156 27.518L33.296 16.8748L36.1195 19.7082L25.439 30.3514C23.8762 31.9088 21.3473 31.9066 19.7871 30.3465L13.6008 24.1602L16.4293 21.3317Z" style={{ fill: `var(--${fillType})` }}/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" style={{ fill: `var(--${fillType})` }}/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" style={{ fill: `var(--${fillType})` }}/>
 </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}>
 <circle cx="24" cy="24" r="20" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0757 21.6853L22.262 27.8716C22.457 28.0666 22.7731 28.0669 22.9685 27.8722L33.6489 17.229L35.7665 19.3541L25.0861 29.9973C23.7185 31.36 21.5058 31.3581 20.1407 29.9929L13.9543 23.8066L16.0757 21.6853Z" style={{ fill: `var(--${fillType})` }}/>
 </svg>

package/assets/check-mark-in-circle/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 CheckMarkInCircleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const CheckMarkInCircle = forwardRef<SVGSVGElement, CheckMarkInCircleProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCheckMarkInCircle = forwardRef<SVGSVGElement, CheckMarkInCircleProps>(
+  ({ 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 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" 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 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.1045 20.0361L24.4238 30.6787C22.861 32.2361 20.3326 32.2338 18.7725 30.6738L12.5859 24.4883L15.4141 21.6592L21.6006 27.8457L32.2812 17.2031L35.1045 20.0361Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" 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="M34.752 19.6816L24.0713 30.3252C22.7038 31.6876 20.491 31.6852 19.126 30.3203L12.9395 24.1338L15.0605 22.0127L21.2471 28.1992C21.442 28.3939 21.7578 28.3944 21.9531 28.2002L32.6338 17.5566L34.752 19.6816Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/chrome/index.tsx

@@ -1,20 +1,20 @@
 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 ChromeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconChrome = forwardRef<SVGSVGElement, ChromeProps>(
+  ({ 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +22,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 </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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -30,7 +30,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 </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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -39,7 +39,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 ;
   } 
   
-  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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>

package/assets/clock/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 ClockProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Clock = forwardRef<SVGSVGElement, ClockProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconClock = forwardRef<SVGSVGElement, ClockProps>(
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" 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.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/close/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 CloseProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const Close = forwardRef<SVGSVGElement, CloseProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconClose = forwardRef<SVGSVGElement, CloseProps>(
+  ({ 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" 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.0006 21.1712L12.4153 9.58594L9.58692 12.4144L21.1722 23.9997L9.58691 35.585L12.4153 38.4134L24.0006 26.8281L35.5859 38.4134L38.4144 35.585L26.8291 23.9997L38.4144 12.4144L35.5859 9.58594L24.0006 21.1712Z" 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.0006 21.8783L12.0618 9.93945L9.94043 12.0608L21.8793 23.9996L9.94043 35.9385L12.0618 38.0598L24.0006 26.1209L35.9395 38.0598L38.0608 35.9385L26.1219 23.9996L38.0608 12.0608L35.9395 9.93946L24.0006 21.8783Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/close-fill/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 CloseFillProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
-export const CloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+export const IconCloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
+  ({ 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" style={{ fill: `var(--${fillType})` }}/>
 </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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" style={{ fill: `var(--${fillType})` }}/>
 </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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" style={{ fill: `var(--${fillType})` }}/>
 </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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" style={{ fill: `var(--${fillType})` }}/>
 </svg>