-
-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Icon 컴포넌트 #40
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Simple Icons 코드 저장소의 icons 폴더 안에 svg 파일을 그대로 복사해왔습니다.
https://github.com/simple-icons/simple-icons/blob/develop/icons/discord.svg
import Discord from "../assets/Discord.svg?react"; | ||
import GitHub from "../assets/GitHub.svg?react"; | ||
import LinkedIn from "../assets/LinkedIn.svg?react"; | ||
import Medium from "../assets/Medium.svg?react"; | ||
import YouTube from "../assets/YouTube.svg?react"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Vite의 svgr 플러그인을 사용해서 svg 파일을 React 컴포넌트로 불러왔습니다.
|
||
function createBrandIcon(Icon: FunctionComponent<SVGProps<SVGSVGElement>>) { | ||
return (args: ComponentProps<typeof Icon>) => ( | ||
<Icon {...args} fill="currentColor" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Simple 아이콘의 색을 CSS의 color
속성을 통해서 제어하려면 fill
속성을 currentColor
로 설정해줘야 합니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고 많으셨습니다!
Icon 컴포넌트를 구현하였습니다. 우선은 20개의 아이콘으로 시작하고자 합니다.