diff --git a/apps/docs/src/stories/Icons.stories.tsx b/apps/docs/src/stories/Icons.stories.tsx index 5b3ee416..c040f9df 100644 --- a/apps/docs/src/stories/Icons.stories.tsx +++ b/apps/docs/src/stories/Icons.stories.tsx @@ -1,4 +1,55 @@ -import * as Icons from '@sopt-makers/icons'; +import { + Communication, + Editor, + Feedback, + Files, + General, + Interaction, + Media, + Time, + Users, + Logo, +} from '@sopt-makers/icons'; + +// icon 카테고리 추가시 이곳에 추가 +const iconCategories = [ + { name: 'Communication', icons: Communication }, + { name: 'Editor', icons: Editor }, + { name: 'Feedback', icons: Feedback }, + { name: 'Files', icons: Files }, + { name: 'General', icons: General }, + { name: 'Interaction', icons: Interaction }, + { name: 'Media', icons: Media }, + { name: 'Time', icons: Time }, + { name: 'Users', icons: Users }, + { name: 'Logo', icons: Logo }, +]; + +const convertIconNameToKebabCase = (iconName: string): string => { + const withoutIconPrefix = iconName.replace(/^Icon/, ''); + + return withoutIconPrefix + .replace(/([A-Z])/g, '-$1') + .toLowerCase() + .replace(/^-/, ''); +}; + +const IconGenerator = ({ + IconComponent, + style, + iconName, +}: { + IconComponent: React.ComponentType>; + style: React.CSSProperties; + iconName: string; +}) => { + return ( +
+ +

{convertIconNameToKebabCase(iconName)}

+
+ ); +}; export const Default = { argTypes: { @@ -9,665 +60,19 @@ export const Default = { return (
-
-

Communication

-
- -

archive

-
-
- -

birthday-primary

-
-
- -

birthday-secondary

-
-
- -

bookmark

-
-
- -

edit

-
-
- -

eye-off

-
-
- -

eye

-
-
- -

mail

-
-
- -

mento

-
-
- -

message-alert

-
-
- -

message-chat

-
-
- -

message-check

-
-
- -

message-dots

-
-
- -

message-plus

-
-
- -

message-question

-
-
- -

message-square

-
-
- -

message-text

-
-
- -

message-x

-
-
- -

phone

{' '} -
-
- -

pin

-
-
- -

send

-
-
- -

location

-
-
- -

location-filled

-
-
- -
-

Editor

-
- -

align-center

-
-
- -

align-justify

-
-
- -

align-left

-
-
- -

align-right

-
-
- -

attachment

-
-
- -

bold

-
-
- -

code

-
-
- -

delete

-
-
- -

dotpoints

-
-
- -

italic

-
-
- -

left-indent

-
-
- -

letter-spacing

-
-
- -

line-height

-
-
- -

paragraph-spacing

-
-
- -

paragraph-wrap

-
-
- -

right-indent

-
-
- -

type-strikethrough

-
-
- -

type

-
-
- -

underline

-
-
- -

write

-
-
- -

zoom-in

-
-
- -

zoom-out

-
-
- -
-

Feedback

-
- -

alert-circle

-
-
- -

alert-triangle

-
-
- -

bell-active

-
-
- -

bell-off

-
-
- -

bell

-
-
- -

help-circle

-
-
- -

info-circle

-
-
- -

thumbs-down

-
-
- -

thumbs-up

-
-
- -
-

Files

-
- -

file-check

-
-
- -

file-download

-
-
- -

file-minus

-
-
- -

file-plus

-
-
- -

file-search

-
-
- -

file-text

-
-
- -

file-x

-
-
- -

file

-
-
- -

folder-check

-
-
- -

folder-download

-
-
- -

folder

-
-
- -
-

General

-
- -

icon-copy

-
-
- -

dots-vertical

-
-
- -

download-cloud

-
-
- -

home

-
-
- -

link

-
-
- -

lock

-
-
- -

log-in

-
-
- -

log-out

-
-
- -

menu

-
-
- -

search

-
-
- -

settings

-
-
- -

share

-
-
- -

sliders

-
-
- -

trash

-
-
- -

unlocked

-
-
- -

upload-cloud

-
-
- -
-

Interaction

-
- -

arrow-down-left

-
-
- -

arrow-down-right

-
-
- -

arrow-down

-
-
- -

arrow-left

-
-
- -

arrow-right

-
-
- -

arrow-up-left

-
-
- -

arrow-up-right

-
-
- -

arrow-up

-
-
- -

check-circle

-
-
- -

check-square

-
-
- -

check

-
-
- -

chevron-down

-
-
- -

chevron-left

-
-
- -

chevron-right

-
-
- -

chevron-up

-
-
- -

flip-backward

-
-
- -

flip-forward

-
-
- -

heart

-
-
- -

plus-circle

-
-
- -

plus-square

-
-
- -

plus

-
-
- -

refresh

-
-
- -

switch-horizontal

-
-
- -

switch-vertical

-
-
- -

x-circle

-
-
- -

x-close

-
-
- -
-

Media

-
- -

camera-off

-
-
- -

camera-plus

-
-
- -

camera

-
-
- -

image-check

-
-
- -

image-down

-
-
- -

image-left

-
-
- -

image-plus

-
-
- -

image-right

-
-
- -

image-up

-
-
- -

image

-
-
- -

power

-
-
- -

repeat

-
-
- -

video-off

-
-
- -

video

-
-
- -
-

Time

-
- -

alarm-clock-check

-
-
- -

alarm-clock-minus

-
-
- -

alarm-clock-off

-
-
- -

alarm-clock-plus

-
-
- -

alarm-clock

-
-
- -

calendar-check

-
-
- -

calendar-date

-
-
- -

calendar-plus

-
-
- -

calendar

-
-
- -

clock-check

-
-
- -

clock-plus

-
-
- -

clock-snooze

-
-
- -

clock

-
-
- -
-

Users

-
- -

user-check

-
-
- -

user-edit

-
-
- -

user-minus

-
-
- -

user-plus

-
-
- -

user-x

-
-
- -

user

-
-
- -

users-check

-
-
- -

users-minus

-
-
- -

users-plus

-
-
- -

users-x

-
-
- -

users

-
-
- -
-

Logo

-
- -

apple

-
-
- -

behance

-
-
- -

facebook

-
-
- -

github

-
-
- -

google-color

-
-
- -

google-mono

-
-
- -

instagram

-
-
- -

kakao

-
-
- -

linkedin

-
-
- -

playstore

-
-
+ {iconCategories.map((category) => ( +
+

{category.name}

+ {Object.entries(category.icons).map(([iconName, icon]) => ( + + ))} +
+ ))}
); }, diff --git a/packages/icons/index.ts b/packages/icons/index.ts index 045b2f9c..5696fab1 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -8,3 +8,14 @@ export * from './src/Media/index'; export * from './src/Time/index'; export * from './src/Users/index'; export * from './src/Logo/index'; + +export * as Communication from './src/Communication/index'; +export * as Editor from './src/Editor/index'; +export * as Feedback from './src/Feedback/index'; +export * as Files from './src/Files/index'; +export * as General from './src/General/index'; +export * as Interaction from './src/Interaction/index'; +export * as Media from './src/Media/index'; +export * as Time from './src/Time/index'; +export * as Users from './src/Users/index'; +export * as Logo from './src/Logo/index';