Ant Design의 전체 아이콘 SVG 소스를 한 번에 추출 하는 방법
Ant Design의 **전체 아이콘 SVG 소스를 한 번에 추출**하고 싶으시면,
공식 GitHub 저장소에서 스크립트를 이용해 모든 아이콘을 자동으로 다운로드하거나 React 컴포넌트 형태로 변환할 수 있습니다.
---
## 🧾 목표
- `@ant-design/icons` 패키지 없이도 Ant Design 아이콘 사용
- 전체 아이콘 SVG 또는 React 컴포넌트로 일괄 추출
- 번들 최적화 및 커스터마이징 가능
---
## ✅ 방법 1: 공식 레포지토리에서 직접 클론
### 1. Git Clone
```bash
git clone https://github.com/ant-design/ant-design-icons.git
cd ant-design-icons
```
### 2. 필요한 아이콘 위치
- 일반 아이콘: `src/icons/`
- 쌍선형 아이콘 (Outlined): `src/icons/outlined/`
- 실선형 아이콘 (Filled): `src/icons/filled/`
- 두꺼운 아이콘 (TwoTone): `src/icons/twotone/`
각 `.tsx` 파일은 React 컴포넌트 형태로 구성되어 있고, 실제 SVG는 아래와 같은 형식입니다:
```tsx
import * as React from 'react';
import { IconWrapper } from '../icon-wrapper';
export default function HomeOutlined() {
return (
<IconWrapper>
<svg>...</svg>
</IconWrapper>
);
}
```
---
## ✅ 방법 2: 전체 아이콘 React 컴포넌트로 변환 (자동화)
### 🛠️ 필요한 도구
- Node.js + npm
- `fs`, `path`, `axios` 등 Node 모듈
### 🔁 스크립트 예제: 모든 아이콘 다운로드 및 React 컴포넌트 생성
#### 💡 준비
```bash
mkdir custom-icons
cd custom-icons
npm init -y
npm install axios fs-extra path
touch extract-icons.js
```
#### 📄 `extract-icons.js`
```js
const fs = require('fs-extra');
const path = require('path');
const axios = require('axios');
// 기본 경로 설정
const OUTPUT_DIR = path.resolve(__dirname, 'icons');
const ICON_REPO_URL =
'https://raw.githubusercontent.com/ant-design/ant-design-icons/master/src/icons/';
// 폴더 생성
fs.ensureDirSync(OUTPUT_DIR);
// 아이콘 리스트 가져오기 (예시)
const icons = [
'HomeOutlined',
'UserOutlined',
'SettingOutlined',
'EditOutlined',
// 더 많은 아이콘 추가 가능
];
// 개별 아이콘 다운로드 함수
async function downloadIcon(iconName) {
const url = `${ICON_REPO_URL}${iconName}.tsx`;
try {
const res = await axios.get(url);
let code = res.data;
// React 코드로 변환 (간단한 정규식 처리)
code = code.replace(/export default function/g, 'const Icon =');
code = code.replace(/import \* as React from 'react';/, "import React from 'react';");
// export 추가
code += `\nexport default Icon;`;
fs.writeFileSync(path.join(OUTPUT_DIR, `${iconName}.tsx`), code);
console.log(`✅ ${iconName} 저장 완료`);
} catch (err) {
console.error(`❌ ${iconName} 다운로드 실패: `, err.message);
}
}
// 실행
async function run() {
for (const icon of icons) {
await downloadIcon(icon);
}
console.log('🎉 아이콘 추출 완료!');
}
run();
```
---
## ✅ 방법 3: 전체 아이콘 SVG만 추출하는 스크립트
위의 스크립트를 조금 수정하면 `<svg>` 태그만 추출할 수도 있습니다.
### 📄 예시: SVG 태그만 추출하기
```js
// 일부 생략...
const $ = require('cheerio'); // HTML 파싱용
async function extractSVG(iconName) {
const url = `${ICON_REPO_URL}${iconName}.tsx`;
const res = await axios.get(url);
const tsxCode = res.data;
// 간단히 JSX 내부의 SVG 문자열 추출
const svgStartIndex = tsxCode.indexOf('<svg');
const svgEndIndex = tsxCode.indexOf('</svg>') + 6;
if (svgStartIndex !== -1 && svgEndIndex !== -1) {
const rawSVG = tsxCode.slice(svgStartIndex, svgEndIndex);
fs.writeFileSync(path.join(OUTPUT_DIR, `${iconName}.svg`), rawSVG);
console.log(`✅ ${iconName}.svg 저장 완료`);
} else {
console.warn(`⚠️ ${iconName}: SVG 태그를 찾을 수 없습니다.`);
}
}
```
---
## ✅ 결과물 사용 예시
생성된 `HomeOutlined.tsx` 사용 예:
```tsx
import HomeOutlined from './icons/HomeOutlined';
function App() {
return (
<div style={{ fontSize: '24px', color: '#1890ff' }}>
<HomeOutlined />
<span>Home</span>
</div>
);
}
```
---
## ✅ 추가 팁
| 항목 | 설명 |
|------|------|
| 📦 번들 최적화 | Webpack/Vite에서 Tree-shaking 적용 가능 |
| 🎨 색상 제어 | `fill="currentColor"`로 부모 텍스트 색상 상속 |
| ⚙️ 아이콘 관리 시스템 | 아이콘 폴더를 `/components/icons/`로 통일하여 관리 |
| 🧪 테스트 | 각 아이콘이 잘 렌더링되는지 Jest 또는 Storybook으로 확인 |
---
## ✅ 결론
> Ant Design의 전체 아이콘을 `@ant-design/icons` 없이 **직접 추출하고 React 컴포넌트로 변환**할 수 있습니다.
>
> 이를 통해 프로젝트 번들 크기를 줄이고, 필요 없는 아이콘은 제거하거나 커스텀할 수 있습니다.
---
필요하시다면:
- 전체 아이콘 리스트를 자동으로 수집하는 스크립트
- GitHub API 활용한 동적 아이콘 목록 생성
- TypeScript 기반 전체 아이콘 라이브러리 생성 스크립트
등도 제공해 드릴 수 있어요!
궁금하신 부분 있으신가요? 😊