@liner-fe/icon 0.1.0 → 0.1.1

package/assets/collection-add/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 CollectionAddProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconCollectionAdd = forwardRef<SVGSVGElement, CollectionAddProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 27H36V30H30V36.5H27V30H21V27H27V21H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35 6C36.1046 6 37 6.89543 37 8V13.5H41.5C42.6046 13.5 43.5 14.3954 43.5 15.5V41.5C43.5 42.6046 42.6046 43.5 41.5 43.5H15.5C14.3954 43.5 13.5 42.6046 13.5 41.5V37H8C6.89543 37 6 36.1046 6 35V8C6 6.89543 6.89543 6 8 6H35ZM16.5 40.5H40.5V16.5H16.5V40.5ZM9 34H13.5V15.5C13.5 14.3954 14.3954 13.5 15.5 13.5H34V9H9V34Z" 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="M30 27H36V30H30V36.5H27V30H21V27H27V21H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35 6C36.1046 6 37 6.89543 37 8V13.5H41.5C42.6046 13.5 43.5 14.3954 43.5 15.5V41.5C43.5 42.6046 42.6046 43.5 41.5 43.5H15.5C14.3954 43.5 13.5 42.6046 13.5 41.5V37H8C6.89543 37 6 36.1046 6 35V8C6 6.89543 6.89543 6 8 6H35ZM16.5 40.5H40.5V16.5H16.5V40.5ZM9 34H13.5V15.5C13.5 14.3954 14.3954 13.5 15.5 13.5H34V9H9V34Z" 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="M29.5 25.5H35V29.5H29.5V35.5H25.5V29.5H20V25.5H25.5V20H29.5V25.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M34 5C35.1046 5 36 5.89543 36 7V12H40.5C41.8807 12 43 13.1193 43 14.5V40.5C43 41.8807 41.8807 43 40.5 43H14.5C13.1193 43 12 41.8807 12 40.5V36H7C5.89543 36 5 35.1046 5 34V7C5 5.89543 5.89543 5 7 5H34ZM16 39H39V16H16V39ZM9 32H12V14.5C12 13.1193 13.1193 12 14.5 12H32V9H9V32Z" 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="M30 27H36V30H30V36.5H27V30H21V27H27V21H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35 6C36.1046 6 37 6.89543 37 8V13.5H41.5C42.6046 13.5 43.5 14.3954 43.5 15.5V41.5C43.5 42.6046 42.6046 43.5 41.5 43.5H15.5C14.3954 43.5 13.5 42.6046 13.5 41.5V37H8C6.89543 37 6 36.1046 6 35V8C6 6.89543 6.89543 6 8 6H35ZM16.5 40.5H40.5V16.5H16.5V40.5ZM9 34H13.5V15.5C13.5 14.3954 14.3954 13.5 15.5 13.5H34V9H9V34Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/collections/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 CollectionsProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconCollections = forwardRef<SVGSVGElement, CollectionsProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M34 5C35.1046 5 36 5.89543 36 7V12.5H40.5C41.6046 12.5 42.5 13.3954 42.5 14.5V27.293C42.5 27.8234 42.2891 28.332 41.9141 28.707L35.8398 34.7803C35.6376 35.2563 35.2572 35.6365 34.7812 35.8389L28.707 41.9141C28.332 42.2891 27.8234 42.5 27.293 42.5H14.5C13.3954 42.5 12.5 41.6046 12.5 40.5V36H7C5.89543 36 5 35.1046 5 34V7C5 5.89543 5.89543 5 7 5H34ZM15.5 39.5H25.5V30C25.5 28.0671 27.0671 26.5001 29 26.5H39.5V15.5H15.5V39.5ZM29 29.5C28.724 29.5001 28.5 29.7239 28.5 30V37.8789L36.8789 29.5H29ZM8 33H12.5V14.5C12.5 13.3954 13.3954 12.5 14.5 12.5H33V8H8V33Z" 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="M34 5C35.1046 5 36 5.89543 36 7V12.5H40.5C41.6046 12.5 42.5 13.3954 42.5 14.5V27.293C42.5 27.8234 42.2891 28.332 41.9141 28.707L35.8398 34.7803C35.6376 35.2563 35.2572 35.6365 34.7812 35.8389L28.707 41.9141C28.332 42.2891 27.8234 42.5 27.293 42.5H14.5C13.3954 42.5 12.5 41.6046 12.5 40.5V36H7C5.89543 36 5 35.1046 5 34V7C5 5.89543 5.89543 5 7 5H34ZM15.5 39.5H25.5V30C25.5 28.0671 27.0671 26.5001 29 26.5H39.5V15.5H15.5V39.5ZM29 29.5C28.724 29.5001 28.5 29.7239 28.5 30V37.8789L36.8789 29.5H29ZM8 33H12.5V14.5C12.5 13.3954 13.3954 12.5 14.5 12.5H33V8H8V33Z" 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="M34 5C35.1046 5 36 5.89543 36 7V12H40.5C41.8807 12 43 13.1193 43 14.5V27.293C43 27.956 42.7364 28.5917 42.2676 29.0605L29.0605 42.2676C28.5917 42.7364 27.956 43 27.293 43H14.5C13.1193 43 12 41.8807 12 40.5V36H7C5.89543 36 5 35.1046 5 34V7C5 5.89543 5.89543 5 7 5H34ZM16 39H25V30C25 27.7909 26.791 26.0001 29 26H39V16H16V39ZM29 30V36.6719L35.6719 30H29ZM9 32H12V14.5C12 13.1193 13.1193 12 14.5 12H32V9H9V32Z" 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="M34 5C35.1046 5 36 5.89543 36 7V12.5H40.5C41.6046 12.5 42.5 13.3954 42.5 14.5V27.293C42.5 27.8234 42.2891 28.332 41.9141 28.707L35.8398 34.7803C35.6376 35.2563 35.2572 35.6365 34.7812 35.8389L28.707 41.9141C28.332 42.2891 27.8234 42.5 27.293 42.5H14.5C13.3954 42.5 12.5 41.6046 12.5 40.5V36H7C5.89543 36 5 35.1046 5 34V7C5 5.89543 5.89543 5 7 5H34ZM15.5 39.5H25.5V30C25.5 28.0671 27.0671 26.5001 29 26.5H39.5V15.5H15.5V39.5ZM29 29.5C28.724 29.5001 28.5 29.7239 28.5 30V37.8789L36.8789 29.5H29ZM8 33H12.5V14.5C12.5 13.3954 13.3954 12.5 14.5 12.5H33V8H8V33Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/color-docx/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 ColorDocxProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${type})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" style={{ fill: `var(--${fillType})` }}/>
@@ -24,7 +24,7 @@ export const IconColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 </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="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${type})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" style={{ fill: `var(--${fillType})` }}/>
@@ -34,7 +34,7 @@ export const IconColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 </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="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${type})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" style={{ fill: `var(--${fillType})` }}/>
@@ -45,7 +45,7 @@ export const IconColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 ;
   } 
   
-  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="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${type})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" style={{ fill: `var(--${fillType})` }}/>

package/assets/color-excel/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 ColorExcelProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorExcel = forwardRef<SVGSVGElement, ColorExcelProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#clip0_12237_297)">
 <rect width="48" height="48" rx="9" fill="#22A162"/>
 <path d="M14.5773 32.9999L20.85 23.9727L14.7682 14.9999H19.8955L23.8773 21.6545H24.0409L28.0773 14.9999H33.2318L27.0682 23.8636L33.4227 32.9999H28.2955L24.0409 26.1272H23.8773L19.7045 32.9999H14.5773Z" style={{ fill: `var(--${fillType})` }}/>
@@ -27,7 +27,7 @@ export const IconColorExcel = forwardRef<SVGSVGElement, ColorExcelProps>(
 </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}>
 <g clip-path="url(#clip0_12237_297)">
 <rect width="48" height="48" rx="9" fill="#22A162"/>
 <path d="M14.5773 32.9999L20.85 23.9727L14.7682 14.9999H19.8955L23.8773 21.6545H24.0409L28.0773 14.9999H33.2318L27.0682 23.8636L33.4227 32.9999H28.2955L24.0409 26.1272H23.8773L19.7045 32.9999H14.5773Z" style={{ fill: `var(--${fillType})` }}/>
@@ -40,7 +40,7 @@ export const IconColorExcel = forwardRef<SVGSVGElement, ColorExcelProps>(
 </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}>
 <g clip-path="url(#clip0_12237_297)">
 <rect width="48" height="48" rx="9" fill="#22A162"/>
 <path d="M14.5773 32.9999L20.85 23.9727L14.7682 14.9999H19.8955L23.8773 21.6545H24.0409L28.0773 14.9999H33.2318L27.0682 23.8636L33.4227 32.9999H28.2955L24.0409 26.1272H23.8773L19.7045 32.9999H14.5773Z" style={{ fill: `var(--${fillType})` }}/>
@@ -54,7 +54,7 @@ export const IconColorExcel = forwardRef<SVGSVGElement, ColorExcelProps>(
 ;
   } 
   
-  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}>
 <g clip-path="url(#clip0_12237_297)">
 <rect width="48" height="48" rx="9" fill="#22A162"/>
 <path d="M14.5773 32.9999L20.85 23.9727L14.7682 14.9999H19.8955L23.8773 21.6545H24.0409L28.0773 14.9999H33.2318L27.0682 23.8636L33.4227 32.9999H28.2955L24.0409 26.1272H23.8773L19.7045 32.9999H14.5773Z" style={{ fill: `var(--${fillType})` }}/>

package/assets/color-facebook/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 ColorFacebookProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorFacebook = forwardRef<SVGSVGElement, ColorFacebookProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </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 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;

package/assets/color-fire/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 ColorFireProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorFire = forwardRef<SVGSVGElement, ColorFireProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </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="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>

package/assets/color-google/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 ColorGoogleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -22,7 +22,7 @@ export const IconColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 </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.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -30,7 +30,7 @@ export const IconColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 </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="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -39,7 +39,7 @@ export const IconColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 ;
   } 
   
-  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.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>

package/assets/color-html/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 ColorHtmlProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorHtml = forwardRef<SVGSVGElement, ColorHtmlProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#clip0_12237_327)">
 <rect width="48" height="48" rx="9" fill="#FF4C4C"/>
 <path d="M40.2949 26.1695L29.7274 30.654V27.3737L36.6409 24.7578V24.6124L29.7274 21.9965V18.7162L40.2949 23.2007V26.1695Z" style={{ fill: `var(--${fillType})` }}/>
@@ -29,7 +29,7 @@ export const IconColorHtml = forwardRef<SVGSVGElement, ColorHtmlProps>(
 </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}>
 <g clip-path="url(#clip0_12237_327)">
 <rect width="48" height="48" rx="9" fill="#FF4C4C"/>
 <path d="M40.2949 26.1695L29.7274 30.654V27.3737L36.6409 24.7578V24.6124L29.7274 21.9965V18.7162L40.2949 23.2007V26.1695Z" style={{ fill: `var(--${fillType})` }}/>
@@ -44,7 +44,7 @@ export const IconColorHtml = forwardRef<SVGSVGElement, ColorHtmlProps>(
 </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}>
 <g clip-path="url(#clip0_12237_327)">
 <rect width="48" height="48" rx="9" fill="#FF4C4C"/>
 <path d="M40.2949 26.1695L29.7274 30.654V27.3737L36.6409 24.7578V24.6124L29.7274 21.9965V18.7162L40.2949 23.2007V26.1695Z" style={{ fill: `var(--${fillType})` }}/>
@@ -60,7 +60,7 @@ export const IconColorHtml = forwardRef<SVGSVGElement, ColorHtmlProps>(
 ;
   } 
   
-  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}>
 <g clip-path="url(#clip0_12237_327)">
 <rect width="48" height="48" rx="9" fill="#FF4C4C"/>
 <path d="M40.2949 26.1695L29.7274 30.654V27.3737L36.6409 24.7578V24.6124L29.7274 21.9965V18.7162L40.2949 23.2007V26.1695Z" style={{ fill: `var(--${fillType})` }}/>

package/assets/color-liner/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 ColorLinerProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorLiner = forwardRef<SVGSVGElement, ColorLinerProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </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="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;

package/assets/color-liner-variation/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 ColorLinerVariationProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariationProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -26,7 +26,7 @@ export const IconColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVaria
 </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}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -38,7 +38,7 @@ export const IconColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVaria
 </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}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -51,7 +51,7 @@ export const IconColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVaria
 ;
   } 
   
-  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}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>

package/assets/color-link/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 ColorLinkProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconColorLink = forwardRef<SVGSVGElement, ColorLinkProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <g clip-path="url(#clip0_12237_434)">
 <rect width="48" height="48" rx="9" fill="#8D959E"/>
 <path d="M28.1411 28.1761C28.462 27.9542 28.7674 27.7005 29.053 27.4148L34.1864 22.2815C36.7406 19.7273 36.7461 15.5894 34.203 13.0283L34.2022 13.0289C31.641 10.4857 27.5032 10.4912 24.949 13.0455L21.2996 16.6949C22.5287 16.4628 23.8021 16.5229 25.0083 16.8752L26.8935 14.99C28.3738 13.5097 30.7704 13.5042 32.2576 14.9734L32.2584 14.9729C33.7276 16.4601 33.7221 18.8567 32.2418 20.337L27.1085 25.4703C25.6282 26.9506 23.2316 26.9561 21.7444 25.4869L21.7436 25.4874C21.7286 25.4722 21.6782 25.4357 21.6782 25.4143L21.6753 25.4165C21.0752 24.7774 20.7374 23.9815 20.662 23.166L18.4264 25.4017C18.7426 26.1384 19.2002 26.8289 19.799 27.432L19.7999 27.4314C20.7558 28.3807 22.0046 29.0231 23.3339 29.2449L23.3332 29.2456C24.9808 29.5205 26.7134 29.1637 28.1411 28.1761Z" style={{ fill: `var(--${fillType})` }}/>
@@ -28,7 +28,7 @@ export const IconColorLink = forwardRef<SVGSVGElement, ColorLinkProps>(
 </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}>
 <g clip-path="url(#clip0_12237_434)">
 <rect width="48" height="48" rx="9" fill="#8D959E"/>
 <path d="M28.1411 28.1761C28.462 27.9542 28.7674 27.7005 29.053 27.4148L34.1864 22.2815C36.7406 19.7273 36.7461 15.5894 34.203 13.0283L34.2022 13.0289C31.641 10.4857 27.5032 10.4912 24.949 13.0455L21.2996 16.6949C22.5287 16.4628 23.8021 16.5229 25.0083 16.8752L26.8935 14.99C28.3738 13.5097 30.7704 13.5042 32.2576 14.9734L32.2584 14.9729C33.7276 16.4601 33.7221 18.8567 32.2418 20.337L27.1085 25.4703C25.6282 26.9506 23.2316 26.9561 21.7444 25.4869L21.7436 25.4874C21.7286 25.4722 21.6782 25.4357 21.6782 25.4143L21.6753 25.4165C21.0752 24.7774 20.7374 23.9815 20.662 23.166L18.4264 25.4017C18.7426 26.1384 19.2002 26.8289 19.799 27.432L19.7999 27.4314C20.7558 28.3807 22.0046 29.0231 23.3339 29.2449L23.3332 29.2456C24.9808 29.5205 26.7134 29.1637 28.1411 28.1761Z" style={{ fill: `var(--${fillType})` }}/>
@@ -42,7 +42,7 @@ export const IconColorLink = forwardRef<SVGSVGElement, ColorLinkProps>(
 </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}>
 <g clip-path="url(#clip0_12237_434)">
 <rect width="48" height="48" rx="9" fill="#8D959E"/>
 <path d="M28.1411 28.1761C28.462 27.9542 28.7674 27.7005 29.053 27.4148L34.1864 22.2815C36.7406 19.7273 36.7461 15.5894 34.203 13.0283L34.2022 13.0289C31.641 10.4857 27.5032 10.4912 24.949 13.0455L21.2996 16.6949C22.5287 16.4628 23.8021 16.5229 25.0083 16.8752L26.8935 14.99C28.3738 13.5097 30.7704 13.5042 32.2576 14.9734L32.2584 14.9729C33.7276 16.4601 33.7221 18.8567 32.2418 20.337L27.1085 25.4703C25.6282 26.9506 23.2316 26.9561 21.7444 25.4869L21.7436 25.4874C21.7286 25.4722 21.6782 25.4357 21.6782 25.4143L21.6753 25.4165C21.0752 24.7774 20.7374 23.9815 20.662 23.166L18.4264 25.4017C18.7426 26.1384 19.2002 26.8289 19.799 27.432L19.7999 27.4314C20.7558 28.3807 22.0046 29.0231 23.3339 29.2449L23.3332 29.2456C24.9808 29.5205 26.7134 29.1637 28.1411 28.1761Z" style={{ fill: `var(--${fillType})` }}/>
@@ -57,7 +57,7 @@ export const IconColorLink = forwardRef<SVGSVGElement, ColorLinkProps>(
 ;
   } 
   
-  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}>
 <g clip-path="url(#clip0_12237_434)">
 <rect width="48" height="48" rx="9" fill="#8D959E"/>
 <path d="M28.1411 28.1761C28.462 27.9542 28.7674 27.7005 29.053 27.4148L34.1864 22.2815C36.7406 19.7273 36.7461 15.5894 34.203 13.0283L34.2022 13.0289C31.641 10.4857 27.5032 10.4912 24.949 13.0455L21.2996 16.6949C22.5287 16.4628 23.8021 16.5229 25.0083 16.8752L26.8935 14.99C28.3738 13.5097 30.7704 13.5042 32.2576 14.9734L32.2584 14.9729C33.7276 16.4601 33.7221 18.8567 32.2418 20.337L27.1085 25.4703C25.6282 26.9506 23.2316 26.9561 21.7444 25.4869L21.7436 25.4874C21.7286 25.4722 21.6782 25.4357 21.6782 25.4143L21.6753 25.4165C21.0752 24.7774 20.7374 23.9815 20.662 23.166L18.4264 25.4017C18.7426 26.1384 19.2002 26.8289 19.799 27.432L19.7999 27.4314C20.7558 28.3807 22.0046 29.0231 23.3339 29.2449L23.3332 29.2456C24.9808 29.5205 26.7134 29.1637 28.1411 28.1761Z" style={{ fill: `var(--${fillType})` }}/>