@liner-fe/icon 0.1.0 → 0.1.2

package/assets/visibility/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 VisibilityProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface VisibilityProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconVisibility = forwardRef<SVGSVGElement, VisibilityProps>(
-  ({ 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="M29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30 24C30 27.3137 27.3137 30 24 30C20.6863 30 18 27.3137 18 24C18 20.6863 20.6863 18 24 18C27.3137 18 30 20.6863 30 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM28 24C28 26.2091 26.2091 28 24 28C21.7909 28 20 26.2091 20 24C20 21.7909 21.7909 20 24 20C26.2091 20 28 21.7909 28 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM41.1349 23.4515C41.292 23.6499 41.4304 23.8332 41.5511 24C41.4304 24.1668 41.292 24.3501 41.1349 24.5485C40.2049 25.7232 38.7984 27.2051 37.0268 28.6514C33.4144 31.6003 28.7889 34 24 34C19.2111 34 14.5856 31.6003 10.9732 28.6514C9.20156 27.2051 7.79508 25.7232 6.86507 24.5485C6.70804 24.3501 6.56963 24.1668 6.44888 24C6.56963 23.8332 6.70804 23.6499 6.86507 23.4515C7.79508 22.2768 9.20156 20.7949 10.9732 19.3486C14.5856 16.3997 19.2111 14 24 14C28.7889 14 33.4144 16.3997 37.0268 19.3486C38.7984 20.7949 40.2049 22.2768 41.1349 23.4515Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM43.0785 23.4302L43.0819 23.4216C43.0857 23.4117 43.0863 23.4089 43.0846 23.413C43.0835 23.4158 43.0813 23.4215 43.0785 23.4302ZM41.919 22.8308C42.2832 23.2909 42.5616 23.6856 42.7608 24C42.5616 24.3144 42.2832 24.7091 41.919 25.1692C40.9432 26.4018 39.4856 27.9351 37.6592 29.426C33.9546 32.4502 29.1105 35 24 35C18.8895 35 14.0454 32.4502 10.3408 29.426C8.51443 27.9351 7.05684 26.4018 6.08102 25.1692C5.71684 24.7091 5.43835 24.3144 5.23917 24C5.43835 23.6856 5.71684 23.2909 6.08102 22.8308C7.05684 21.5982 8.51443 20.0649 10.3408 18.574C14.0454 15.5498 18.8895 13 24 13C29.1105 13 33.9546 15.5498 37.6592 18.574C39.4856 20.0649 40.9432 21.5982 41.919 22.8308ZM4.91812 23.4216C4.91179 23.405 4.91434 23.4086 4.92157 23.4302L4.91812 23.4216ZM4.91812 24.5784L4.92157 24.5698C4.91434 24.5914 4.91179 24.595 4.91812 24.5784ZM43.0785 24.5698L43.0819 24.5784C43.0882 24.595 43.0857 24.5914 43.0785 24.5698Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/visibility-off/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 VisibilityOffProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface VisibilityOffProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconVisibilityOff = forwardRef<SVGSVGElement, VisibilityOffProps>(
-  ({ 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.2725 8.44336L8.44409 11.2718L36.7284 39.5561L39.5568 36.7276L11.2725 8.44336Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38.3491 32.6915C43.0339 29.2067 46 25.0978 46 24.0003C46 22.0003 36.1503 10.0003 24 10.0003C21.5361 10.0003 19.1667 10.4938 16.9549 11.2973L21.1264 15.4688C22.0288 15.165 22.9952 15.0003 24 15.0003C28.9706 15.0003 33 19.0297 33 24.0003C33 25.0051 32.8353 25.9715 32.5315 26.8739L38.3491 32.6915Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24.7076 19.05C26.9028 19.361 28.6393 21.0975 28.9503 23.2927L24.7076 19.05Z" style={{ fill: `var(--${type})` }}/>
@@ -23,7 +23,7 @@ export const IconVisibilityOff = forwardRef<SVGSVGElement, VisibilityOffProps>(
 </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.2725 8.44336L8.44409 11.2718L36.7284 39.5561L39.5568 36.7276L11.2725 8.44336Z" style={{ fill: `var(--${type})` }}/>
 <path d="M37.9408 32.9904C42.8609 29.4455 46 25.1294 46 24.0003C46 22.0003 36.1503 10.0003 24 10.0003C21.3442 10.0003 18.7982 10.5736 16.441 11.4906L20.6108 15.6603C21.6568 15.2347 22.801 15.0003 24 15.0003C28.9706 15.0003 33 19.0297 33 24.0003C33 25.1993 32.7656 26.3435 32.34 27.3895L37.9408 32.9904Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18.0785 23.0275L24.9728 29.9218C24.6562 29.9735 24.3312 30.0003 24 30.0003C20.6863 30.0003 18 27.314 18 24.0003C18 23.6691 18.0268 23.3441 18.0785 23.0275Z" style={{ fill: `var(--${type})` }}/>
@@ -32,7 +32,7 @@ export const IconVisibilityOff = forwardRef<SVGSVGElement, VisibilityOffProps>(
 </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.5568 36.7276L36.7284 39.5561L8.44409 11.2718L11.2725 8.44336L39.5568 36.7276Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31.7293 26.0716C31.9059 25.411 32 24.7166 32 24.0003C32 19.582 28.4183 16.0003 24 16.0003C23.2837 16.0003 22.5893 16.0944 21.9287 16.271L31.7293 26.0716Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16 24.0003C16 23.2834 16.0943 22.5884 16.2712 21.9273L21.1164 26.7724C21.1528 26.8103 21.19 26.8475 21.2279 26.8839L26.073 31.7291C25.4119 31.906 24.7169 32.0003 24 32.0003C19.5817 32.0003 16 28.4186 16 24.0003Z" style={{ fill: `var(--${type})` }}/>
@@ -42,7 +42,7 @@ export const IconVisibilityOff = forwardRef<SVGSVGElement, VisibilityOffProps>(
 ;
   } 
   
-  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="M10.9186 8.79688L39.2028 37.0811L37.0815 39.2025L8.79724 10.9182L10.9186 8.79688Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M37.5262 33.2832C42.6838 29.687 46 25.1597 46 23.9993C46 21.9993 36.1503 9.99925 24 9.99925C21.1532 9.99925 18.4327 10.658 15.9355 11.6926L18.2597 14.0167C20.1002 13.378 22.0303 12.9993 24 12.9993C29.1105 12.9993 33.9546 15.549 37.6592 18.5732C39.4856 20.0641 40.9432 21.5975 41.919 22.8301C42.2832 23.2901 42.5616 23.6848 42.7608 23.9993C42.5616 24.3137 42.2832 24.7084 41.919 25.1684C40.9432 26.401 39.4856 27.9344 37.6592 29.4253C36.9367 30.0151 36.1709 30.5868 35.3681 31.1252L37.5262 33.2832ZM43.0785 23.4294L43.0819 23.4209C43.0857 23.4109 43.0863 23.4082 43.0846 23.4123L43.0828 23.417L43.0785 23.4294ZM43.0785 24.569L43.0819 24.5776C43.0845 24.5844 43.0855 24.588 43.0855 24.588C43.0855 24.588 43.0846 24.5863 43.0832 24.5825L43.0785 24.569Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.7397 33.982L32.0639 36.3062C29.5669 37.3406 26.8466 37.9993 24 37.9993C11.8497 37.9993 2 25.9993 2 23.9993C2 22.8388 5.31598 18.3118 10.4733 14.7156L12.6314 16.8737C11.8288 17.4119 11.0632 17.9835 10.3408 18.5732C8.51443 20.0641 7.05684 21.5975 6.08102 22.8301C5.71684 23.2901 5.43835 23.6848 5.23917 23.9993C5.43835 24.3137 5.71684 24.7084 6.08102 25.1684C7.05684 26.401 8.51443 27.9344 10.3408 29.4253C14.0454 32.4495 18.8895 34.9993 24 34.9993C25.9695 34.9993 27.8993 34.6206 29.7397 33.982ZM4.91812 23.4209C4.91179 23.4042 4.91434 23.4078 4.92157 23.4295L4.91812 23.4209ZM4.91812 24.5776L4.92157 24.569C4.91434 24.5907 4.91179 24.5943 4.91812 24.5776Z" style={{ fill: `var(--${type})` }}/>

package/assets/volume/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 VolumeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface VolumeProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconVolume = forwardRef<SVGSVGElement, VolumeProps>(
-  ({ 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="M11.9692 19.999H7V27.999H11.9708L23 37.4685V10.5281L11.9692 19.999ZM24.6514 38.8864L24.6502 38.8853ZM10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" 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="M10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" 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="M10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858ZM12.3396 20.999H8V26.999H12.3412L22 35.2919V12.7047L12.3396 20.999Z" 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="M11.9692 19.999H7V27.999H11.9708L23 37.4685V10.5281L11.9692 19.999ZM24.6514 38.8864L24.6502 38.8853ZM10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/volume-up/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 VolumeUpProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface VolumeUpProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconVolumeUp = forwardRef<SVGSVGElement, VolumeUpProps>(
-  ({ 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="M11.9692 19.999H7V27.999H11.9708L23 37.4685V10.5281L11.9692 19.999ZM24.6514 38.8864L24.6502 38.8853ZM10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M32.5 23.9987C32.5 21.7058 31.5398 19.6154 29.9545 18.0743L32.0455 15.9232C34.1718 17.9901 35.5 20.8411 35.5 23.9987C35.5 27.1564 34.1718 30.0074 32.0455 32.0743L29.9545 29.9232C31.5398 28.3821 32.5 26.2917 32.5 23.9987Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M40.5 23.9987C40.5 19.3177 38.7371 15.0917 35.8979 12.0162L38.1021 9.98125C41.4488 13.6063 43.5 18.5572 43.5 23.9987C43.5 29.4402 41.4488 34.3912 38.1021 38.0162L35.8979 35.9812C38.7371 32.9058 40.5 28.6797 40.5 23.9987Z" 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="M10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32 23.9995C32 21.8507 31.1011 19.887 29.606 18.4336L32.3941 15.5654C34.6105 17.72 36 20.6977 36 23.9995C36 27.3013 34.6105 30.279 32.3941 32.4336L29.606 29.5654C31.1011 28.112 32 26.1483 32 23.9995Z" style={{ fill: `var(--${type})` }}/>
 <path d="M35.5305 12.3559C38.2852 15.3398 40 19.445 40 23.9992C40 28.5535 38.2852 32.6587 35.5305 35.6426L38.4696 38.3559C41.9008 34.6392 44 29.5675 44 23.9992C44 18.431 41.9008 13.3592 38.4696 9.64258L35.5305 12.3559Z" 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="M10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858ZM12.3396 20.999H8V26.999H12.3412L22 35.2919V12.7047L12.3396 20.999Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32 23.9995C32 21.8507 31.1011 19.887 29.606 18.4336L32.3941 15.5654C34.6105 17.72 36 20.6977 36 23.9995C36 27.3013 34.6105 30.279 32.3941 32.4336L29.606 29.5654C31.1011 28.112 32 26.1483 32 23.9995Z" style={{ fill: `var(--${type})` }}/>
 <path d="M35.5305 12.3559C38.2852 15.3398 40 19.445 40 23.9992C40 28.5535 38.2852 32.6587 35.5305 35.6426L38.4696 38.3559C41.9008 34.6392 44 29.5675 44 23.9992C44 18.431 41.9008 13.3592 38.4696 9.64258L35.5305 12.3559Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconVolumeUp = forwardRef<SVGSVGElement, VolumeUpProps>(
 ;
   } 
   
-  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="M11.9692 19.999H7V27.999H11.9708L23 37.4685V10.5281L11.9692 19.999ZM24.6514 38.8864L24.6502 38.8853ZM10.858 16.999L22.6972 6.83409C23.9942 5.72049 26 6.64204 26 8.35152V39.6451C26 41.3546 23.9942 42.2761 22.6972 41.1625L10.8596 30.999H4V16.999H10.858Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M32.5 23.9987C32.5 21.7058 31.5398 19.6154 29.9545 18.0743L32.0455 15.9232C34.1718 17.9901 35.5 20.8411 35.5 23.9987C35.5 27.1564 34.1718 30.0074 32.0455 32.0743L29.9545 29.9232C31.5398 28.3821 32.5 26.2917 32.5 23.9987Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M40.5 23.9987C40.5 19.3177 38.7371 15.0917 35.8979 12.0162L38.1021 9.98125C41.4488 13.6063 43.5 18.5572 43.5 23.9987C43.5 29.4402 41.4488 34.3912 38.1021 38.0162L35.8979 35.9812C38.7371 32.9058 40.5 28.6797 40.5 23.9987Z" style={{ fill: `var(--${type})` }}/>

package/assets/zoom-in/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 ZoomInProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ZoomInProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconZoomIn = forwardRef<SVGSVGElement, ZoomInProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M19.5002 19.5005V14H22.5002V19.5005H28.0007V22.5005H22.5002V28.0007H19.5002V22.5005H14V19.5005H19.5002Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M30.4931 32.6144C27.9073 34.7305 24.6019 36 21 36C12.7157 36 6 29.2843 6 21C6 12.7157 12.7157 6 21 6C29.2843 6 36 12.7157 36 21C36 24.6019 34.7305 27.9073 32.6144 30.4931L41.5607 39.4393L39.4393 41.5607L30.4931 32.6144ZM33 21C33 27.6274 27.6274 33 21 33C14.3726 33 9 27.6274 9 21C9 14.3726 14.3726 9 21 9C27.6274 9 33 14.3726 33 21Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M19.5002 19.5005V14H22.5002V19.5005H28.0007V22.5005H22.5002V28.0007H19.5002V22.5005H14V19.5005H19.5002Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M30.4931 32.6144C27.9073 34.7305 24.6019 36 21 36C12.7157 36 6 29.2843 6 21C6 12.7157 12.7157 6 21 6C29.2843 6 36 12.7157 36 21C36 24.6019 34.7305 27.9073 32.6144 30.4931L41.5607 39.4393L39.4393 41.5607L30.4931 32.6144ZM33 21C33 27.6274 27.6274 33 21 33C14.3726 33 9 27.6274 9 21C9 14.3726 14.3726 9 21 9C27.6274 9 33 14.3726 33 21Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M19.0002 19.0005V14H23.0002V19.0005H28.0007V23.0005H23.0002V28.0007H19.0002V23.0005H14V19.0005H19.0002Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M30.0982 32.9267C27.5746 34.8547 24.4211 36 21 36C12.7157 36 6 29.2843 6 21C6 12.7157 12.7157 6 21 6C29.2843 6 36 12.7157 36 21C36 24.4211 34.8547 27.5746 32.9267 30.0982L41.9142 39.0858L39.0858 41.9142L30.0982 32.9267ZM32 21C32 27.0751 27.0751 32 21 32C14.9249 32 10 27.0751 10 21C10 14.9249 14.9249 10 21 10C27.0751 10 32 14.9249 32 21Z" 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="M19.5002 19.5005V14H22.5002V19.5005H28.0007V22.5005H22.5002V28.0007H19.5002V22.5005H14V19.5005H19.5002Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M30.4931 32.6144C27.9073 34.7305 24.6019 36 21 36C12.7157 36 6 29.2843 6 21C6 12.7157 12.7157 6 21 6C29.2843 6 36 12.7157 36 21C36 24.6019 34.7305 27.9073 32.6144 30.4931L41.5607 39.4393L39.4393 41.5607L30.4931 32.6144ZM33 21C33 27.6274 27.6274 33 21 33C14.3726 33 9 27.6274 9 21C9 14.3726 14.3726 9 21 9C27.6274 9 33 14.3726 33 21Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/zoom-out/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 ZoomOutProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ZoomOutProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconZoomOut = forwardRef<SVGSVGElement, ZoomOutProps>(
-  ({ 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="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" 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="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" 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="M28.0007 19L14 19V23H28.0007V19Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.4211 36 27.5746 34.8547 30.0982 32.9267L39.0858 41.9142L41.9142 39.0858L32.9267 30.0982C34.8547 27.5746 36 24.4211 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 32C27.0751 32 32 27.0751 32 21C32 14.9249 27.0751 10 21 10C14.9249 10 10 14.9249 10 21C10 27.0751 14.9249 32 21 32Z" 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="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, SVGProps } from 'react';
-  import { BasicColorType } from '@liner-fe/design-token-primitive';
+  import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { IconArrowUpward } from './assets/arrow-upward';
 import { IconArrowDownward } from './assets/arrow-downward';
 import { IconArrowBack } from './assets/arrow-back';
@@ -605,14 +605,6 @@ export const IconMap: Record<IconName, React.ForwardRefExoticComponent<any>> = {
   "color-link": IconColorLink
 } as const;
 
-const iconSizeMap = {
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 32,
-  xl: 40,
-} as const;
-
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
@@ -629,5 +621,5 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(({name, size = "m", ...
     return null;
   }
 
-  return <IconComponent {...props} ref={ref} size={iconSizeMap[size]} />;
+  return <IconComponent {...props} ref={ref} size={size} />;
 });