diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx index 8054a7d3..301ff2e4 100644 --- a/apps/docs/src/App.tsx +++ b/apps/docs/src/App.tsx @@ -5,6 +5,7 @@ import { ChangeEvent, useState } from 'react'; import '@sopt-makers/ui/dist/index.css'; import { FieldBox, SearchField, Test, TextArea, TextField } from '@sopt-makers/ui'; +import { IconBirthdayPrimary, IconBirthdaySecondary, IconPhone, IconAlarmClock } from '@sopt-makers/icons'; import { colors } from '@sopt-makers/colors'; function App() { @@ -88,6 +89,11 @@ function App() { > 여긴 본문 +
+ + + +
); } diff --git a/apps/docs/src/stories/Icons.stories.tsx b/apps/docs/src/stories/Icons.stories.tsx index 89b58898..115b46b0 100644 --- a/apps/docs/src/stories/Icons.stories.tsx +++ b/apps/docs/src/stories/Icons.stories.tsx @@ -1,8 +1,8 @@ import * as Icons from '@sopt-makers/icons'; export default { - title: 'icons/Icons' -} + title: 'icons/Icons', +}; export const Default = { argTypes: { @@ -11,182 +11,616 @@ export const Default = { render: (props: { color: string }) => { const style = { width: 24, height: 24, color: props.color }; - return
-
-

Communication

-

archive

-

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

-

pin

-

send

-
+ 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

+
+
-
-

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

-
+
+

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

-
+
+

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

-
+
+

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

-
+
+

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

-
+
+

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

-
+
+

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

-
+
+

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

+
+

Users

+
+ +

user-check

+
+
+ +

user-edit

+
+
+ +

user-minus

+
+
+ +

user-plus

+
+
+ +

user-x

+
+
+ +

user

+
+
+ +

users-check

+
+
+ +

users-minus

+
+
+ +

users-plus

+
+
+ +

users-x

+
+
+ +

users

+
+
-
- } -}; \ No newline at end of file + ); + }, +}; diff --git a/packages/icons/src/Communication/ic-birthday-primary.tsx b/packages/icons/src/Communication/ic-birthday-primary.tsx new file mode 100644 index 00000000..68068826 --- /dev/null +++ b/packages/icons/src/Communication/ic-birthday-primary.tsx @@ -0,0 +1,38 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconBirthdayPrimaryProps extends HTMLAttributes {} + +const IconBirthdayPrimary = forwardRef((props, ref) => { + return ( + + + + + + + ); +}); + +export default IconBirthdayPrimary; diff --git a/packages/icons/src/Communication/ic-birthday-secondary.tsx b/packages/icons/src/Communication/ic-birthday-secondary.tsx new file mode 100644 index 00000000..a79af7dd --- /dev/null +++ b/packages/icons/src/Communication/ic-birthday-secondary.tsx @@ -0,0 +1,30 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconBirthdaySecondaryProps extends HTMLAttributes {} + +const IconBirthdaySecondary = forwardRef((props, ref) => { + return ( + + + + + + + ); +}); + +export default IconBirthdaySecondary; diff --git a/packages/icons/src/Communication/ic-phone.tsx b/packages/icons/src/Communication/ic-phone.tsx new file mode 100644 index 00000000..638805d8 --- /dev/null +++ b/packages/icons/src/Communication/ic-phone.tsx @@ -0,0 +1,19 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconPhoneProps extends HTMLAttributes {} + +const IconPhone = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconPhone; diff --git a/packages/icons/src/Communication/index.ts b/packages/icons/src/Communication/index.ts index cec95771..e162222a 100644 --- a/packages/icons/src/Communication/index.ts +++ b/packages/icons/src/Communication/index.ts @@ -1,18 +1,21 @@ -export { default as IconArchive } from "./ic-archive"; -export { default as IconBookMark } from "./ic-bookmark"; -export { default as IconEdit } from "./ic-edit"; -export { default as IconEyeOff } from "./ic-eye-off"; -export { default as IconEye } from "./ic-eye"; -export { default as IconMail } from "./ic-mail"; -export { default as IconMento } from "./ic-mento"; -export { default as IconMessageAlert } from "./ic-message-alert"; -export { default as IconMessageChat } from "./ic-message-chat"; -export { default as IconMessageCheck } from "./ic-message-check"; -export { default as IconMessageDots } from "./ic-message-dots"; -export { default as IconMessagePlus } from "./ic-message-plus"; -export { default as IconMessageQuestion } from "./ic-message-question"; -export { default as IconMessageSquare } from "./ic-message-square"; -export { default as IconMessageText } from "./ic-message-text"; -export { default as IconMessageX } from "./ic-message-x"; -export { default as IconPin } from "./ic-pin"; -export { default as IconSend } from "./ic-send"; +export { default as IconArchive } from './ic-archive'; +export { default as IconBirthdayPrimary } from './ic-birthday-primary'; +export { default as IconBirthdaySecondary } from './ic-birthday-secondary'; +export { default as IconBookMark } from './ic-bookmark'; +export { default as IconEdit } from './ic-edit'; +export { default as IconEyeOff } from './ic-eye-off'; +export { default as IconEye } from './ic-eye'; +export { default as IconMail } from './ic-mail'; +export { default as IconMento } from './ic-mento'; +export { default as IconMessageAlert } from './ic-message-alert'; +export { default as IconMessageChat } from './ic-message-chat'; +export { default as IconMessageCheck } from './ic-message-check'; +export { default as IconMessageDots } from './ic-message-dots'; +export { default as IconMessagePlus } from './ic-message-plus'; +export { default as IconMessageQuestion } from './ic-message-question'; +export { default as IconMessageSquare } from './ic-message-square'; +export { default as IconMessageText } from './ic-message-text'; +export { default as IconMessageX } from './ic-message-x'; +export { default as IconPhone } from './ic-phone'; +export { default as IconPin } from './ic-pin'; +export { default as IconSend } from './ic-send';