Generate new icons

README.md

@@ -31,7 +31,15 @@ pnpm add @storybook/icons
 
 ## Generating new icons from Figma
 
-Fetch all icons from Figma locally and create React components + stories automatically:
+First, set local environment variables:
+
+```console
+FIGMA_API_TOKEN=<YOUR_FIGMA_API_TOKEN>
+FIGMA_FILE_ID=<FIGMA_FILE_ID>
+FIGMA_CANVAS=Icons
+```
+
+Then, fetch all icons from Figma locally and create React components + stories automatically:
 
 ```console
 pnpm generate-icons

src/iconList.tsx

@@ -7,6 +7,8 @@ export const iconList = [
       'GridIcon',
       'OutlineIcon',
       'PhotoDragIcon',
+      'PhotoStabilizeIcon',
+      'CameraStabilizeIcon',
       'GridAltIcon',
       'SearchIcon',
       'ZoomIcon',
@@ -16,13 +18,13 @@ export const iconList = [
       'EyeCloseIcon',
       'LightningIcon',
       'LightningOffIcon',
-      'ContrastIcon',
-      'SwitchAltIcon',
       'MirrorIcon',
       'GrowIcon',
+      'ContrastIcon',
+      'SwitchAltIcon',
+      'ContrastIgnoredIcon',
       'PaintBrushIcon',
       'RulerIcon',
-      'StopIcon',
       'CameraIcon',
       'VideoIcon',
       'SpeakerIcon',
@@ -32,13 +34,14 @@ export const iconList = [
       'RewindIcon',
       'FastForwardIcon',
       'StopAltIcon',
+      'SunIcon',
+      'MoonIcon',
       'StopAltHollowIcon',
       'PlayHollowIcon',
       'PlayAllHollowIcon',
+      'StopIcon',
       'SideBySideIcon',
       'StackedIcon',
-      'SunIcon',
-      'MoonIcon',
     ]
   },
   {
@@ -225,6 +228,7 @@ export const iconList = [
       'CloudIcon',
       'StickerIcon',
       'StatusFailIcon',
+      'StatusIcon',
       'StatusWarnIcon',
       'StatusPassIcon',
     ]
@@ -291,6 +295,7 @@ export const iconList = [
       'FaceSadIcon',
       'AccessibilityIcon',
       'AccessibilityAltIcon',
+      'AccessibilityIgnoredIcon',
     ]
   },
 ];

src/icons/AccessibilityAltIcon.tsx

@@ -9,7 +9,7 @@ export const AccessibilityAltIcon = /* @__PURE__ */ React.forwardRef<
     <svg
       width={size}
       height={size}
-      viewBox="0 0 15 14"
+      viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       ref={forwardedRef}

src/icons/AccessibilityIgnoredIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccessibilityIgnoredIcon } from './AccessibilityIgnoredIcon';
+
+const meta: Meta<typeof AccessibilityIgnoredIcon> = {
+  component: AccessibilityIgnoredIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessibilityIgnoredIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/AccessibilityIgnoredIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const AccessibilityIgnoredIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <g clipPath="url(#prefix__clip0_2359_558)" fill={color}>
+        <path d="M7.636 13.972a7 7 0 116.335-6.335c-.28-.34-.609-.637-.976-.883a6 6 0 10-6.24 6.241c.245.367.542.696.881.977z" />
+        <path d="M7.511 7.136a4.489 4.489 0 00-1.478 3.915l-.086.173a.5.5 0 11-.894-.447l.972-1.945A4.5 4.5 0 006.5 6.82v-.243a.3.3 0 00-.205-.285l-2.453-.818a.5.5 0 01.316-.948l2.051.684a2.5 2.5 0 001.582 0l2.05-.684a.5.5 0 01.317.948l-2.453.818a.3.3 0 00-.205.285v.243c0 .105.004.21.011.316z" />
+        <path d="M8 3.5a1 1 0 11-2 0 1 1 0 012 0z" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14 10.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-5.5 0A.5.5 0 019 10h3a.5.5 0 010 1H9a.5.5 0 01-.5-.5z"
+        />
+      </g>
+      <defs>
+        <clipPath id="prefix__clip0_2359_558">
+          <path fill="#fff" d="M0 0h14v14H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});

src/icons/CameraStabilizeIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CameraStabilizeIcon } from './CameraStabilizeIcon';
+
+const meta: Meta<typeof CameraStabilizeIcon> = {
+  component: CameraStabilizeIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof CameraStabilizeIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/CameraStabilizeIcon.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const CameraStabilizeIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <g clipPath="url(#prefix__clip0_2484_400)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.5 1A1.5 1.5 0 001 2.5v1a.5.5 0 01-1 0v-1A2.5 2.5 0 012.5 0h1a.5.5 0 010 1h-1zm3.352 1.223A.5.5 0 016.268 2h1.464a.5.5 0 01.416.223L9.333 4H11.5a.5.5 0 01.5.5v5a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5h2.167l1.185-1.777zM11.5 1A1.5 1.5 0 0113 2.5v1a.5.5 0 001 0v-1A2.5 2.5 0 0011.5 0h-1a.5.5 0 000 1h1zm-9 12A1.5 1.5 0 011 11.5v-1a.5.5 0 00-1 0v1A2.5 2.5 0 002.5 14h1a.5.5 0 000-1h-1zm9 0a1.5 1.5 0 001.5-1.5v-1a.5.5 0 011 0v1a2.5 2.5 0 01-2.5 2.5h-1a.5.5 0 010-1h1zM8 7a1 1 0 11-2 0 1 1 0 012 0zm1 0a2 2 0 11-4 0 2 2 0 014 0z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="prefix__clip0_2484_400">
+          <path fill="#fff" d="M0 0h14v14H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});

src/icons/ContrastIgnoredIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ContrastIgnoredIcon } from './ContrastIgnoredIcon';
+
+const meta: Meta<typeof ContrastIgnoredIcon> = {
+  component: ContrastIgnoredIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof ContrastIgnoredIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/ContrastIgnoredIcon.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const ContrastIgnoredIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <g
+        clipPath="url(#prefix__clip0_2359_559)"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={color}
+      >
+        <path d="M3 3.004H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h7.176a4.526 4.526 0 01-.916-1H1v-9h2v6.5a.499.499 0 00.497.5h2.531a4.548 4.548 0 01-.001-1h-1.32l2.16-2.16c.274-.374.603-.703.977-.977L10 4.711v1.316a4.552 4.552 0 011 0V3.504a.48.48 0 00-.038-.191.5.5 0 00-.462-.31H4v-2h9v5.755c.378.253.715.561 1 .913V.504a.5.5 0 00-.5-.5h-10a.5.5 0 00-.5.5v2.5zm1 1v2.293l2.293-2.293H4zm5.293 0H7.707L4 7.71v1.586l5.293-5.293z" />
+        <path d="M14 10.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-5.5 0A.5.5 0 019 10h3a.5.5 0 010 1H9a.5.5 0 01-.5-.5z" />
+      </g>
+      <defs>
+        <clipPath id="prefix__clip0_2359_559">
+          <path fill="#fff" d="M0 0h14v14H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});

src/icons/PhotoStabilizeIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PhotoStabilizeIcon } from './PhotoStabilizeIcon';
+
+const meta: Meta<typeof PhotoStabilizeIcon> = {
+  component: PhotoStabilizeIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof PhotoStabilizeIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/PhotoStabilizeIcon.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const PhotoStabilizeIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        d="M2.5 1H4V0H2.5A2.5 2.5 0 000 2.5V4h1V2.5A1.5 1.5 0 012.5 1z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 5.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zm-.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-9a.5.5 0 01.5-.5h9a.5.5 0 01.5.5zM3 8.793V3h8v3.793L9.854 5.646a.5.5 0 00-.708 0L6.5 8.293 5.354 7.146a.5.5 0 00-.708 0L3 8.793zm6.5-2.086l1.5 1.5V11H3v-.793l2-2 2.146 2.147a.5.5 0 00.708-.708L7.207 9 9.5 6.707z"
+        fill={color}
+      />
+      <path
+        d="M10 1h1.5A1.5 1.5 0 0113 2.5V4h1V2.5A2.5 2.5 0 0011.5 0H10v1zM2.5 13H4v1H2.5A2.5 2.5 0 010 11.5V10h1v1.5A1.5 1.5 0 002.5 13zM10 13h1.5a1.5 1.5 0 001.5-1.5V10h1v1.5a2.5 2.5 0 01-2.5 2.5H10v-1z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/StatusIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { StatusIcon } from './StatusIcon';
+
+const meta: Meta<typeof StatusIcon> = {
+  component: StatusIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/StatusIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const StatusIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <circle cx={7} cy={7} r={3} fill={color} />
+    </svg>
+  );
+});

src/icons/WandIcon.tsx

@@ -16,13 +16,13 @@ export const WandIcon = /* @__PURE__ */ React.forwardRef<
       {...props}
     >
       <path
-        d="M5.903.112a.107.107 0 01.194 0l.233.505.552.066c.091.01.128.123.06.185l-.408.377.109.546a.107.107 0 01-.158.114L6 1.634l-.485.271a.107.107 0 01-.158-.114l.108-.546-.408-.377a.107.107 0 01.06-.185L5.67.617l.233-.505zM2.194.224a.214.214 0 00-.389 0l-.466 1.01-1.104.131a.214.214 0 00-.12.37l.816.755-.217 1.091a.214.214 0 00.315.23L2 3.266l.971.543c.16.09.35-.05.315-.229l-.216-1.09.816-.756a.214.214 0 00-.12-.37L2.66 1.234 2.194.224zM12.194 8.224a.214.214 0 00-.389 0l-.466 1.01-1.104.13a.214.214 0 00-.12.371l.816.755-.217 1.091a.214.214 0 00.315.23l.97-.544.971.543c.16.09.35-.05.315-.229l-.216-1.09.816-.756a.214.214 0 00-.12-.37l-1.105-.131-.466-1.01z"
+        d="M5.903.112a.107.107 0 01.194 0l.233.505.552.066c.091.01.128.123.06.185l-.408.377.109.546a.107.107 0 01-.158.114L6 1.633l-.486.272a.107.107 0 01-.157-.114l.108-.546-.408-.377a.107.107 0 01.06-.185L5.67.617l.233-.505zM2.194.224a.214.214 0 00-.389 0l-.466 1.01-1.104.13a.214.214 0 00-.12.371l.816.755-.217 1.091a.214.214 0 00.315.23L2 3.266l.971.543c.16.09.35-.05.315-.229l-.217-1.09.817-.756a.214.214 0 00-.12-.37L2.66 1.234 2.194.224zM12.194 8.224a.214.214 0 00-.389 0l-.466 1.01-1.104.13a.214.214 0 00-.12.371l.816.755-.217 1.091a.214.214 0 00.315.23l.97-.544.971.543c.16.09.35-.05.315-.229l-.217-1.09.817-.756a.214.214 0 00-.12-.37l-1.105-.131-.466-1.01z"
         fill={color}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M2.5 12.797l-1.293-1.293 6.758-6.758L9.258 6.04 2.5 12.797zm7.465-7.465l2.828-2.828L11.5 1.211 8.672 4.04l1.293 1.293zM.147 11.857a.5.5 0 010-.707l11-11a.5.5 0 01.706 0l2 2a.5.5 0 010 .708l-11 11a.5.5 0 01-.706 0l-2-2z"
+        d="M.147 11.857a.5.5 0 010-.707l11-11a.5.5 0 01.706 0l2 2a.5.5 0 010 .708l-11 11a.5.5 0 01-.706 0l-2-2zm2.353.94l-1.293-1.293 6.758-6.758L9.258 6.04 2.5 12.797zm7.465-7.465l2.828-2.828L11.5 1.211 8.672 4.039l1.293 1.293z"
         fill={color}
       />
     </svg>

src/index.ts

@@ -5,6 +5,8 @@ export { ComponentIcon } from './icons/ComponentIcon';
 export { GridIcon } from './icons/GridIcon';
 export { OutlineIcon } from './icons/OutlineIcon';
 export { PhotoDragIcon } from './icons/PhotoDragIcon';
+export { PhotoStabilizeIcon } from './icons/PhotoStabilizeIcon';
+export { CameraStabilizeIcon } from './icons/CameraStabilizeIcon';
 export { GridAltIcon } from './icons/GridAltIcon';
 export { SearchIcon } from './icons/SearchIcon';
 export { ZoomIcon } from './icons/ZoomIcon';
@@ -14,13 +16,13 @@ export { EyeIcon } from './icons/EyeIcon';
 export { EyeCloseIcon } from './icons/EyeCloseIcon';
 export { LightningIcon } from './icons/LightningIcon';
 export { LightningOffIcon } from './icons/LightningOffIcon';
-export { ContrastIcon } from './icons/ContrastIcon';
-export { SwitchAltIcon } from './icons/SwitchAltIcon';
 export { MirrorIcon } from './icons/MirrorIcon';
 export { GrowIcon } from './icons/GrowIcon';
+export { ContrastIcon } from './icons/ContrastIcon';
+export { SwitchAltIcon } from './icons/SwitchAltIcon';
+export { ContrastIgnoredIcon } from './icons/ContrastIgnoredIcon';
 export { PaintBrushIcon } from './icons/PaintBrushIcon';
 export { RulerIcon } from './icons/RulerIcon';
-export { StopIcon } from './icons/StopIcon';
 export { CameraIcon } from './icons/CameraIcon';
 export { VideoIcon } from './icons/VideoIcon';
 export { SpeakerIcon } from './icons/SpeakerIcon';
@@ -30,13 +32,14 @@ export { PlayNextIcon } from './icons/PlayNextIcon';
 export { RewindIcon } from './icons/RewindIcon';
 export { FastForwardIcon } from './icons/FastForwardIcon';
 export { StopAltIcon } from './icons/StopAltIcon';
+export { SunIcon } from './icons/SunIcon';
+export { MoonIcon } from './icons/MoonIcon';
 export { StopAltHollowIcon } from './icons/StopAltHollowIcon';
 export { PlayHollowIcon } from './icons/PlayHollowIcon';
 export { PlayAllHollowIcon } from './icons/PlayAllHollowIcon';
+export { StopIcon } from './icons/StopIcon';
 export { SideBySideIcon } from './icons/SideBySideIcon';
 export { StackedIcon } from './icons/StackedIcon';
-export { SunIcon } from './icons/SunIcon';
-export { MoonIcon } from './icons/MoonIcon';
 export { BookIcon } from './icons/BookIcon';
 export { DocumentIcon } from './icons/DocumentIcon';
 export { CopyIcon } from './icons/CopyIcon';
@@ -183,6 +186,7 @@ export { CloudHollowIcon } from './icons/CloudHollowIcon';
 export { CloudIcon } from './icons/CloudIcon';
 export { StickerIcon } from './icons/StickerIcon';
 export { StatusFailIcon } from './icons/StatusFailIcon';
+export { StatusIcon } from './icons/StatusIcon';
 export { StatusWarnIcon } from './icons/StatusWarnIcon';
 export { StatusPassIcon } from './icons/StatusPassIcon';
 export { ChevronUpIcon } from './icons/ChevronUpIcon';
@@ -239,3 +243,4 @@ export { FaceNeutralIcon } from './icons/FaceNeutralIcon';
 export { FaceSadIcon } from './icons/FaceSadIcon';
 export { AccessibilityIcon } from './icons/AccessibilityIcon';
 export { AccessibilityAltIcon } from './icons/AccessibilityAltIcon';
+export { AccessibilityIgnoredIcon } from './icons/AccessibilityIgnoredIcon';