diff --git a/.changeset/tasty-teachers-burn.md b/.changeset/tasty-teachers-burn.md new file mode 100644 index 00000000..561aa5fa --- /dev/null +++ b/.changeset/tasty-teachers-burn.md @@ -0,0 +1,5 @@ +--- +'@sopt-makers/icons': minor +--- + +Fix white -> currentColor, add Logo and Communication/location diff --git a/apps/docs/src/stories/Icons.stories.tsx b/apps/docs/src/stories/Icons.stories.tsx index 72a55ffc..5b3ee416 100644 --- a/apps/docs/src/stories/Icons.stories.tsx +++ b/apps/docs/src/stories/Icons.stories.tsx @@ -95,6 +95,14 @@ export const Default = {

send

+
+ +

location

+
+
+ +

location-filled

+
@@ -616,6 +624,50 @@ export const Default = {

users

+ +
+

Logo

+
+ +

apple

+
+
+ +

behance

+
+
+ +

facebook

+
+
+ +

github

+
+
+ +

google-color

+
+
+ +

google-mono

+
+
+ +

instagram

+
+
+ +

kakao

+
+
+ +

linkedin

+
+
+ +

playstore

+
+
); }, diff --git a/packages/icons/index.ts b/packages/icons/index.ts index c4852042..045b2f9c 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -1,9 +1,10 @@ -export * from "./src/Communication/index"; -export * from "./src/Editor/index"; -export * from "./src/Feedback/index"; -export * from "./src/Files/index"; -export * from "./src/General/index"; -export * from "./src/Interaction/index"; -export * from "./src/Media/index"; -export * from "./src/Time/index"; -export * from "./src/Users/index"; +export * from './src/Communication/index'; +export * from './src/Editor/index'; +export * from './src/Feedback/index'; +export * from './src/Files/index'; +export * from './src/General/index'; +export * from './src/Interaction/index'; +export * from './src/Media/index'; +export * from './src/Time/index'; +export * from './src/Users/index'; +export * from './src/Logo/index'; diff --git a/packages/icons/src/Communication/ic-birthday-primary.tsx b/packages/icons/src/Communication/ic-birthday-primary.tsx index 68068826..439d0149 100644 --- a/packages/icons/src/Communication/ic-birthday-primary.tsx +++ b/packages/icons/src/Communication/ic-birthday-primary.tsx @@ -7,7 +7,7 @@ const IconBirthdayPrimary = forwardRef( ( width='20' height='8.43652' rx='3' - stroke='white' + stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /> - + ); }); diff --git a/packages/icons/src/Communication/ic-birthday-secondary.tsx b/packages/icons/src/Communication/ic-birthday-secondary.tsx index a79af7dd..28cd998e 100644 --- a/packages/icons/src/Communication/ic-birthday-secondary.tsx +++ b/packages/icons/src/Communication/ic-birthday-secondary.tsx @@ -7,19 +7,19 @@ const IconBirthdaySecondary = forwardRef - + diff --git a/packages/icons/src/Communication/ic-location-filled.tsx b/packages/icons/src/Communication/ic-location-filled.tsx new file mode 100644 index 00000000..1186eddd --- /dev/null +++ b/packages/icons/src/Communication/ic-location-filled.tsx @@ -0,0 +1,18 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconLocationFilledProps extends HTMLAttributes {} + +const IconLocationFilled = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconLocationFilled; diff --git a/packages/icons/src/Communication/ic-location.tsx b/packages/icons/src/Communication/ic-location.tsx new file mode 100644 index 00000000..b48512ea --- /dev/null +++ b/packages/icons/src/Communication/ic-location.tsx @@ -0,0 +1,18 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconLocationProps extends HTMLAttributes {} + +const IconLocation = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconLocation; diff --git a/packages/icons/src/Communication/ic-phone.tsx b/packages/icons/src/Communication/ic-phone.tsx index 638805d8..00fb3d68 100644 --- a/packages/icons/src/Communication/ic-phone.tsx +++ b/packages/icons/src/Communication/ic-phone.tsx @@ -7,7 +7,7 @@ const IconPhone = forwardRef((props, ref) => { {} -const IconDotsVertical = forwardRef( - (props, ref) => { - return ( - - - - - - - - - ); - } -); +const IconDotsVertical = forwardRef((props, ref) => { + return ( + + + + + + + + + ); +}); export default IconDotsVertical; diff --git a/packages/icons/src/Logo/ic-apple.tsx b/packages/icons/src/Logo/ic-apple.tsx new file mode 100644 index 00000000..523bad6c --- /dev/null +++ b/packages/icons/src/Logo/ic-apple.tsx @@ -0,0 +1,16 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconAppleProps extends HTMLAttributes {} + +const IconApple = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconApple; diff --git a/packages/icons/src/Logo/ic-behance.tsx b/packages/icons/src/Logo/ic-behance.tsx new file mode 100644 index 00000000..1090f9ac --- /dev/null +++ b/packages/icons/src/Logo/ic-behance.tsx @@ -0,0 +1,37 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconBehanceProps extends HTMLAttributes {} + +const IconBehance = forwardRef((props, ref) => { + return ( + + + + + + + + + + + + + + ); +}); + +export default IconBehance; diff --git a/packages/icons/src/Logo/ic-facebook.tsx b/packages/icons/src/Logo/ic-facebook.tsx new file mode 100644 index 00000000..fe7e64be --- /dev/null +++ b/packages/icons/src/Logo/ic-facebook.tsx @@ -0,0 +1,16 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconFacebookProps extends HTMLAttributes {} + +const IconFacebook = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconFacebook; diff --git a/packages/icons/src/Logo/ic-github.tsx b/packages/icons/src/Logo/ic-github.tsx new file mode 100644 index 00000000..5f49f16f --- /dev/null +++ b/packages/icons/src/Logo/ic-github.tsx @@ -0,0 +1,27 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconGithubProps extends HTMLAttributes {} + +const IconGithub = forwardRef((props, ref) => { + return ( + + + + + + + + + + + + ); +}); + +export default IconGithub; diff --git a/packages/icons/src/Logo/ic-google-color.tsx b/packages/icons/src/Logo/ic-google-color.tsx new file mode 100644 index 00000000..25a8f854 --- /dev/null +++ b/packages/icons/src/Logo/ic-google-color.tsx @@ -0,0 +1,36 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconGoogleColorProps extends HTMLAttributes {} + +const IconGoogleColor = forwardRef((props, ref) => { + return ( + + + + + + + ); +}); + +export default IconGoogleColor; diff --git a/packages/icons/src/Logo/ic-google-mono.tsx b/packages/icons/src/Logo/ic-google-mono.tsx new file mode 100644 index 00000000..fceb1301 --- /dev/null +++ b/packages/icons/src/Logo/ic-google-mono.tsx @@ -0,0 +1,16 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconGoogleMonoProps extends HTMLAttributes {} + +const IconGoogleMono = forwardRef((props, ref) => { + return ( + + + + ); +}); + +export default IconGoogleMono; diff --git a/packages/icons/src/Logo/ic-instagram.tsx b/packages/icons/src/Logo/ic-instagram.tsx new file mode 100644 index 00000000..f1788398 --- /dev/null +++ b/packages/icons/src/Logo/ic-instagram.tsx @@ -0,0 +1,38 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconInstagramProps extends HTMLAttributes { + width?: number; + height?: number; +} + +const IconInstagram = forwardRef((props, ref) => { + const { width = 24, height = 24 } = props; + + return ( + + + + + + + + + + + + + ); +}); + +export default IconInstagram; diff --git a/packages/icons/src/Logo/ic-kakao.tsx b/packages/icons/src/Logo/ic-kakao.tsx new file mode 100644 index 00000000..e48faef6 --- /dev/null +++ b/packages/icons/src/Logo/ic-kakao.tsx @@ -0,0 +1,30 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconKakaoProps extends HTMLAttributes { + width?: number; + height?: number; +} + +const IconKakao = forwardRef((props, ref) => { + const { width = 24, height = 24 } = props; + + return ( + + + + + + + + + + + ); +}); + +export default IconKakao; diff --git a/packages/icons/src/Logo/ic-linkedin.tsx b/packages/icons/src/Logo/ic-linkedin.tsx new file mode 100644 index 00000000..8bf34114 --- /dev/null +++ b/packages/icons/src/Logo/ic-linkedin.tsx @@ -0,0 +1,30 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconLinkedinProps extends HTMLAttributes { + width?: number; + height?: number; +} + +const IconLinkedin = forwardRef((props, ref) => { + const { width = 24, height = 24 } = props; + + return ( + + + + + + + + + + + ); +}); + +export default IconLinkedin; diff --git a/packages/icons/src/Logo/ic-playstore.tsx b/packages/icons/src/Logo/ic-playstore.tsx new file mode 100644 index 00000000..42076e1b --- /dev/null +++ b/packages/icons/src/Logo/ic-playstore.tsx @@ -0,0 +1,25 @@ +import { HTMLAttributes, forwardRef } from 'react'; + +interface IconPlaystoreProps extends HTMLAttributes {} + +const IconPlaystore = forwardRef((props, ref) => { + return ( + + + + + + + ); +}); + +export default IconPlaystore; diff --git a/packages/icons/src/Logo/index.ts b/packages/icons/src/Logo/index.ts new file mode 100644 index 00000000..963a0fda --- /dev/null +++ b/packages/icons/src/Logo/index.ts @@ -0,0 +1,10 @@ +export { default as IconApple } from './ic-apple'; +export { default as IconBehance } from './ic-behance'; +export { default as IconFacebook } from './ic-facebook'; +export { default as IconGithub } from './ic-github'; +export { default as IconGoogleColor } from './ic-google-color'; +export { default as IconGoogleMono } from './ic-google-mono'; +export { default as IconInstagram } from './ic-instagram'; +export { default as IconKakao } from './ic-kakao'; +export { default as IconLinkedin } from './ic-linkedin'; +export { default as IconPlaystore } from './ic-playstore';