⭐ 아이콘 사용 방법& React 컴포넌트로 가져오는 이유
1. 아이콘을 이미지 파일 <img> 로 가져오는 방법
-
방식
- public/icons/email.png 파일을 만들고,
사용할 파일에서<img src="/icons/email.png" alt="이메일" />처럼 사용한다. -
단점
- 스타일 변경이 불가능하다.
-<img>태그로는 text-indigo-400 같은 Tailwind CSS의 색상 클래스를 적용할 수 없다.
- 만약 indigo 색상 아이콘이 필요하면, 포토샵이나 피그마에서 email-indigo.png 파일을 따로 만들어서 저장해야 하며 hover 시 색상 변경은 더 어렵다.
2. React 컴포넌트 <EnvelopeIcon>로 가져오는 방법 (이 방식 사용)
-
방식
- EnvelopeIcon.tsx 파일을 만들고,
사용할 파일에서<EnvelopeIcon className="..." />처럼 사용한다. -
장점
- 스타일 변경이 아주 자유롭다.
- EnvelopeIcon 컴포넌트는 className을 받아서 자신의<svg>태그에 그대로 적용한다.
- 사용할 파일에서<EnvelopeIcon className="text-indigo-400 w-8 h-8" />처럼 Tailwind CSS로 색상과 크기를 마음대로 바꿀 수 있다.
⭐ 아이콘 가져오는 코드 구현 및 상세 설명
0. 아이콘 가져온 사이트
Envelope, Blog: Tailwind CSS를 만든 팀이 제공하는 Heroicons의 SVG 경로를 사용.
Github: 브랜드 로고에 가장 표준화되어 있다고 알려진 Simple Icons의 SVG 경로를 사용.
1. type IconProps = { className?: string; }:
- TypeScript를 사용해 이 컴포넌트가 받을 'props'의 타입을 정의한다.
- IconProps 타입은 className 속성을 가질 수 있다.
- ? (물음표)는 className이 선택적 속성임을 의미한다.
- string은 className의 값이 '문자열' 타입이어야 함을 뜻한다.
2. const EnvelopeIcon = ({ className }: IconProps) => (...);
- EnvelopeIcon이라는 이름의 React 함수형 컴포넌트를 선언한다.
- ({ className }: IconProps)는 이 컴포넌트가 받는 props 객체에서 className 속성만 구조 분해 할당으로 꺼내 사용하겠다는 의미이다.
: IconProps는 이 props가 위에서 정의한 IconProps 타입을 따른다고 TypeScript에 알려주는 것이다.
3. <svg className={className} ...>:
- 이 컴포넌트가 실제로 화면에 그릴 SVG(벡터 그래픽) 태그이다.
className={className}: 사용할 파일에서<EnvelopeIcon className="w-8 h-8 text-indigo-400" />처럼 전달하는 Tailwind CSS 클래스를, 이<svg>태그의 className 속성에 그대로 적용한다.
4. <path ... />:
<svg>태그 안에서, d="..." 부분의 복잡한 좌표값을 바탕으로 실제 모양을 그리는 경로 데이터이다.
5. export default EnvelopeIcon;:
- 사용할 파일에서
import EnvelopeIcon from ...와 같이 이 컴포넌트를 가져다 쓸 수 있도록 '내보내기'를 한다.
- 사용할 파일에서 위와 같이 스타일을 적용한다.
🩷 결과 (아이콘 적용 화면)
- 화면
