@liner-fe/icon 0.1.0 → 0.1.1

package/assets/bell/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 BellProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBell = forwardRef<SVGSVGElement, BellProps>(
-  ({ 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="M27.0001 7C27.0001 5.34315 25.657 4 24.0001 4C22.3433 4 21.0001 5.34315 21.0001 7V7.35005C15.2667 8.71286 11.0001 13.8957 11.0001 20.0813V30L7.83008 34.6984C6.71807 35.9958 7.63988 38 9.34859 38H38.6517C40.3604 38 41.2822 35.9958 40.1702 34.6984L37.0001 30V20.0813C37.0001 13.8957 32.7335 8.71282 27.0001 7.35003V7ZM34.0001 20.0813V30.9174L36.7547 35H11.2456L14.0001 30.9174V20.0813C14.0001 14.4959 18.4949 10 24.0001 10C29.5054 10 34.0001 14.4959 34.0001 20.0813Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.0001 40H20.0001C20.0001 42.2091 21.791 44 24.0001 44C26.2093 44 28.0001 42.2091 28.0001 40Z" 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="M27.0001 7C27.0001 5.34315 25.657 4 24.0001 4C22.3433 4 21.0001 5.34315 21.0001 7V7.35005C15.2667 8.71286 11.0001 13.8957 11.0001 20.0813V30L7.83008 34.6984C6.71807 35.9958 7.63988 38 9.34859 38H38.6517C40.3604 38 41.2822 35.9958 40.1702 34.6984L37.0001 30V20.0813C37.0001 13.8957 32.7335 8.71282 27.0001 7.35003V7Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.0001 40H20.0001C20.0001 42.2091 21.791 44 24.0001 44C26.2093 44 28.0001 42.2091 28.0001 40Z" 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="M27.0001 7C27.0001 5.34315 25.657 4 24.0001 4C22.3433 4 21.0001 5.34315 21.0001 7V7.35005C15.2667 8.71286 11.0001 13.8957 11.0001 20.0813V30L7.83008 34.6984C6.71807 35.9958 7.63988 38 9.34859 38H38.6517C40.3604 38 41.2822 35.9958 40.1702 34.6984L37.0001 30V20.0813C37.0001 13.8957 32.7335 8.71282 27.0001 7.35003V7ZM15.0001 20.0813C15.0001 15.0423 19.0531 11 24.0001 11C28.9472 11 33.0001 15.0423 33.0001 20.0813V31.2232L34.8737 34H13.1266L15.0001 31.2232V20.0813Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.0001 40H20.0001C20.0001 42.2091 21.791 44 24.0001 44C26.2093 44 28.0001 42.2091 28.0001 40Z" 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="M27.0001 7C27.0001 5.34315 25.657 4 24.0001 4C22.3433 4 21.0001 5.34315 21.0001 7V7.35005C15.2667 8.71286 11.0001 13.8957 11.0001 20.0813V30L7.83008 34.6984C6.71807 35.9958 7.63988 38 9.34859 38H38.6517C40.3604 38 41.2822 35.9958 40.1702 34.6984L37.0001 30V20.0813C37.0001 13.8957 32.7335 8.71282 27.0001 7.35003V7ZM34.0001 20.0813V30.9174L36.7547 35H11.2456L14.0001 30.9174V20.0813C14.0001 14.4959 18.4949 10 24.0001 10C29.5054 10 34.0001 14.4959 34.0001 20.0813Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.0001 40H20.0001C20.0001 42.2091 21.791 44 24.0001 44C26.2093 44 28.0001 42.2091 28.0001 40Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/block/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 BlockProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBlock = forwardRef<SVGSVGElement, BlockProps>(
-  ({ 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C19.8459 41 16.0397 39.51 13.0869 37.0353L37.0353 13.0869C39.51 16.0397 41 19.8459 41 24ZM10.9655 34.914L34.914 10.9655C31.961 8.49031 28.1546 7 24 7C14.6112 7 7 14.6112 7 24C7 28.1546 8.49031 31.961 10.9655 34.914Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C19.8459 41 16.0397 39.51 13.0869 37.0353L37.0353 13.0869C39.51 16.0397 41 19.8459 41 24ZM10.9655 34.914L34.914 10.9655C31.961 8.49031 28.1546 7 24 7C14.6112 7 7 14.6112 7 24C7 28.1546 8.49031 31.961 10.9655 34.914Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM40 24C40 32.8366 32.8366 40 24 40C20.3028 40 16.8985 38.746 14.1892 36.6401L36.6401 14.1892C38.746 16.8985 40 20.3028 40 24ZM11.3607 33.8118L33.8118 11.3607C31.1024 9.25432 27.6977 8 24 8C15.1634 8 8 15.1634 8 24C8 27.6977 9.25432 31.1024 11.3607 33.8118Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM41 24C41 33.3888 33.3888 41 24 41C19.8459 41 16.0397 39.51 13.0869 37.0353L37.0353 13.0869C39.51 16.0397 41 19.8459 41 24ZM10.9655 34.914L34.914 10.9655C31.961 8.49031 28.1546 7 24 7C14.6112 7 7 14.6112 7 24C7 28.1546 8.49031 31.961 10.9655 34.914Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/bolt/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 BoltProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBolt = forwardRef<SVGSVGElement, BoltProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.3576 26.4991L21.8952 38.4829L36.4033 21.4991L24.9545 21.4991L26.4167 9.51529L11.9088 26.4991H23.3576ZM28.4453 2.52166C29.0887 1.76838 30.3182 2.30889 30.1983 3.29229L28.3428 18.4991L40.7422 18.4991C41.5957 18.4991 42.0569 19.4996 41.5025 20.1486L19.8665 45.4765C19.223 46.2298 17.9935 45.6893 18.1135 44.7059L19.9692 29.4991H7.57005C6.71649 29.4991 6.2553 28.4986 6.80969 27.8496L28.4453 2.52166Z" 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.1982 3.29229C30.3182 2.30889 29.0887 1.76838 28.4453 2.52166L6.80969 27.8496C6.2553 28.4986 6.71649 29.4991 7.57005 29.4991H19.9692L18.1135 44.7059C17.9935 45.6893 19.223 46.2298 19.8665 45.4765L41.5025 20.1486C42.0569 19.4996 41.5957 18.4991 40.7422 18.4991L28.3428 18.4991L30.1982 3.29229Z" 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="M24.487 25.4991L23.2897 35.3108L34.2339 22.4991H23.8251L25.0223 12.6873L14.0782 25.4991H24.487ZM28.4453 2.52166C29.0887 1.76838 30.3182 2.30889 30.1983 3.29229L28.3428 18.4991L40.7422 18.4991C41.5957 18.4991 42.0569 19.4996 41.5025 20.1486L19.8665 45.4765C19.223 46.2298 17.9935 45.6893 18.1135 44.7059L19.9692 29.4991H7.57005C6.71649 29.4991 6.2553 28.4986 6.80969 27.8496L28.4453 2.52166Z" 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="M23.3576 26.4991L21.8952 38.4829L36.4033 21.4991L24.9545 21.4991L26.4167 9.51529L11.9088 26.4991H23.3576ZM28.4453 2.52166C29.0887 1.76838 30.3182 2.30889 30.1983 3.29229L28.3428 18.4991L40.7422 18.4991C41.5957 18.4991 42.0569 19.4996 41.5025 20.1486L19.8665 45.4765C19.223 46.2298 17.9935 45.6893 18.1135 44.7059L19.9692 29.4991H7.57005C6.71649 29.4991 6.2553 28.4986 6.80969 27.8496L28.4453 2.52166Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/book/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 BookProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBook = forwardRef<SVGSVGElement, BookProps>(
-  ({ 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="M25.5814 39.0531C27.4473 38.0387 29.9235 37.2286 32.7442 37.2286C35.7959 37.2286 38.4167 38.0225 40.3597 38.8818C41.9032 39.5645 44 38.4644 44 36.7767V13.5247C44 12.4072 43.531 11.3345 42.5861 10.7379C40.8175 9.62124 37.4408 7.9997 32.7442 8C28.4002 8.00027 25.5573 9.73415 23.9926 11.0988C22.416 9.73415 19.5603 8.00027 15.2273 8C10.1925 7.99968 6.67825 9.87271 5.04178 10.9789C4.34848 11.4476 4 12.2473 4 13.0842V36.7699C4 38.4588 6.1001 39.5594 7.64452 38.8759C9.5812 38.0189 12.1904 37.2286 15.2273 37.2286C18.0995 37.2286 20.5891 38.1122 22.4891 39.1143C22.4926 39.1162 22.4962 39.118 22.4998 39.1199C22.8743 39.3281 23.4487 39.6493 23.9951 39.9548C24.5188 39.6611 25.049 39.3425 25.5814 39.0531ZM7 35.8896C9.15192 35.0053 11.9669 34.2286 15.2273 34.2286C18.0296 34.2286 20.4976 34.9198 22.4998 35.7925V13.8067C21.5194 12.812 19.2032 11.0003 15.2271 11C11.2402 10.9997 8.41494 12.3833 7 13.2821V35.8896ZM25.5008 35.7554C25.4702 28.4724 25.5 21.1887 25.5 13.9057C25.5 13.8569 25.5034 13.8182 25.5075 13.7898C26.4753 12.8026 28.7627 11.0003 32.7444 11C36.7004 10.9998 39.5151 12.353 40.9527 13.2546C40.9701 13.2918 41 13.3822 41 13.5247V35.8939C38.842 35.0078 36.017 34.2286 32.7442 34.2286C29.9962 34.2286 27.5289 34.8663 25.5008 35.7554Z" 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="M4 13.066C4 12.2398 4.33953 11.449 5.01952 10.9797C6.62236 9.87361 10.0659 7.99968 15 8C18.1293 8.0002 20.6591 8.94238 22.5 9.98428V39.2278C22.3308 39.1998 22.1971 39.1587 22.1147 39.1143C20.2532 38.1122 17.8141 37.2286 15 37.2286C12.081 37.2286 9.56539 37.9891 7.67948 38.8272C6.12751 39.5168 4 38.4126 4 36.7143V13.066Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 39.2504C25.6749 39.2025 25.843 39.1361 26 39.0531C27.8465 38.0765 30.2434 37.2286 33 37.2286C35.919 37.2286 38.4346 37.9891 40.3205 38.8272C41.8725 39.5168 44 38.4126 44 36.7143V13.4975C44 12.3959 43.5446 11.3365 42.6194 10.7386C40.8913 9.62196 37.5908 7.9997 33 8C29.8707 8.0002 27.3409 8.94238 25.5 9.98429V39.2504Z" 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="M25.9081 39.0992C25.9391 39.0844 25.9698 39.0691 26 39.0531C27.8465 38.0765 30.2434 37.2286 33 37.2286C35.919 37.2286 38.4346 37.9891 40.3205 38.8272C41.8725 39.5168 44 38.4126 44 36.7143V13.4975C44 12.3959 43.5446 11.3365 42.6194 10.7386C40.8913 9.62196 37.5908 7.9997 33 8C28.9085 8.00026 25.842 9.61078 24 10.9491C22.158 9.61078 19.0915 8.00026 15 8C10.0659 7.99968 6.62236 9.87361 5.01952 10.9797C4.33953 11.449 4 12.2398 4 13.066V36.7143C4 38.4126 6.12751 39.5168 7.67948 38.8272C9.56539 37.9891 12.081 37.2286 15 37.2286C17.8141 37.2286 20.2532 38.1122 22.1147 39.1143C22.13 39.1225 22.1471 39.1306 22.1658 39.1386C22.8631 39.5126 23.4781 39.9023 24 40.2671C24.5403 39.8894 25.1803 39.4851 25.9081 39.0992ZM8 34.4096C9.96647 33.7392 12.3367 33.2286 15 33.2286C17.6678 33.2286 20.0359 33.8388 22 34.6418V14.4503C20.6965 13.4225 18.2911 12.0002 14.9997 12C11.7633 11.9998 9.37645 13.0204 8 13.8229V34.4096ZM26 14.4506V34.6418C27.9635 33.839 30.3318 33.2286 33 33.2286C35.6633 33.2286 38.0335 33.7392 40 34.4096V13.8231C38.6206 13.0189 36.2357 11.9998 33.0003 12C29.7155 12.0002 27.3139 13.4148 26 14.4506Z" 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="M25.5814 39.0531C27.4473 38.0387 29.9235 37.2286 32.7442 37.2286C35.7959 37.2286 38.4167 38.0225 40.3597 38.8818C41.9032 39.5645 44 38.4644 44 36.7767V13.5247C44 12.4072 43.531 11.3345 42.5861 10.7379C40.8175 9.62124 37.4408 7.9997 32.7442 8C28.4002 8.00027 25.5573 9.73415 23.9926 11.0988C22.416 9.73415 19.5603 8.00027 15.2273 8C10.1925 7.99968 6.67825 9.87271 5.04178 10.9789C4.34848 11.4476 4 12.2473 4 13.0842V36.7699C4 38.4588 6.1001 39.5594 7.64452 38.8759C9.5812 38.0189 12.1904 37.2286 15.2273 37.2286C18.0995 37.2286 20.5891 38.1122 22.4891 39.1143C22.4926 39.1162 22.4962 39.118 22.4998 39.1199C22.8743 39.3281 23.4487 39.6493 23.9951 39.9548C24.5188 39.6611 25.049 39.3425 25.5814 39.0531ZM7 35.8896C9.15192 35.0053 11.9669 34.2286 15.2273 34.2286C18.0296 34.2286 20.4976 34.9198 22.4998 35.7925V13.8067C21.5194 12.812 19.2032 11.0003 15.2271 11C11.2402 10.9997 8.41494 12.3833 7 13.2821V35.8896ZM25.5008 35.7554C25.4702 28.4724 25.5 21.1887 25.5 13.9057C25.5 13.8569 25.5034 13.8182 25.5075 13.7898C26.4753 12.8026 28.7627 11.0003 32.7444 11C36.7004 10.9998 39.5151 12.353 40.9527 13.2546C40.9701 13.2918 41 13.3822 41 13.5247V35.8939C38.842 35.0078 36.017 34.2286 32.7442 34.2286C29.9962 34.2286 27.5289 34.8663 25.5008 35.7554Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/bookmark/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 BookmarkProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBookmark = forwardRef<SVGSVGElement, BookmarkProps>(
-  ({ 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 28.6309L38 39.0334V8H10V39.0334L24 28.6309ZM24 32.3684L37.8072 42.6276C39.1267 43.6081 41 42.6662 41 41.0223V7C41 5.89543 40.1046 5 39 5H9C7.89543 5 7 5.89543 7 7V41.0223C7 42.6662 8.87326 43.6081 10.1928 42.6276L24 32.3684Z" 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="M7 7C7 5.89543 7.89543 5 9 5H39C40.1046 5 41 5.89543 41 7V41.0223C41 42.6662 39.1267 43.6081 37.8072 42.6276L24 32.3684L10.1928 42.6276C8.87326 43.6081 7 42.6662 7 41.0223L7 7Z" 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="M24 27.3851L37 37.0445V9H11V37.0445L24 27.3851ZM24 32.3684L37.8072 42.6276C39.1267 43.6081 41 42.6662 41 41.0223V7C41 5.89543 40.1046 5 39 5H9C7.89543 5 7 5.89543 7 7V41.0223C7 42.6662 8.87326 43.6081 10.1928 42.6276L24 32.3684Z" 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="M24 28.6309L38 39.0334V8H10V39.0334L24 28.6309ZM24 32.3684L37.8072 42.6276C39.1267 43.6081 41 42.6662 41 41.0223V7C41 5.89543 40.1046 5 39 5H9C7.89543 5 7 5.89543 7 7V41.0223C7 42.6662 8.87326 43.6081 10.1928 42.6276L24 32.3684Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/bookmark-cancel/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 BookmarkCancelProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBookmarkCancel = forwardRef<SVGSVGElement, BookmarkCancelProps>(
-  ({ 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="M3.67651 6.50421L6.50494 3.67578L44.3233 41.4941L41.4949 44.3226L3.67651 6.50421Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.0713 5L41.0001 33.9287V7C41.0001 5.89543 40.1046 5 39.0001 5H12.0713Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.9333 30.004L7.00006 14.0708V40.3711C7.00006 42.1239 9.09444 43.0288 10.3708 41.8275L22.9333 30.004Z" 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="M41.9395 44.0608L44.0608 41.9395L6.06077 3.93945L3.93945 6.06077L41.9395 44.0608Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 5.00023C40.1046 5.00023 41 5.89566 41 7.00023V34.6361L11.3642 5.00023H39Z" style={{ fill: `var(--${type})` }}/>
 <path d="M10.3707 41.8278C9.09438 43.029 7 42.1241 7 40.3714V13.364L23.2975 29.6614L10.3707 41.8278Z" 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="M3.67651 6.50421L6.50494 3.67578L44.3233 41.4941L41.4949 44.3226L39.4847 42.3124C39.4848 42.3123 39.4846 42.3124 39.4847 42.3124L3.67651 6.50421Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41.0001 7V33.9287L37.0001 29.9287V9H16.0713L12.0713 5H39.0001C40.1046 5 41.0001 5.89543 41.0001 7Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7.00006 14.0708L11.0001 18.0708V35.7423L20.1035 27.1743L22.9333 30.004L10.3708 41.8275C9.09444 43.0288 7.00006 42.1239 7.00006 40.3711V14.0708Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconBookmarkCancel = forwardRef<SVGSVGElement, BookmarkCancelProps>
 ;
   } 
   
-  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.9395 44.0608L44.0608 41.9395L6.06077 3.93945L3.93945 6.06077L41.9395 44.0608Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38.0001 8.00023V31.6362L41.0001 34.6362V7.00023C41.0001 5.89566 40.1047 5.00023 39.0001 5.00023H11.3642L14.3642 8.00023H38.0001Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7.00012 40.3714V13.3641L10.0001 16.3641V38.0569L21.1752 27.5392L23.2975 29.6615L10.3709 41.8278C9.0945 43.029 7.00012 42.1241 7.00012 40.3714Z" style={{ fill: `var(--${type})` }}/>

package/assets/books/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 BooksProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBooks = forwardRef<SVGSVGElement, BooksProps>(
-  ({ 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.6061 8.10406L33.3875 5.52516C33.9192 5.36904 34.4764 5.67491 34.6301 6.20723L43.828 38.0625C43.9807 38.5914 43.6772 39.1442 43.149 39.2994L34.3676 41.8783C33.836 42.0344 33.2787 41.7285 33.125 41.1962L23.9271 9.34095C23.7744 8.81204 24.0779 8.25918 24.6061 8.10406Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M5.42578 10.2835H13.0001C13.5523 10.2835 14 10.7312 14 11.2835V40.9541C14 41.5064 13.5523 41.9541 13 41.9541H5.42578C4.8735 41.9541 4.42578 41.5064 4.42578 40.9541V11.2835C4.42578 10.7312 4.8735 10.2835 5.42578 10.2835Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0001 18.7017H24.6265C25.1788 18.7017 25.6265 19.1494 25.6265 19.7017V40.9546C25.6265 41.5069 25.1788 41.9546 24.6265 41.9546H16.0001C15.4478 41.9546 15.0001 41.5069 15.0001 40.9546V19.7017C15.0001 19.1494 15.4478 18.7017 16.0001 18.7017ZM17.9991 23.2915H22.339V26.2915H17.9991V23.2915ZM22.339 34.0894H17.9991V37.0894H22.339V34.0894Z" 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="M33.3876 5.52516L24.6062 8.10406C24.078 8.25918 23.7745 8.81204 23.9272 9.34095L33.1251 41.1962C33.2788 41.7285 33.836 42.0344 34.3676 41.8783L43.1491 39.2994C43.6773 39.1442 43.9807 38.5914 43.828 38.0625L34.6301 6.20723C34.4764 5.67491 33.9192 5.36904 33.3876 5.52516Z" style={{ fill: `var(--${type})` }}/>
 <path d="M13.0001 10.2842H5.42578C4.8735 10.2842 4.42578 10.7319 4.42578 11.2842V40.9548C4.42578 41.5071 4.8735 41.9548 5.42578 41.9548H13C13.5523 41.9548 14 41.5071 14 40.9548V11.2842C14 10.7319 13.5523 10.2842 13.0001 10.2842Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M16.0001 18.7017H24.6266C25.1789 18.7017 25.6266 19.1494 25.6266 19.7017V40.9546C25.6266 41.5069 25.1788 41.9546 24.6266 41.9546H16.0001C15.4478 41.9546 15.0001 41.5069 15.0001 40.9546V19.7017C15.0001 19.1494 15.4478 18.7017 16.0001 18.7017ZM18.2257 23.5181H22.1125V26.065H18.2257V23.5181ZM22.1125 34.316H18.2257V36.8628H22.1125V34.316Z" 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="M20.3906 24.0005H17.6406V26.0005H20.3906V24.0005Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20.3906 34.0005H17.6406V36.0005H20.3906V34.0005Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.0523 10.4133C22.7469 9.35546 23.3538 8.24972 24.4103 7.93948L32.5655 5.54446C33.6288 5.23222 34.7432 5.84397 35.0506 6.90861L43.7371 36.9926C44.0425 38.0504 43.4355 39.1562 42.3791 39.4664L34.2238 41.8614C33.1606 42.1737 32.0462 41.5619 31.7388 40.4973L26.0001 20.6223V40.0009C26.0001 41.1055 25.1046 42.0009 24 42.0009L13.9998 42.0006L13.9887 42.0006H6C4.89543 42.0006 4 41.1051 4 40.0006V12.0005C4 10.8959 4.89543 10.0005 6 10.0005H14C15.1046 10.0005 16 10.8959 16 12.0005V18.0003L24.0001 18.0006C24.5509 18.0006 25.0497 18.2233 25.4114 18.5835L23.0523 10.4133ZM35.0244 37.4574L27.4476 11.2164L31.7649 9.94851L39.3418 36.1895L35.0244 37.4574ZM8 38.0006H11.9998V20.0003L12 19.9753V14.0005H8V38.0006ZM22.0001 38.0008L16 38.0006V22.0004L22.0001 22.0005V38.0008Z" style={{ fill: `var(--${type})` }}/>
@@ -36,7 +36,7 @@ export const IconBooks = forwardRef<SVGSVGElement, BooksProps>(
 ;
   } 
   
-  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.4532 23.4653H21.2734V26.0122H17.4532V23.4653Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.2734 33.7271H17.4532V36.2739H21.2734V33.7271Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24.4103 7.93948C23.3538 8.24972 22.7469 9.35546 23.0523 10.4133L25.4114 18.5836C25.0497 18.2234 24.5509 18.0007 24 18.0007H16V12.0005C16 10.8959 15.1046 10.0005 14 10.0005H6C4.89543 10.0005 4 10.8959 4 12.0005V40.0006C4 41.1051 4.89543 42.0006 6 42.0006H14C14.1724 42.0006 14.3398 41.9787 14.4994 41.9377C14.6594 41.979 14.8272 42.0009 15 42.0009H24C25.1046 42.0009 26 41.1054 26 40.0009V20.6222L31.7388 40.4973C32.0462 41.5619 33.1606 42.1737 34.2238 41.8614L42.3791 39.4664C43.4355 39.1562 44.0425 38.0504 43.7371 36.9926L35.0506 6.90861C34.7432 5.84397 33.6288 5.23222 32.5655 5.54446L24.4103 7.93948ZM26.2107 10.5374L34.3424 38.6999L40.5787 36.8685L32.447 8.70596L26.2107 10.5374ZM7 13.0005V39.0006H13V13.0005H7ZM16 39.0009V21.0007H23V39.0009H16Z" style={{ fill: `var(--${type})` }}/>

package/assets/brain/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 BrainProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBrain = forwardRef<SVGSVGElement, BrainProps>(
-  ({ 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.007 4C16.0376 4 13.5018 5.84766 12.4839 8.45662C9.26078 8.88083 6.98833 11.2127 6.25911 13.4008C5.65555 15.2118 5.73907 16.7761 6.18416 18.2087C4.33081 19.504 3.12788 21.6784 3.00935 24.1124C2.85872 27.2052 4.54058 30.1 7.19648 31.332C7.07945 31.8945 7.00698 32.5229 7.00698 33.2161C7.00698 34.8196 7.67675 36.6966 8.94416 38.1406C10.0008 39.3445 11.5085 40.2805 13.4007 40.4876C13.8256 41.2582 14.403 41.9635 15.0589 42.5402C16.1285 43.4805 17.6063 44.25 19.2927 44.25C20.3808 44.25 21.4756 43.9909 22.459 43.48V4.90897C21.4403 4.3304 20.2622 4 19.007 4Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.459 4.67364V43.6939C27.3204 44.0631 28.2493 44.25 29.1733 44.25C30.8597 44.25 32.3375 43.4805 33.4071 42.5402C34.063 41.9635 34.6403 41.2582 35.0653 40.4876C36.9575 40.2805 38.4652 39.3445 39.5218 38.1406C40.7892 36.6966 41.459 34.8196 41.459 33.2161C41.459 32.5229 41.3865 31.8945 41.2695 31.332C43.9254 30.1 45.6073 27.2052 45.4566 24.1124C45.3381 21.6784 44.1352 19.504 42.2818 18.2087C42.7269 16.7761 42.8104 15.2118 42.2069 13.4008C41.4777 11.2127 39.2052 8.88083 35.9821 8.45662C34.9642 5.84766 32.4284 4 29.459 4C28.3854 4 27.3682 4.24169 26.459 4.67364Z" 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.3588 6.5C23.1501 5.17531 21.4403 4.5 19.7447 4.5C18.212 4.5 16.8468 5.20109 15.841 6.08532C15.1567 6.68693 14.5696 7.43278 14.1685 8.23615C12.2875 8.36748 10.8024 9.26513 9.77192 10.4392C8.58185 11.7951 7.95896 13.5559 7.95896 15.0339C7.95896 15.8158 8.05613 16.5089 8.2053 17.1118C5.43865 18.0937 3.61764 20.9575 3.7693 24.0718C3.88722 26.493 5.14499 28.623 7.0409 29.7931C6.51965 31.245 6.38048 32.8086 6.994 34.6495C7.70268 36.776 10.022 39.089 13.2905 39.3051C14.1506 41.8878 16.5873 43.75 19.459 43.75C21.4144 43.75 23.1682 42.8865 24.3598 41.52C25.5752 42.9965 27.3822 43.75 29.1733 43.75C30.7059 43.75 32.0711 43.0489 33.0769 42.1647C33.7612 41.5631 34.3483 40.8172 34.7495 40.0139C36.6305 39.8825 38.1155 38.9849 39.146 37.8108C40.3361 36.4549 40.959 34.6941 40.959 33.2161C40.959 32.3894 40.8504 31.6621 40.6866 31.0358C43.3601 30.0003 45.1058 27.189 44.9572 24.1372C44.8393 21.716 43.5815 19.586 41.6856 18.4159C42.2069 16.964 42.346 15.4003 41.7325 13.5594C41.0371 11.4728 38.7907 9.20646 35.6184 8.9182C34.7505 6.34939 32.3207 4.5 29.459 4.5C27.6156 4.5 25.9515 5.26733 24.7685 6.5L24.3588 6.5ZM29.459 14.5C31.392 14.5 32.959 12.933 32.959 11C32.959 9.067 31.392 7.5 29.459 7.5C27.526 7.5 25.959 9.067 25.959 11V29.4329C28.2494 29.6553 30.7681 30.9399 32.5884 33.67L30.0923 35.3342C28.8489 33.4693 27.2841 32.6668 25.959 32.458V37.9812C26.2972 39.8637 27.7165 40.75 29.1733 40.75C29.7835 40.75 30.4728 40.4596 31.0961 39.9116C31.7237 39.3598 32.1341 38.6763 32.2683 38.14L32.5813 36.8896L33.8646 37.0109C35.2307 37.14 36.2103 36.6077 36.8913 35.8318C37.6173 35.0046 37.959 33.9415 37.959 33.2161C37.959 32.4684 37.8281 31.8681 37.6667 31.4109C34.986 31.0857 32.8294 29.0472 32.0927 26.4436L34.9793 25.6268C35.4831 27.4072 36.9987 28.5295 38.5837 28.4523C40.4453 28.3617 42.0738 26.6051 41.9608 24.2831C41.87 22.4193 40.7025 21.0169 39.2879 20.6016L37.5257 20.0842L38.3847 18.4608C39.1301 17.0521 39.368 15.953 38.8864 14.508C38.5651 13.5438 37.4934 12.3503 35.8832 11.9954C35.4042 15.1127 32.7104 17.5 29.459 17.5V14.5ZM22.959 37.25V29.8699L22.9325 29.8001C22.9413 29.7967 22.9501 29.7934 22.959 29.7901V18.8276C20.6373 18.6385 18.063 17.3571 16.2114 14.58L18.7075 12.9158C19.988 14.8364 21.6094 15.6302 22.959 15.8092V10.2688C22.6207 8.38628 21.2014 7.5 19.7447 7.5C19.1344 7.5 18.4451 7.79044 17.8218 8.33841C17.1942 8.89017 16.7838 9.5737 16.6496 10.11L16.3366 11.3604L15.0534 11.2391C13.6872 11.11 12.7076 11.6423 12.0266 12.4182C11.3006 13.2454 10.959 14.3085 10.959 15.0339C10.959 15.7733 11.0869 16.3684 11.2458 16.8235C13.8399 17.2183 15.9142 19.2223 16.6338 21.7654L13.7472 22.5822C13.2434 20.8017 11.7278 19.6795 10.1428 19.7567C8.2812 19.8473 6.65267 21.6039 6.76575 23.9259C6.85652 25.7897 8.02399 27.192 9.43857 27.6074L11.2008 28.1248L10.3419 29.7481C9.59645 31.1569 9.35851 32.256 9.84011 33.701C10.174 34.703 11.3183 35.9526 13.0352 36.2514C13.5156 33.1356 16.2087 30.75 19.459 30.75V33.75C17.526 33.75 15.959 35.317 15.959 37.25C15.959 39.183 17.526 40.75 19.459 40.75C21.392 40.75 22.959 39.183 22.959 37.25Z" 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="M19.459 44.25C21.3625 44.25 23.0886 43.4902 24.3505 42.2573C25.6449 43.5756 27.4178 44.25 29.1733 44.25C30.8597 44.25 32.3375 43.4805 33.407 42.5402C34.063 41.9635 34.6403 41.2582 35.0653 40.4876C36.9575 40.2805 38.4652 39.3445 39.5218 38.1406C40.7892 36.6966 41.459 34.8196 41.459 33.2161C41.459 32.5235 41.3866 31.8951 41.2695 31.3321C43.9254 30.1001 45.6072 27.2053 45.4566 24.1124C45.3381 21.6785 44.1351 19.504 42.2818 18.2088C42.7269 16.7762 42.8104 15.2119 42.2068 13.4009C41.4785 11.2156 39.1971 8.87792 35.9816 8.45417C34.9633 5.84696 32.4268 4 29.459 4C27.5555 4 25.8294 4.75979 24.5675 5.99266C23.2731 4.67441 21.5001 4 19.7447 4C18.0583 4 16.5805 4.76953 15.5109 5.7098C14.855 6.28647 14.2776 6.99182 13.8527 7.7624C11.9605 7.96949 10.4528 8.90554 9.39616 10.1094C8.12875 11.5534 7.45898 13.4304 7.45898 15.0339C7.45898 15.6792 7.52184 16.2688 7.62516 16.8017C4.87235 17.9877 3.11607 20.9389 3.26984 24.0966C3.38837 26.5305 4.59131 28.7049 6.44466 30.0002C5.99957 31.4328 5.91605 32.9971 6.5196 34.8081C7.26173 37.0349 9.61648 39.4199 12.929 39.7769C13.9424 42.3941 16.484 44.25 19.459 44.25ZM29.459 14C31.1158 14 32.459 12.6569 32.459 11C32.459 9.34315 31.1158 8 29.459 8C27.8033 8 26.4608 9.3413 26.459 10.9966V28.9916C28.772 29.3459 31.22 30.7163 33.0045 33.3928L29.6764 35.6117C28.6926 34.1363 27.5147 33.3919 26.459 33.0824V37.9352C26.7634 39.526 27.9438 40.25 29.1733 40.25C29.6298 40.25 30.2064 40.028 30.766 39.5361C31.3313 39.0391 31.6779 38.4399 31.7833 38.0186L32.2006 36.3514L33.9116 36.5131C35.0987 36.6253 35.9269 36.1727 36.5155 35.502C37.1642 34.7629 37.459 33.816 37.459 33.2161C37.459 32.677 37.3852 32.2261 37.284 31.8602C34.537 31.3915 32.3676 29.2511 31.6116 26.5793L35.4604 25.4902C35.9096 27.0774 37.2374 28.0168 38.5593 27.9524C40.1082 27.877 41.5629 26.3916 41.4613 24.307C41.3801 22.6381 40.3408 21.4314 39.1471 21.0809L36.7974 20.391L37.9427 18.2265C38.6475 16.8945 38.8369 15.9404 38.412 14.6656C38.174 13.9514 37.4207 13.0491 36.2687 12.628C35.5349 15.7088 32.7645 18 29.459 18V14ZM22.459 37.25L22.459 19.2757C20.1115 18.9504 17.6102 17.5794 15.7953 14.8572L19.1234 12.6383C20.144 14.169 21.3737 14.9129 22.459 15.2006V10.3148C22.1546 8.72404 20.9742 8 19.7447 8C19.2882 8 18.7115 8.222 18.152 8.71393C17.5867 9.21091 17.2401 9.81013 17.1347 10.2314L16.7174 11.8986L15.0064 11.7369C13.8192 11.6247 12.9911 12.0773 12.4024 12.748C11.7537 13.4871 11.459 14.434 11.459 15.0339C11.459 15.5702 11.532 16.0192 11.6323 16.384C14.2892 16.917 16.3764 19.0198 17.1149 21.6297L13.266 22.7188C12.8169 21.1316 11.4891 20.1922 10.1671 20.2565C8.61826 20.332 7.16359 21.8174 7.26511 23.902C7.34638 25.5709 8.38561 26.7776 9.57938 27.1281L11.929 27.818L10.7838 29.9825C10.0789 31.3145 9.88955 32.2686 10.3144 33.5434C10.565 34.2954 11.3869 35.256 12.6441 35.6438C13.3701 32.5519 16.1457 30.25 19.459 30.25V34.25C17.8021 34.25 16.459 35.5931 16.459 37.25C16.459 38.9069 17.8021 40.25 19.459 40.25C21.1158 40.25 22.459 38.9069 22.459 37.25Z" 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="M24.3588 6.5C23.1501 5.17531 21.4403 4.5 19.7447 4.5C18.212 4.5 16.8468 5.20109 15.841 6.08532C15.1567 6.68693 14.5696 7.43278 14.1685 8.23615C12.2875 8.36748 10.8024 9.26513 9.77192 10.4392C8.58185 11.7951 7.95896 13.5559 7.95896 15.0339C7.95896 15.8158 8.05613 16.5089 8.2053 17.1118C5.43865 18.0937 3.61764 20.9575 3.7693 24.0718C3.88722 26.493 5.14499 28.623 7.0409 29.7931C6.51965 31.245 6.38048 32.8086 6.994 34.6495C7.70268 36.776 10.022 39.089 13.2905 39.3051C14.1506 41.8878 16.5873 43.75 19.459 43.75C21.4144 43.75 23.1682 42.8865 24.3598 41.52C25.5752 42.9965 27.3822 43.75 29.1733 43.75C30.7059 43.75 32.0711 43.0489 33.0769 42.1647C33.7612 41.5631 34.3483 40.8172 34.7495 40.0139C36.6305 39.8825 38.1155 38.9849 39.146 37.8108C40.3361 36.4549 40.959 34.6941 40.959 33.2161C40.959 32.3894 40.8504 31.6621 40.6866 31.0358C43.3601 30.0003 45.1058 27.189 44.9572 24.1372C44.8393 21.716 43.5815 19.586 41.6856 18.4159C42.2069 16.964 42.346 15.4003 41.7325 13.5594C41.0371 11.4728 38.7907 9.20646 35.6184 8.9182C34.7505 6.34939 32.3207 4.5 29.459 4.5C27.6156 4.5 25.9515 5.26733 24.7685 6.5L24.3588 6.5ZM29.459 14.5C31.392 14.5 32.959 12.933 32.959 11C32.959 9.067 31.392 7.5 29.459 7.5C27.526 7.5 25.959 9.067 25.959 11V29.4329C28.2494 29.6553 30.7681 30.9399 32.5884 33.67L30.0923 35.3342C28.8489 33.4693 27.2841 32.6668 25.959 32.458V37.9812C26.2972 39.8637 27.7165 40.75 29.1733 40.75C29.7835 40.75 30.4728 40.4596 31.0961 39.9116C31.7237 39.3598 32.1341 38.6763 32.2683 38.14L32.5813 36.8896L33.8646 37.0109C35.2307 37.14 36.2103 36.6077 36.8913 35.8318C37.6173 35.0046 37.959 33.9415 37.959 33.2161C37.959 32.4684 37.8281 31.8681 37.6667 31.4109C34.986 31.0857 32.8294 29.0472 32.0927 26.4436L34.9793 25.6268C35.4831 27.4072 36.9987 28.5295 38.5837 28.4523C40.4453 28.3617 42.0738 26.6051 41.9608 24.2831C41.87 22.4193 40.7025 21.0169 39.2879 20.6016L37.5257 20.0842L38.3847 18.4608C39.1301 17.0521 39.368 15.953 38.8864 14.508C38.5651 13.5438 37.4934 12.3503 35.8832 11.9954C35.4042 15.1127 32.7104 17.5 29.459 17.5V14.5ZM22.959 37.25V29.8699L22.9325 29.8001C22.9413 29.7967 22.9501 29.7934 22.959 29.7901V18.8276C20.6373 18.6385 18.063 17.3571 16.2114 14.58L18.7075 12.9158C19.988 14.8364 21.6094 15.6302 22.959 15.8092V10.2688C22.6207 8.38628 21.2014 7.5 19.7447 7.5C19.1344 7.5 18.4451 7.79044 17.8218 8.33841C17.1942 8.89017 16.7838 9.5737 16.6496 10.11L16.3366 11.3604L15.0534 11.2391C13.6872 11.11 12.7076 11.6423 12.0266 12.4182C11.3006 13.2454 10.959 14.3085 10.959 15.0339C10.959 15.7733 11.0869 16.3684 11.2458 16.8235C13.8399 17.2183 15.9142 19.2223 16.6338 21.7654L13.7472 22.5822C13.2434 20.8017 11.7278 19.6795 10.1428 19.7567C8.2812 19.8473 6.65267 21.6039 6.76575 23.9259C6.85652 25.7897 8.02399 27.192 9.43857 27.6074L11.2008 28.1248L10.3419 29.7481C9.59645 31.1569 9.35851 32.256 9.84011 33.701C10.174 34.703 11.3183 35.9526 13.0352 36.2514C13.5156 33.1356 16.2087 30.75 19.459 30.75V33.75C17.526 33.75 15.959 35.317 15.959 37.25C15.959 39.183 17.526 40.75 19.459 40.75C21.392 40.75 22.959 39.183 22.959 37.25Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/bulb/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 BulbProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBulb = forwardRef<SVGSVGElement, BulbProps>(
-  ({ 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 39.5V42.5H30V39.5H18Z" 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="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 39.5V42.5H30V39.5H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 39V43H30V39H18Z" 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 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>
 <path d="M18 39.5V42.5H30V39.5H18Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/bulb-exclamtionmark/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 BulbExclamtionmarkProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconBulbExclamtionmark = forwardRef<SVGSVGElement, BulbExclamtionmarkProps>(
-  ({ 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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +22,7 @@ export const IconBulbExclamtionmark = forwardRef<SVGSVGElement, BulbExclamtionma
 </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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>
@@ -30,7 +30,7 @@ export const IconBulbExclamtionmark = forwardRef<SVGSVGElement, BulbExclamtionma
 </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 24C23.455 24 22.9669 24.1955 22.5807 24.5821C22.1946 24.9685 22 25.4562 22 26C22 26.5439 22.1946 27.0316 22.5807 27.418C22.9669 27.8045 23.455 28 24 28C24.545 28 25.0331 27.8045 25.4193 27.418C25.8054 27.0316 26 26.5439 26 26C26 25.4562 25.8054 24.9685 25.4193 24.5821C25.0331 24.1955 24.545 24 24 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.9998 12V22H25.9998V12H21.9998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM35 19C35 22.5022 33.3679 25.6208 30.8068 27.6419C29.2724 28.8527 27.7996 30.6858 27.2384 33H20.7616C20.2004 30.6858 18.7276 28.8527 17.1932 27.6419C14.6321 25.6208 13 22.5022 13 19C13 12.9249 17.9249 8 24 8C30.0751 8 35 12.9249 35 19Z" style={{ fill: `var(--${type})` }}/>
@@ -39,7 +39,7 @@ export const IconBulbExclamtionmark = forwardRef<SVGSVGElement, BulbExclamtionma
 ;
   } 
   
-  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 24.25C23.5349 24.25 23.098 24.4224 22.7598 24.7609C22.4216 25.0994 22.25 25.5359 22.25 26C22.25 26.4641 22.4216 26.9006 22.7598 27.2391C23.098 27.5776 23.5349 27.75 24 27.75C24.4651 27.75 24.902 27.5776 25.2402 27.2391C25.5784 26.9006 25.75 26.4641 25.75 26C25.75 25.5359 25.5784 25.0994 25.2402 24.7609C24.902 24.4224 24.4651 24.25 24 24.25Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.4998 12V22H25.4998V12H22.4998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M31 35C31 33.3206 31.9663 31.8223 33.2847 30.7819C36.7656 28.035 39 23.7784 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 23.7784 11.2344 28.035 14.7153 30.7819C16.0337 31.8223 17 33.3206 17 35C17 36.1046 17.8954 37 19 37H29C30.1046 37 31 36.1046 31 35ZM36 19C36 22.8213 34.2173 26.2244 31.4262 28.4269C29.8454 29.6744 28.3909 31.5977 28.0669 34H19.9331C19.6091 31.5977 18.1546 29.6744 16.5738 28.4269C13.7827 26.2244 12 22.8213 12 19C12 12.3726 17.3726 7 24 7C30.6274 7 36 12.3726 36 19Z" style={{ fill: `var(--${type})` }}/>

package/assets/camera/index.tsx

@@ -1,38 +1,38 @@
 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 CameraProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconCamera = forwardRef<SVGSVGElement, CameraProps>(
-  ({ 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="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" 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="M18.1875 8H29.8125C29.9955 8 30.1643 8.10011 30.252 8.26074L32.6836 12.7188L33.1094 13.5H42C42.2761 13.5 42.5 13.7239 42.5 14V39C42.5 39.2761 42.2761 39.5 42 39.5H6C5.72386 39.5 5.5 39.2761 5.5 39V14C5.5 13.7239 5.72386 13.5 6 13.5H14.8906L15.3164 12.7188L17.748 8.26074C17.8357 8.10011 18.0045 8 18.1875 8ZM24 15.5C18.201 15.5 13.5 20.201 13.5 26C13.5 31.799 18.201 36.5 24 36.5C29.799 36.5 34.5 31.799 34.5 26C34.5 20.201 29.799 15.5 24 15.5ZM24 21.5C26.4853 21.5 28.5 23.5147 28.5 26C28.5 28.4853 26.4853 30.5 24 30.5C21.5147 30.5 19.5 28.4853 19.5 26C19.5 23.5147 21.5147 21.5 24 21.5Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="3"/>
 </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="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM29 26C29 28.7614 26.7614 31 24 31C21.2386 31 19 28.7614 19 26C19 23.2386 21.2386 21 24 21C26.7614 21 29 23.2386 29 26Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM16.3745 16L19.3745 10.5H28.6255L31.6255 16H40V37H8V16H16.3745Z" 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="M33 26C33 30.9706 28.9706 35 24 35C19.0294 35 15 30.9706 15 26C15 21.0294 19.0294 17 24 17C28.9706 17 33 21.0294 33 26ZM30 26C30 29.3137 27.3137 32 24 32C20.6863 32 18 29.3137 18 26C18 22.6863 20.6863 20 24 20C27.3137 20 30 22.6863 30 26Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 12H14L16.4315 7.5423C16.7819 6.89977 17.4554 6.5 18.1873 6.5H29.8127C30.5446 6.5 31.2181 6.89977 31.5685 7.5423L34 12H42C43.1046 12 44 12.8954 44 14V39C44 40.1046 43.1046 41 42 41H6C4.89543 41 4 40.1046 4 39V14C4 12.8954 4.89543 12 6 12ZM15.7809 15L18.7809 9.5H29.2191L32.2191 15H41V38H7V15H15.7809Z" style={{ fill: `var(--${type})` }}/>
 </svg>