@liner-fe/icon 0.1.0 → 0.1.2

package/assets/make-easy/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 MakeEasyProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MakeEasyProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMakeEasy = forwardRef<SVGSVGElement, MakeEasyProps>(
-  ({ 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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${type})` }}/>
@@ -23,7 +23,7 @@ export const IconMakeEasy = forwardRef<SVGSVGElement, MakeEasyProps>(
 </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="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${type})` }}/>
@@ -32,7 +32,7 @@ export const IconMakeEasy = forwardRef<SVGSVGElement, MakeEasyProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 14.3835L30.7228 19.4993H36.2772L33.5 14.3835Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM18 12.4993H11V19.4993H18V12.4993Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM18 33.9993C18 35.9323 16.433 37.4993 14.5 37.4993C12.567 37.4993 11 35.9323 11 33.9993C11 32.0663 12.567 30.4993 14.5 30.4993C16.433 30.4993 18 32.0663 18 33.9993Z" style={{ fill: `var(--${type})` }}/>
@@ -42,7 +42,7 @@ export const IconMakeEasy = forwardRef<SVGSVGElement, MakeEasyProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2577 9.23722C34.5007 7.8428 32.4993 7.8428 31.7423 9.23722L25.6037 20.5452C24.8803 21.8778 25.8451 23.4993 27.3614 23.4993H39.6386C41.1549 23.4993 42.1197 21.8778 41.3963 20.5452L35.2577 9.23722ZM33.5 12.2874L29.0421 20.4993H37.9579L33.5 12.2874Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 8.49934V23.4993H22V8.49934H7ZM19 11.4993H10V20.4993H19V11.4993Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22 33.9993C22 38.1415 18.6421 41.4993 14.5 41.4993C10.3579 41.4993 7 38.1415 7 33.9993C7 29.8572 10.3579 26.4993 14.5 26.4993C18.6421 26.4993 22 29.8572 22 33.9993ZM19 33.9993C19 36.4846 16.9853 38.4993 14.5 38.4993C12.0147 38.4993 10 36.4846 10 33.9993C10 31.5141 12.0147 29.4993 14.5 29.4993C16.9853 29.4993 19 31.5141 19 33.9993Z" style={{ fill: `var(--${type})` }}/>

package/assets/members/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 MembersProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MembersProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMembers = forwardRef<SVGSVGElement, MembersProps>(
-  ({ 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="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926C3.77876 40.042 3 39.2632 3 38.3027V33.0859C3 26.8427 8.06147 21.7812 14.3047 21.7812H17.7822Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V33.0859C32.0869 28.7496 30.1567 24.8646 27.1094 22.2412C28.1227 21.9431 29.1949 21.7812 30.3047 21.7812H33.7822Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.0439 7C19.6455 7.00025 22.5653 9.9199 22.5654 13.5215C22.5654 17.1232 19.6456 20.0437 16.0439 20.0439C12.4421 20.0439 9.52148 17.1233 9.52148 13.5215C9.52163 9.91974 12.4422 7 16.0439 7Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +22,7 @@ export const IconMembers = forwardRef<SVGSVGElement, MembersProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7813 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" style={{ fill: `var(--${type})` }}/>
@@ -30,7 +30,7 @@ export const IconMembers = forwardRef<SVGSVGElement, MembersProps>(
 </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="M33.7822 21.7832C40.0254 21.7832 45.0869 26.8447 45.0869 33.0879V38.3047C45.0869 39.2652 44.3082 40.0439 43.3477 40.0439H31.7559C31.969 39.5048 32.0869 38.9176 32.0869 38.3027V36.0439H41.0869V33.0879C41.0869 29.1798 38.0177 25.9885 34.1582 25.793L33.7822 25.7832H30.3047C30.2315 25.7832 30.1586 25.7859 30.0859 25.7881C29.2905 24.4499 28.2836 23.2524 27.1104 22.2422C27.9452 21.9967 28.8197 21.8436 29.7227 21.7979L30.3047 21.7832H33.7822Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 25.7812C10.2706 25.7813 7.00004 29.0519 7 33.0859V36.042H25.0869V33.0859C25.0869 29.1778 22.0177 25.9865 18.1582 25.791L17.7822 25.7812H14.3047Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5322 20.0439 16.043 20.0439L15.708 20.0352C12.262 19.8606 9.52148 17.0108 9.52148 13.5215C9.52162 9.9199 12.4414 7.00026 16.043 7ZM16.043 11C14.6506 11.0003 13.5216 12.129 13.5215 13.5215C13.5215 14.914 14.6505 16.0437 16.043 16.0439C17.4357 16.0439 18.5654 14.9142 18.5654 13.5215C18.5653 12.1289 17.4356 11 16.043 11Z" style={{ fill: `var(--${type})` }}/>
@@ -39,7 +39,7 @@ export const IconMembers = forwardRef<SVGSVGElement, MembersProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M17.7822 21.7812C24.0254 21.7812 29.0869 26.8427 29.0869 33.0859V38.3027C29.0869 39.2632 28.3082 40.042 27.3477 40.042H4.73926L4.56152 40.0332C3.68446 39.9442 3 39.2033 3 38.3027V33.0859C3.00004 27.0378 7.74979 22.0987 13.7227 21.7959L14.3047 21.7812H17.7822ZM14.3047 24.7812C9.86169 24.7813 6.23322 28.2705 6.01074 32.6582L6 33.0859V37.042H26.0869V33.0859C26.0869 28.4996 22.3686 24.7812 17.7822 24.7812H14.3047Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.7822 21.7812C40.0254 21.7812 45.0869 26.8427 45.0869 33.0859V38.3027C45.0869 39.2632 44.3082 40.042 43.3477 40.042H31.7568C31.9695 39.5034 32.0869 38.9168 32.0869 38.3027V37.042H42.0869V33.0859C42.0869 28.4996 38.3686 24.7812 33.7822 24.7812H30.3047C30.0195 24.7813 29.7377 24.7952 29.46 24.8232C28.7837 23.8692 27.9937 23.0015 27.1094 22.2402C27.9445 21.9946 28.8194 21.8417 29.7227 21.7959L30.3047 21.7812H33.7822Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.043 7C19.6447 7 22.5653 9.91974 22.5654 13.5215L22.5566 13.8574C22.3819 17.3033 19.5323 20.0439 16.043 20.0439L15.708 20.0352C12.2619 19.8607 9.52148 17.0109 9.52148 13.5215C9.52162 9.91982 12.4413 7.00013 16.043 7ZM16.043 10C14.0982 10.0001 12.5216 11.5767 12.5215 13.5215C12.5215 15.4664 14.0981 17.0438 16.043 17.0439C17.988 17.0439 19.5654 15.4665 19.5654 13.5215C19.5653 11.5766 17.9879 10 16.043 10Z" style={{ fill: `var(--${type})` }}/>

package/assets/memo/index.tsx

@@ -1,30 +1,30 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MemoProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MemoProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMemo = forwardRef<SVGSVGElement, MemoProps>(
-  ({ 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="M6 40.2222C6 41.2722 6.85121 42.1235 7.90123 42.1235H29.9285C30.4328 42.1235 30.9164 41.9231 31.2729 41.5666L31.4481 41.3915C31.6849 41.2586 31.9114 41.0885 32.1214 40.8785L40.8787 32.1211C41.0887 31.9112 41.2588 31.6846 41.3917 31.4478L41.5666 31.2729C41.9231 30.9164 42.1235 30.4328 42.1235 29.9285V7.90123C42.1235 6.85121 41.2722 6 40.2222 6H7.90123C6.85121 6 6 6.85121 6 7.90124V40.2222ZM30.8025 36.8198L36.8201 30.8023H30.8025L30.8025 36.8198ZM14.4568 14.457H33.6667V18.457H14.4568V14.457ZM14.4568 22.0615H25.1111V26.0615H14.4568V22.0615Z" 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="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM33.1667 14.957H14.9568V17.957H33.1667V14.957ZM14.9568 22.5615H24.6111V25.5615H14.9568V22.5615ZM30.8643 37.2574L37.2574 30.8643H30.8643L30.8643 37.2574Z" 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="M33.6667 14.457H14.4568V18.457H33.6667V14.457Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.1111 22.0615H14.4568V26.0615H25.1111V22.0615Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222ZM35.3804 31.8023L31.8024 35.3802V31.8023H35.3804ZM38.1235 27.9998L27.9999 27.9998L27.9999 38.1235H10V10H38.1235V27.9998Z" style={{ fill: `var(--${type})` }}/>
@@ -32,7 +32,7 @@ export const IconMemo = forwardRef<SVGSVGElement, MemoProps>(
 ;
   } 
   
-  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="M33.1667 14.957H14.9568V17.957H33.1667V14.957Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24.6111 22.5615H14.9568V25.5615H24.6111V22.5615Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.5666 31.2729L31.2729 41.5666C30.9164 41.9231 30.4328 42.1235 29.9285 42.1235H7.90123C6.85121 42.1235 6 41.2722 6 40.2222V7.90124C6 6.85121 6.85121 6 7.90123 6H40.2222C41.2722 6 42.1235 6.85121 42.1235 7.90123V29.9285C42.1235 30.4328 41.9231 30.9164 41.5666 31.2729ZM9 39.1235V9H39.1235V27.9998H27.9999L27.9999 39.1235H9ZM37.3931 30.9998L30.9999 37.393L30.9999 30.9998H37.3931Z" style={{ fill: `var(--${type})` }}/>

package/assets/menu/index.tsx

@@ -1,34 +1,34 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MenuProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MenuProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMenu = forwardRef<SVGSVGElement, MenuProps>(
-  ({ 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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M9 9H39V13H9V9Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22H39V26H9V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35H9V39H39V35Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconMenu = forwardRef<SVGSVGElement, MenuProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/microscope/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 MicroscopeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MicroscopeProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMicroscope = forwardRef<SVGSVGElement, MicroscopeProps>(
-  ({ 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.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" 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.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" 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.7002 24.8789L32.0752 25.71L32.8145 28.043L27.6641 29.6748L26.9248 27.3418L24.249 28.1904L20.4648 16.2471C16.7533 17.1591 14 20.5081 14 24.501C14 29.1954 17.8056 33.001 22.5 33.001H38V37.001H26V41.001H40V45.001H8V41.001H22V36.9893C15.3283 36.7268 10 31.2371 10 24.501C10 18.7202 13.9241 13.8561 19.2539 12.4268L17 5.31152L27.4512 2L34.7002 24.8789ZM22.0215 7.91602L26.8545 23.1689L29.6787 22.2744L24.8457 7.02148L22.0215 7.91602Z" 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.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/mindmap/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 MindmapProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MindmapProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMindmap = forwardRef<SVGSVGElement, MindmapProps>(
-  ({ 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" 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="M21.5399 13.923C22.4497 12.8712 23 11.4998 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.3391 16 17.6717 15.9719 17.9954 15.9178L21.9848 20.7051C21.3623 21.6508 21 22.7831 21 24C21 24.2694 21.0178 24.5346 21.0521 24.7945L14.7351 28.304C13.7102 27.4878 12.4121 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C12.805 39 14.4238 38.203 15.5237 36.9417L27.0562 39.8248C27.4581 42.7482 29.9661 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.8196 33 28.9108 34.1631 27.8602 35.9027L16.9971 33.1869C16.999 33.1248 17 33.0625 17 33C17 32.5536 16.9513 32.1186 16.8588 31.7L22.8754 28.3575C23.9506 29.3756 25.4024 30 27 30C30.3137 30 33 27.3137 33 24C33 23.0337 32.7716 22.1208 32.3658 21.3123L36.2772 16.749C36.8229 16.9123 37.4012 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.2529 32.384 13.4162 33.0408 14.3784L29.4787 18.5343C28.7231 18.1911 27.8839 18 27 18C26.3631 18 25.7493 18.0992 25.1734 18.2831L21.5399 13.923ZM17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12ZM40 11C40 12.1046 39.1046 13 38 13C36.8954 13 36 12.1046 36 11C36 9.89543 36.8954 9 38 9C39.1046 9 40 9.89543 40 11ZM27 26C28.1046 26 29 25.1046 29 24C29 22.8954 28.1046 22 27 22C25.8954 22 25 22.8954 25 24C25 25.1046 25.8954 26 27 26ZM35 39C35 40.1046 34.1046 41 33 41C31.8954 41 31 40.1046 31 39C31 37.8954 31.8954 37 33 37C34.1046 37 35 37.8954 35 39ZM11 35C12.1046 35 13 34.1046 13 33C13 31.8954 12.1046 31 11 31C9.89543 31 9 31.8954 9 33C9 34.1046 9.89543 35 11 35Z" 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/minus/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 MinusProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MinusProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMinus = forwardRef<SVGSVGElement, MinusProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM33 22L15 22V26L33 26V22Z" 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 44ZM33 22.5L15 22.5V25.5L33 25.5V22.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M8.00065 22L40 22L40 26L8.00065 26L8.00065 22Z" 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="M7.99992 22.5L39.9993 22.5L39.9993 25.5L7.99992 25.5L7.99992 22.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/mobile/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 MobileProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MobileProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMobile = forwardRef<SVGSVGElement, MobileProps>(
-  ({ 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="M24 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32C25.1046 32 26 32.8954 26 34C26 35.1046 25.1046 36 24 36C22.8954 36 22 35.1046 22 34C22 32.8954 22.8954 32 24 32Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM15 38H33V10H15V38Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/more/index.tsx

@@ -1,34 +1,34 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MoreProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MoreProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMore = forwardRef<SVGSVGElement, MoreProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconMore = forwardRef<SVGSVGElement, MoreProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${type})` }}/>

package/assets/more-horizontal/index.tsx

@@ -1,34 +1,34 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MoreHorizontalProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MoreHorizontalProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMoreHorizontal = forwardRef<SVGSVGElement, MoreHorizontalProps>(
-  ({ 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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" 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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconMoreHorizontal = forwardRef<SVGSVGElement, MoreHorizontalProps>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" style={{ fill: `var(--${type})` }}/>

package/assets/more-vertical/index.tsx

@@ -1,34 +1,34 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MoreVerticalProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MoreVerticalProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMoreVertical = forwardRef<SVGSVGElement, MoreVerticalProps>(
-  ({ 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="M25.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconMoreVertical = forwardRef<SVGSVGElement, MoreVerticalProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M25.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>