Merge pull request #140 from 8845musign/add-alias-to-icon-size-token

Unify Icon component size specification with other components

src/components/Icon/Icon.stories.tsx

@@ -26,6 +26,19 @@ export const Size: Story = {
         <Icon {...args} size="md" />
         <Icon {...args} size="lg" />
         <Icon {...args} size="xl" />
+        <Icon {...args} size="xxl" />
+        <Icon {...args} size="xxxl" />
+        <Icon {...args} size="xxxxl" />
+      </Flex>
+    </>
+  ),
+  args: defaultArgs,
+};
+
+export const SizeAlias: Story = {
+  render: (args) => (
+    <>
+      <Flex alignItems="center" spacing="sm">
         <Icon {...args} size="2xl" />
         <Icon {...args} size="3xl" />
         <Icon {...args} size="4xl" />

src/components/Icon/Icon.tsx

@@ -6,7 +6,11 @@ import { TextColor } from '../../types/style';
 import { colorVariable } from '../../utils/style';
 import type { CSSProperties, FC } from 'react';
 
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+type Icon = keyof typeof Icons;
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+type IconSizeAlias = '2xl' | '3xl' | '4xl';
+type SizeProp = IconSize | IconSizeAlias;
 
 const toIconSizeEmValue = (size: IconSize): string => {
   switch (size) {
@@ -20,11 +24,11 @@ const toIconSizeEmValue = (size: IconSize): string => {
       return '1.75rem';
     case 'xl':
       return '2rem';
-    case '2xl':
+    case 'xxl':
       return '4rem';
-    case '3xl':
+    case 'xxxl':
       return '5rem';
-    case '4xl':
+    case 'xxxxl':
       return '6.5rem';
     default:
       // eslint-disable-next-line no-case-declarations
@@ -33,6 +37,19 @@ const toIconSizeEmValue = (size: IconSize): string => {
   }
 };
 
+const normalizeSize = (icon: IconSize | IconSizeAlias): IconSize => {
+  switch (icon) {
+    case '2xl':
+      return 'xxl';
+    case '3xl':
+      return 'xxxl';
+    case '4xl':
+      return 'xxxxl';
+    default:
+      return icon;
+  }
+};
+
 type Props = {
   /**
    * アイコンの種類
@@ -44,10 +61,11 @@ type Props = {
   color?: TextColor;
   /**
    * サイズ
-   * xs=16px, sm=20px, md=24px, lg=28px, xl=32px, 2xl=64px, 3xl=80px, 4xl=104px
+   * xs=16px, sm=20px, md=24px, lg=28px, xl=32px, xxl=64px, xxxl=80px, xxxxl=104px
+   * 2xl、3xl、4xlはdeprecatedな指定となります
    * @default md
    */
-  size?: IconSize;
+  size?: SizeProp;
   /**
    * ネイティブの`id`属性。ページで固有のIDを指定
    */
@@ -64,7 +82,7 @@ type Props = {
  */
 export const Icon: FC<Props> = ({ icon, color, size = 'md', label, ...otherProps }) => {
   const IconComponent = Icons[icon];
-  const _sizeValue = toIconSizeEmValue(size);
+  const _sizeValue = toIconSizeEmValue(normalizeSize(size));
   return (
     <IconComponent
       role="img"