피그마 아이콘 설정 방법,

프로젝트에 들어가기 앞서, 아이콘을 먼저 공통화 할일이 생길거야.

🔍 아이콘 설정 순서

1️⃣ 폴더 구조 설정
피그마에서 내보낸 아이콘과 로고 파일을 재사용 가능하고 유지보수하기 쉽게 관리하려면
다음과 같은 폴더 구조를 추천해.

src/
├── assets/
│   ├── icons/
│   │   ├── search.svg
│   │   ├── user.svg
│   │   └── home.svg
│   ├── logos/
│   │   ├── main-logo.svg
│   │   └── secondary-logo.svg
│   └── index.ts

• icons/: 작은 크기의 아이콘들(예: 검색, 사용자, 홈 등)을 저장.
• logos/: 회사 로고 또는 브랜드를 대표하는 큰 이미지를 저장.
• index.ts: 각 파일을 import/export하는 코드로 작성해 아이콘과 로고를 한 곳에서 관리.

2️⃣ 피그마에서 내보내기

• 아이콘 및 로고 정리

  1. 피그마에서 아이콘 및 로고를 선택:
     사용하는 모든 아이콘과 로고를 한 곳에 모아 프레임(Frame)으로 그룹화.
     각 아이콘/로고에 의미 있는 이름을 부여하세요(예: search, home, main-logo).

  2. SVG 형식으로 내보내기:
     아이콘과 로고를 벡터 형식(SVG)으로 내보내면 화면 크기에 상관없이 선명하게 유지해.

• 피그마 내보내기 설정

1. 아이콘과 로고를 선택:
   내보낼 아이콘 또는 로고 선택.

2. Export 설정:
   오른쪽 패널에서 Export 섹션 클릭.
   SVG 형식으로 설정.

3. 내보내기 실행:
   내보내기를 실행하면, 선택한 아이콘/로고를 .svg 파일로 저장할 수 있어.

4. SVG 최적화 (선택 사항):
   내보낸 SVG 파일이 불필요하게 큰 경우 SVGO와 같은 도구로 최적화할 수 있어.

3️⃣ VSCode에 아이콘 및 로고 추가

1. 내보낸 파일 이동
   피그마에서 내보낸 .svg 파일을 다음 폴더로 옮겨.

아이콘: src/assets/icons/
로고: src/assets/logos/

2. index.ts 파일로 관리
   index.ts 파일을 생성하여 아이콘과 로고를 모듈화해.
   이렇게 하면 파일 경로를 단축하고, 쉽게 가져다 쓸 수 있어!

// src/assets/index.ts

// 아이콘
export { default as SearchIcon } from './icons/search.svg';
export { default as UserIcon } from './icons/user.svg';
export { default as HomeIcon } from './icons/home.svg';

// 로고
export { default as MainLogo } from './logos/main-logo.svg';
export { default as SecondaryLogo } from './logos/secondary-logo.svg';

3. 컴포넌트에서 사용하기
   SVG 파일을 컴포넌트에서 직접 사용하려면 @svgr/webpack 또는 next/image를 사용해.

• SVG를 컴포넌트로 사용:
  Next.js에서는 SVG 파일을 컴포넌트처럼 사용할 수 있습니다

import { SearchIcon, MainLogo } from '../assets';

const Header = () => {
  return (
    <header className="flex items-center p-4">
      <MainLogo className="w-32 h-auto" />
      <SearchIcon className="w-6 h-6 ml-auto" />
    </header>
  );
};

export default Header;

• 이미지 파일로 처리하기 (Next.js next/image):
  SVG 파일 대신 PNG/JPG를 사용하는 경우

import Image from 'next/image';
import MainLogo from '../assets/logos/main-logo.png';

const Header = () => {
  return (
    <header className="flex items-center p-4">
      <Image src={MainLogo} alt="Main Logo" width={128} height={64} />
    </header>
  );
};

export default Header;

🚀 진짜 쉬운 설명

• 파일 이름 규칙: 파일 이름은 소문자-케밥-케이스(search-icon.svg)를 사용하여 명확하게 구분.
• 아이콘 시스템 구축: 같은 크기(예: 24x24px)로 내보내 아이콘 크기 일관성 유지.
• 피그마 업데이트와 동기화: 아이콘/로고가 변경되었을 때, 같은 방식으로 업데이트하고 VSCode에 반영.

1. 피그마에서 SVG 형식으로 아이콘과 로고를 내보내기.
2. VSCode에서 assets/icons와 assets/logos 폴더로 관리.
3. index.ts를 활용해 한 곳에서 import/export 관리.
4. 컴포넌트에서 쉽게 가져다 사용.

이 방식으로 작업하면 아이콘과 로고를 체계적으로 관리하고, 프로젝트의 일관성을 유지할 수 있어!

---

✏️ 더 알아가기

• index.ts로 모듈화란?
  로고 파일을 여러 곳에서 사용하려면, 각 파일을 직접 import할 수도 있지만 index.ts로 관리하면 더 편리해! index.ts는 폴더의 모든 파일을 한 곳에서 모아 가져올 수 있는 역할을 하는거지.

//src/assets/logos/index.ts
import MainLogo from './main-logo.svg';
import SecondaryLogo from './secondary-logo.svg';

export { MainLogo, SecondaryLogo };
//index.ts 파일에서 로고 파일들을 import하고, 다시 export하여, 다른 파일에서는 index.ts를 통해 로고를 가져올 수 있어.

• 왜 편리한가?
  • 모듈화하지 않은 경우

  import MainLogo from '@/assets/logos/main-logo.svg';
import SecondaryLogo from '@/assets/logos/secondary-logo.svg';

• 모듈화한 경우

import { MainLogo, SecondaryLogo } from '@/assets/logos';

🙌 경로가 짧아지고 관리하기 쉬워져!