From 70445d5d32fc24450dee2ffd1b5ac0bac248fbea Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Wed, 22 Jan 2025 15:04:24 -0500 Subject: [PATCH 1/2] Generate new icons --- src/iconList.tsx | 15 ++++--- src/icons/AccessibilityAltIcon.tsx | 2 +- src/icons/AccessibilityIgnoredIcon.stories.ts | 12 ++++++ src/icons/AccessibilityIgnoredIcon.tsx | 35 ++++++++++++++++ src/icons/CameraStabilizeIcon.stories.ts | 12 ++++++ src/icons/CameraStabilizeIcon.tsx | 33 +++++++++++++++ src/icons/ContrastIgnoredIcon.stories.ts | 12 ++++++ src/icons/ContrastIgnoredIcon.tsx | 34 ++++++++++++++++ src/icons/PhotoStabilizeIcon.stories.ts | 12 ++++++ src/icons/PhotoStabilizeIcon.tsx | 40 +++++++++++++++++++ src/icons/StatusIcon.stories.ts | 12 ++++++ src/icons/StatusIcon.tsx | 21 ++++++++++ src/icons/WandIcon.tsx | 4 +- src/index.ts | 15 ++++--- 14 files changed, 246 insertions(+), 13 deletions(-) create mode 100644 src/icons/AccessibilityIgnoredIcon.stories.ts create mode 100644 src/icons/AccessibilityIgnoredIcon.tsx create mode 100644 src/icons/CameraStabilizeIcon.stories.ts create mode 100644 src/icons/CameraStabilizeIcon.tsx create mode 100644 src/icons/ContrastIgnoredIcon.stories.ts create mode 100644 src/icons/ContrastIgnoredIcon.tsx create mode 100644 src/icons/PhotoStabilizeIcon.stories.ts create mode 100644 src/icons/PhotoStabilizeIcon.tsx create mode 100644 src/icons/StatusIcon.stories.ts create mode 100644 src/icons/StatusIcon.tsx diff --git a/src/iconList.tsx b/src/iconList.tsx index c2d5ba7..d1eb222 100644 --- a/src/iconList.tsx +++ b/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', ] }, ]; diff --git a/src/icons/AccessibilityAltIcon.tsx b/src/icons/AccessibilityAltIcon.tsx index 455c4c4..50a6720 100644 --- a/src/icons/AccessibilityAltIcon.tsx +++ b/src/icons/AccessibilityAltIcon.tsx @@ -9,7 +9,7 @@ export const AccessibilityAltIcon = /* @__PURE__ */ React.forwardRef< = { + component: AccessibilityIgnoredIcon, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { size: 100 } }; diff --git a/src/icons/AccessibilityIgnoredIcon.tsx b/src/icons/AccessibilityIgnoredIcon.tsx new file mode 100644 index 0000000..bc9d9fa --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + ); +}); diff --git a/src/icons/CameraStabilizeIcon.stories.ts b/src/icons/CameraStabilizeIcon.stories.ts new file mode 100644 index 0000000..0be36e6 --- /dev/null +++ b/src/icons/CameraStabilizeIcon.stories.ts @@ -0,0 +1,12 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { CameraStabilizeIcon } from './CameraStabilizeIcon'; + +const meta: Meta = { + component: CameraStabilizeIcon, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { size: 100 } }; diff --git a/src/icons/CameraStabilizeIcon.tsx b/src/icons/CameraStabilizeIcon.tsx new file mode 100644 index 0000000..5f9ffbb --- /dev/null +++ b/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 ( + + + + + + + + + + + ); +}); diff --git a/src/icons/ContrastIgnoredIcon.stories.ts b/src/icons/ContrastIgnoredIcon.stories.ts new file mode 100644 index 0000000..78160db --- /dev/null +++ b/src/icons/ContrastIgnoredIcon.stories.ts @@ -0,0 +1,12 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ContrastIgnoredIcon } from './ContrastIgnoredIcon'; + +const meta: Meta = { + component: ContrastIgnoredIcon, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { size: 100 } }; diff --git a/src/icons/ContrastIgnoredIcon.tsx b/src/icons/ContrastIgnoredIcon.tsx new file mode 100644 index 0000000..ccdd88c --- /dev/null +++ b/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 ( + + + + + + + + + + + + ); +}); diff --git a/src/icons/PhotoStabilizeIcon.stories.ts b/src/icons/PhotoStabilizeIcon.stories.ts new file mode 100644 index 0000000..c7a7f39 --- /dev/null +++ b/src/icons/PhotoStabilizeIcon.stories.ts @@ -0,0 +1,12 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { PhotoStabilizeIcon } from './PhotoStabilizeIcon'; + +const meta: Meta = { + component: PhotoStabilizeIcon, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { size: 100 } }; diff --git a/src/icons/PhotoStabilizeIcon.tsx b/src/icons/PhotoStabilizeIcon.tsx new file mode 100644 index 0000000..3650bf7 --- /dev/null +++ b/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 ( + + + + + + + ); +}); diff --git a/src/icons/StatusIcon.stories.ts b/src/icons/StatusIcon.stories.ts new file mode 100644 index 0000000..6105216 --- /dev/null +++ b/src/icons/StatusIcon.stories.ts @@ -0,0 +1,12 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { StatusIcon } from './StatusIcon'; + +const meta: Meta = { + component: StatusIcon, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { args: { size: 100 } }; diff --git a/src/icons/StatusIcon.tsx b/src/icons/StatusIcon.tsx new file mode 100644 index 0000000..d6b7aa1 --- /dev/null +++ b/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 ( + + + + ); +}); diff --git a/src/icons/WandIcon.tsx b/src/icons/WandIcon.tsx index 8d16355..f2d5774 100644 --- a/src/icons/WandIcon.tsx +++ b/src/icons/WandIcon.tsx @@ -16,13 +16,13 @@ export const WandIcon = /* @__PURE__ */ React.forwardRef< {...props} > diff --git a/src/index.ts b/src/index.ts index 18fbdf9..74dbcef 100644 --- a/src/index.ts +++ b/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'; From 6254f5bb15c9c1cdbada6e610834b33b98267bc4 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Wed, 22 Jan 2025 15:08:09 -0500 Subject: [PATCH 2/2] Include env setup in README --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 79078d5..eef140a 100644 --- a/README.md +++ b/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= +FIGMA_FILE_ID= +FIGMA_CANVAS=Icons +``` + +Then, fetch all icons from Figma locally and create React components + stories automatically: ```console pnpm generate-icons