@nation-a/icons 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1308 -981
- package/dist/index.mjs.map +1 -1
- package/dist/types/HistoryOutlineIcon.d.ts +7 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @nation-a/icons
|
|
2
|
+
|
|
3
|
+
Nation-A 디자인 시스템의 SVG 아이콘 컴포넌트 라이브러리입니다. Icona에서 추출된 SVG를 React 컴포넌트로 변환하여 제공합니다.
|
|
4
|
+
|
|
5
|
+
## 특징
|
|
6
|
+
|
|
7
|
+
- **최적화된 SVG**: 불필요한 태그와 속성을 제거한 경량 SVG
|
|
8
|
+
- **React 컴포넌트**: 모든 아이콘이 React 컴포넌트로 제공됨
|
|
9
|
+
- **커스터마이징 가능**: 색상, 크기 등을 쉽게 변경 가능
|
|
10
|
+
- **타입 지원**: TypeScript 타입 정의 포함
|
|
11
|
+
- **자동 생성**: 자동화된 스크립트를 통한 아이콘 컴포넌트 생성
|
|
12
|
+
|
|
13
|
+
## 설치
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# npm
|
|
17
|
+
npm install @nation-a/icons
|
|
18
|
+
|
|
19
|
+
# yarn
|
|
20
|
+
yarn add @nation-a/icons
|
|
21
|
+
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @nation-a/icons
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 사용법
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { HomeIcon, SearchIcon, MenuIcon } from '@nation-a/icons'
|
|
30
|
+
|
|
31
|
+
function MyComponent() {
|
|
32
|
+
return (
|
|
33
|
+
<div>
|
|
34
|
+
<HomeIcon size={24} color="blue" />
|
|
35
|
+
<SearchIcon size={20} color="#FF5733" />
|
|
36
|
+
<MenuIcon size="1.2em" />
|
|
37
|
+
</div>
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 아이콘 속성
|
|
43
|
+
|
|
44
|
+
모든 아이콘 컴포넌트는 다음 속성을 지원합니다:
|
|
45
|
+
|
|
46
|
+
| 속성 | 타입 | 기본값 | 설명 |
|
|
47
|
+
| ----- | ---------------- | -------------- | ------------- |
|
|
48
|
+
| size | number \| string | '1em' | 아이콘의 크기 |
|
|
49
|
+
| color | string | 'currentColor' | 아이콘의 색상 |
|
|
50
|
+
|
|
51
|
+
추가로 모든 표준 SVG 속성을 지원합니다.
|
|
52
|
+
|
|
53
|
+
## 아이콘 파이프라인
|
|
54
|
+
|
|
55
|
+
1. 피그마에서 [Icona](https://www.figma.com/community/plugin/1246320822364150095) 플러그인을 통해 아이콘이 생성됩니다.
|
|
56
|
+
2. 생성된 `.icona/icons.json` 파일을 기반으로 SVG 파일을 추출합니다.
|
|
57
|
+
3. 추출된 SVG에서 불필요한 태그와 속성을 제거하고 최적화합니다.
|
|
58
|
+
4. 최적화된 SVG를 React 컴포넌트로 변환합니다.
|
|
59
|
+
5. 모든 아이콘에 대한 인덱스 파일을 자동 생성합니다.
|
|
60
|
+
6. 변환된 컴포넌트를 Vite로 번들링합니다.
|
|
61
|
+
|
|
62
|
+
## 개발
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
# 의존성 설치
|
|
66
|
+
pnpm install
|
|
67
|
+
|
|
68
|
+
# 아이콘 생성 및 빌드
|
|
69
|
+
pnpm build
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## 라이선스
|
|
73
|
+
|
|
74
|
+
MIT 라이선스
|