@liner-fe/icon 0.1.0 → 0.1.1

package/assets/zoom-in/index.tsx

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

package/assets/zoom-out/index.tsx

@@ -1,39 +1,39 @@
 import React, { forwardRef } from 'react';
-import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
 import { SVGProps } from 'react';
 
 interface ZoomOutProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
-  size?: number
+  size?: keyof typeof iconSizeMap;
   type?: BasicColorType;
   fillType?: BasicColorType;
 }
 
 export const IconZoomOut = forwardRef<SVGSVGElement, ZoomOutProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+    return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M28.0007 19L14 19V23H28.0007V19Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.4211 36 27.5746 34.8547 30.0982 32.9267L39.0858 41.9142L41.9142 39.0858L32.9267 30.0982C34.8547 27.5746 36 24.4211 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 32C27.0751 32 32 27.0751 32 21C32 14.9249 27.0751 10 21 10C14.9249 10 10 14.9249 10 21C10 27.0751 14.9249 32 21 32Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
+  return <svg width={iconSizeMap[size]} height={iconSizeMap[size]} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M28.0007 19.5L14 19.5V22.5H28.0007V19.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M21 36C24.6019 36 27.9073 34.7305 30.4931 32.6144L39.4393 41.5607L41.5607 39.4393L32.6144 30.4931C34.7305 27.9073 36 24.6019 36 21C36 12.7157 29.2843 6 21 6C12.7157 6 6 12.7157 6 21C6 29.2843 12.7157 36 21 36ZM21 33C27.6274 33 33 27.6274 33 21C33 14.3726 27.6274 9 21 9C14.3726 9 9 14.3726 9 21C9 27.6274 14.3726 33 21 33Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/index.tsx

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