@liner-fe/icon 0.1.0 → 0.1.2

package/assets/move/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 MoveProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MoveProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMove = forwardRef<SVGSVGElement, MoveProps>(
-  ({ 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M36.2224 21.0002L27.4022 29.8203L30.2306 32.6487L41 21.8794C42.5621 20.3173 42.5621 17.7846 41 16.2225L30.2306 5.45312L27.4022 8.28155L36.1208 17.0002H10C7.79086 17.0002 6 18.791 6 21.0002V42.5002H10V21.0002H36.2224Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/move-to-folder/index.tsx

@@ -1,39 +1,39 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface MoveToFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface MoveToFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconMoveToFolder = forwardRef<SVGSVGElement, MoveToFolderProps>(
-  ({ 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.373 22.7227C23.7291 24.079 23.7283 26.2785 22.3721 27.6348L16.2354 33.7715L13.4072 30.9434L17.1719 27.1777L4.5 27.1787V23.1787L17.1709 23.1777L13.4072 19.4141L16.2354 16.5859L22.373 22.7227Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/new-chrome-extension/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 NewChromeExtensionProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface NewChromeExtensionProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconNewChromeExtension = forwardRef<SVGSVGElement, NewChromeExtensionProps>(
-  ({ 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM10 34H38V22H29C27.8954 22 27 21.1046 27 20V15H10V34Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/new-tab/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 NewTabProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface NewTabProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconNewTab = forwardRef<SVGSVGElement, NewTabProps>(
-  ({ 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/new-thread/index.tsx

@@ -1,37 +1,37 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface NewThreadProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface NewThreadProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconNewThread = forwardRef<SVGSVGElement, NewThreadProps>(
-  ({ 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 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20 18.001H15V26.001H20V31.001H28V26.001H33.001V18.001H28V13H20V18.001Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20.5 18.501H15V25.501H20.5V31.001H27.5V25.501H33.001V18.501H27.5V13H20.5V18.501Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M21.9998 20.001V15H25.9998V20.001H31.0006V24.001H25.9998V29.0007H21.9998V24.001H17V20.001H21.9998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM32.6667 33V37.9585L25.2083 33H9V11H39V33H32.6667Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M22.4998 20.501V15H25.4998V20.501H31.0006V23.501H25.4998V29.0007H22.4998V23.501H17V20.501H22.4998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM33.6667 34V39.8241L24.9062 34H8V10H40V34H33.6667Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/new-thread-folder/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 NewThreadFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface NewThreadFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconNewThreadFolder = forwardRef<SVGSVGElement, NewThreadFolderProps>(
-  ({ 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 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M30.5 26.5H34V30.5H30.5V34H26.5V30.5H23V26.5H26.5V23H30.5V26.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM18 36H31.042L34.2773 38.1504V36H39V21H18V36Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7L6.7959 30.9893C6.73278 30.9829 6.67062 30.9731 6.60938 30.9609C6.58365 30.9558 6.55857 30.9485 6.5332 30.9424C6.49943 30.9343 6.4657 30.9268 6.43262 30.917C6.40458 30.9087 6.37711 30.8991 6.34961 30.8896C6.31696 30.8784 6.28479 30.8664 6.25293 30.8535C6.2296 30.8441 6.20648 30.8345 6.18359 30.8242C6.14988 30.8091 6.11668 30.7933 6.08398 30.7764C6.06169 30.7648 6.03937 30.7535 6.01758 30.7412C5.98558 30.7231 5.9547 30.7034 5.92383 30.6836C5.90297 30.6702 5.88165 30.6577 5.86133 30.6436C5.83552 30.6256 5.81104 30.606 5.78613 30.5869C5.64546 30.4791 5.51978 30.3536 5.41211 30.2129C5.39787 30.1943 5.38273 30.1763 5.36914 30.1572L5.3418 30.1182C5.33239 30.1042 5.32449 30.0894 5.31543 30.0752C5.29568 30.0443 5.27588 30.0135 5.25781 29.9814C5.24551 29.9596 5.23416 29.9373 5.22266 29.915C5.20579 29.8823 5.18989 29.8491 5.1748 29.8154C5.16456 29.7925 5.1549 29.7694 5.14551 29.7461C5.13268 29.7142 5.12058 29.6821 5.10938 29.6494C5.09993 29.6219 5.0903 29.5944 5.08203 29.5664C5.07228 29.5333 5.0647 29.4996 5.05664 29.4658C5.05059 29.4405 5.04317 29.4154 5.03809 29.3896C5.02607 29.3288 5.0171 29.2668 5.01074 29.2041L5 29V7C5 6.86559 5.01378 6.73439 5.03906 6.60742C5.04338 6.58575 5.0487 6.56438 5.05371 6.54297C5.06342 6.50149 5.07369 6.46036 5.08594 6.41992C5.09293 6.39681 5.10157 6.37431 5.10938 6.35156C5.12221 6.31413 5.13445 6.27663 5.14941 6.24023C5.1584 6.21837 5.16898 6.19725 5.17871 6.17578C5.19469 6.14055 5.21059 6.10539 5.22852 6.07129C5.2423 6.04504 5.25756 6.01968 5.27246 5.99414C5.28848 5.9667 5.305 5.93967 5.32227 5.91309C5.33748 5.88965 5.35299 5.86649 5.36914 5.84375C5.39032 5.81394 5.41183 5.78442 5.43457 5.75586C5.4507 5.73559 5.46749 5.7159 5.48438 5.69629C5.50846 5.66833 5.53302 5.64084 5.55859 5.61426C5.57551 5.59666 5.59281 5.57947 5.61035 5.5625C5.6372 5.53655 5.66509 5.51173 5.69336 5.4873C5.71364 5.46977 5.73391 5.45226 5.75488 5.43555C5.78146 5.41438 5.80926 5.39482 5.83691 5.375C5.85988 5.35853 5.88257 5.34168 5.90625 5.32617C5.93398 5.30802 5.96255 5.2912 5.99121 5.27441C6.01711 5.25924 6.04271 5.24352 6.06934 5.22949C6.09739 5.21473 6.12646 5.20193 6.15527 5.18848C6.18402 5.17505 6.21272 5.16149 6.24219 5.14941C6.26855 5.13861 6.29535 5.12883 6.32227 5.11914C6.35425 5.10761 6.38623 5.09586 6.41895 5.08594C6.46537 5.07187 6.51276 5.06052 6.56055 5.0498C6.57331 5.04694 6.58578 5.04266 6.59863 5.04004C6.66326 5.02688 6.72916 5.01751 6.7959 5.01074L7 5H18.5L21.5 9Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconNewThreadFolder = forwardRef<SVGSVGElement, NewThreadFolderProp
 ;
   } 
   
-  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 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" style={{ fill: `var(--${type})` }}/>

package/assets/palette/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 PaletteProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface PaletteProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconPalette = forwardRef<SVGSVGElement, PaletteProps>(
-  ({ 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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>
@@ -23,7 +23,7 @@ export const IconPalette = forwardRef<SVGSVGElement, PaletteProps>(
 </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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>
@@ -32,7 +32,7 @@ export const IconPalette = forwardRef<SVGSVGElement, PaletteProps>(
 </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 17.5C29.3807 17.5 30.5 16.3807 30.5 15C30.5 13.6193 29.3807 12.5 28 12.5C26.6193 12.5 25.5 13.6193 25.5 15C25.5 16.3807 26.6193 17.5 28 17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.5 15.5C22.5 16.8807 21.3807 18 20 18C18.6193 18 17.5 16.8807 17.5 15.5C17.5 14.1193 18.6193 13 20 13C21.3807 13 22.5 14.1193 22.5 15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M17.5 21.5C17.5 22.8807 16.3807 24 15 24C13.6193 24 12.5 22.8807 12.5 21.5C12.5 20.1193 13.6193 19 15 19C16.3807 19 17.5 20.1193 17.5 21.5Z" style={{ fill: `var(--${type})` }}/>
@@ -42,7 +42,7 @@ export const IconPalette = forwardRef<SVGSVGElement, PaletteProps>(
 ;
   } 
   
-  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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>

package/assets/paperclip/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 PaperclipProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface PaperclipProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconPaperclip = forwardRef<SVGSVGElement, PaperclipProps>(
-  ({ 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.9774 24.3215C9.58143 27.7175 9.58143 33.2234 12.9774 36.6193C16.3733 40.0153 21.8792 40.0153 25.2752 36.6194L38.9684 22.9261L41.7969 25.7545L28.1036 39.4478C23.1456 44.4058 15.107 44.4058 10.149 39.4478C5.19091 34.4897 5.19091 26.4512 10.149 21.4931L24.0147 7.62741C27.5804 4.06169 33.3615 4.0617 36.9272 7.62741C40.493 11.1931 40.493 16.9743 36.9272 20.54L23.3239 34.1433C21.1008 36.3664 17.4965 36.3664 15.2733 34.1433C13.0502 31.9202 13.0502 28.3158 15.2733 26.0927L28.7042 12.6619L31.5326 15.4903L18.1018 28.9212C17.4408 29.5822 17.4408 30.6539 18.1018 31.3149C18.7628 31.9759 19.8345 31.9759 20.4955 31.3149L34.0988 17.7116C36.1024 15.708 36.1024 12.4595 34.0988 10.4558C32.0952 8.45222 28.8467 8.45222 26.8431 10.4558L12.9774 24.3215Z" 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/paragraph/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 ParagraphProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ParagraphProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconParagraph = forwardRef<SVGSVGElement, ParagraphProps>(
-  ({ 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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +22,7 @@ export const IconParagraph = forwardRef<SVGSVGElement, ParagraphProps>(
 </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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>
@@ -30,7 +30,7 @@ export const IconParagraph = forwardRef<SVGSVGElement, ParagraphProps>(
 </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 7H9V11H39V7Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17H9V21H39V17Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27H39V31H9V27Z" style={{ fill: `var(--${type})` }}/>
@@ -39,7 +39,7 @@ export const IconParagraph = forwardRef<SVGSVGElement, ParagraphProps>(
 ;
   } 
   
-  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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/paraphrase/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 ParaphraseProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface ParaphraseProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconParaphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
-  ({ 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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +22,7 @@ export const IconParaphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>
@@ -30,7 +30,7 @@ export const IconParaphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 </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="M31 6H7V10H31V6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15H7V19H31V15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24H21V28H7V24Z" style={{ fill: `var(--${type})` }}/>
@@ -39,7 +39,7 @@ export const IconParaphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/pencil/index.tsx

@@ -1,37 +1,37 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
-interface PencilProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+interface PencilProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconPencil = forwardRef<SVGSVGElement, PencilProps>(
-  ({ 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="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L37.938 19.3987L28.7471 10.2086L31.7619 7.19394Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.6257 12.3298L10.6377 28.3172C10.2484 28.7065 9.95639 29.182 9.7854 29.7053L7.77292 35.8639C6.89145 38.5614 9.41812 41.1314 12.1302 40.2959L18.3957 38.3658C18.9408 38.1979 19.4366 37.8993 19.8399 37.496L35.8167 21.52L26.6257 12.3298Z" 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="M31.408 6.8405C32.97 5.2775 35.5034 5.27707 37.0658 6.83954L41.3066 11.0803C42.8683 12.642 42.8688 15.174 41.3076 16.7362L20.1933 37.8496C19.7323 38.3105 19.1657 38.6517 18.5428 38.8436L12.2772 40.7738C9.1777 41.7286 6.29008 38.7915 7.29747 35.7086L9.30995 29.5499C9.50536 28.9519 9.83908 28.4085 10.284 27.9637L31.408 6.8405ZM28.7484 15.1595L13.1121 30.7924L11.0996 36.951L17.3651 35.0209L32.989 19.4004L28.7484 15.1595ZM35.8171 16.5717L38.4782 13.9087L34.2374 9.66797L31.5765 12.3307L35.8171 16.5717Z" 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="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;