167 lines
8.0 KiB
Markdown
167 lines
8.0 KiB
Markdown
## 📁 디렉터리 구성 (Directory Structure)
|
||
|
||
아이콘팩을 웹 프로젝트에 배포할 때 아래와 같이 폴더 구조를 유지합니다:
|
||
|
||
```text
|
||
fluenticons/
|
||
├── i/ # SVG 아이콘 원본 파일 모음 (1.svg ~ 2983.svg)
|
||
├── fluenticons.min.css # 프로덕션 배포용 압축 스타일시트 (81.7 KB)
|
||
├── fluenticons.css # 개발 및 디버깅용 스타일시트 (99.6 KB)
|
||
├── index.html # 실시간 아이콘 탐색기 (검색, 필터링, 클릭-복사)
|
||
├── icons.json # 아이콘 메타데이터 JSON
|
||
├── icons.data.js # 로컬 실행(file://) 지원용 정적 데이터
|
||
└── README.md # 사용자 가이드 문서
|
||
```
|
||
|
||
> ⚠️ **주의**: `fluenticons.min.css`와 `i/` 폴더는 **반드시 동일한 디렉터리 레벨**에 위치해야 상대 경로(`url(i/{id}.svg)`)가 정상 작동합니다.
|
||
|
||
---
|
||
|
||
## 📦 빠른 시작 (Quick Start)
|
||
|
||
### 1. 스타일시트 불러오기
|
||
|
||
HTML 문서의 `<head>` 태그 안에 `fluenticons.min.css`를 추가합니다:
|
||
|
||
```html
|
||
<link rel="stylesheet" href="./lib/fluenticons/fluenticons.min.css" />
|
||
```
|
||
|
||
### 2. 아이콘 사용하기
|
||
|
||
기본 클래스 `fi`와 함께 원하는 아이콘 클래스를 지정합니다:
|
||
|
||
```html
|
||
<!-- 기본: 채움(Filled) 스타일 -->
|
||
<i class="fi fiPlus"></i>
|
||
<i class="fi fiUser"></i>
|
||
<i class="fi fiTrash"></i>
|
||
<i class="fi fiSun"></i>
|
||
|
||
<!-- 솔리드: 실선/선형(Solid/Regular) 스타일 (.solid 또는 .fiSolid) -->
|
||
<i class="fi fiPlus solid"></i>
|
||
<i class="fi fiUser solid"></i>
|
||
<i class="fi fiTrash solid"></i>
|
||
<i class="fi fiSun solid"></i>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 스타일 커스터마이징 (Styling)
|
||
|
||
CSS Mask 기반으로 동작하므로 표준 텍스트 CSS 속성을 그대로 사용하여 크기와 색상을 조절할 수 있습니다:
|
||
|
||
### 크기 조절 (Sizing)
|
||
|
||
기본 크기는 `1em` × `1em`이므로 부모 폰트 크기를 따르거나 `font-size`로 조절합니다:
|
||
|
||
```html
|
||
<i class="fi fiUser" style="font-size: 16px;"></i>
|
||
<i class="fi fiUser" style="font-size: 24px;"></i>
|
||
<i class="fi fiUser" style="font-size: 2rem;"></i>
|
||
```
|
||
|
||
### 색상 조절 (Coloring)
|
||
|
||
아이콘은 부모 요소의 `color`(`currentColor`)를 상속받습니다:
|
||
|
||
```html
|
||
<!-- 인라인 스타일 -->
|
||
<i class="fi fiHeart" style="color: #ef4444;"></i>
|
||
<i class="fi fiCheckCircle" style="color: #10b981;"></i>
|
||
|
||
<!-- 버튼 또는 텍스트 컨테이너와 함께 사용 시 자동 색상 상속 -->
|
||
<button class="btn btnPrimary">
|
||
<i class="fi fiUpload"></i> 파일 업로드
|
||
</button>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 주요 아이콘 및 FontAwesome 매핑표
|
||
|
||
기존 FontAwesome 사용자가 쉽게 적응할 수 있도록 직관적인 별칭을 제공합니다:
|
||
|
||
| 용도 / 의미 | FluentIcons 클래스 (주요 별칭) | 선형 전환 예시 | FontAwesome 대응명 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| **추가 / 플러스** | `fiPlus`, `fiAdd` | `<i class="fi fiPlus solid"></i>` | `fa-plus` |
|
||
| **원형 추가** | `fiPlusCircle`, `fiAddCircle` | `<i class="fi fiPlusCircle solid"></i>` | `fa-plus-circle` |
|
||
| **삭제 / 휴지통** | `fiTrash`, `fiDelete`, `fiDel` | `<i class="fi fiTrash solid"></i>` | `fa-trash`, `fa-trash-can` |
|
||
| **사용자 / 프로필** | `fiUser`, `fiPerson` | `<i class="fi fiUser solid"></i>` | `fa-user` |
|
||
| **팀 / 그룹** | `fiTeam`, `fiPeopleTeam`, `fiGroup` | `<i class="fi fiTeam solid"></i>` | `fa-users` |
|
||
| **체크 / 확인** | `fiCheck`, `fiCheckmark` | `<i class="fi fiCheck solid"></i>` | `fa-check` |
|
||
| **원형 체크** | `fiCircleCheck`, `fiCheckCircle` | `<i class="fi fiCircleCheck solid"></i>` | `fa-check-circle` |
|
||
| **닫기 / 취소** | `fiClose`, `fiTimes`, `fiDismiss`, `fiXmark`| `<i class="fi fiClose solid"></i>` | `fa-times`, `fa-xmark` |
|
||
| **원형 닫기** | `fiCircleXmark`, `fiDismissCircle` | `<i class="fi fiCircleXmark solid"></i>` | `fa-times-circle` |
|
||
| **업로드** | `fiUpload`, `fiArrUpload` | `<i class="fi fiUpload solid"></i>` | `fa-upload` |
|
||
| **다운로드** | `fiDownload`, `fiArrDownload` | `<i class="fi fiDownload solid"></i>` | `fa-download` |
|
||
| **클라우드 업로드** | `fiCloudUpload`, `fiCloudArrUp` | `<i class="fi fiCloudUpload solid"></i>` | `fa-cloud-upload-alt` |
|
||
| **달력** | `fiCalendar`, `fiCal`, `fiCalToday` | `<i class="fi fiCalendar solid"></i>` | `fa-calendar` |
|
||
| **태양 / 라이트** | `fiSun`, `fiWeatherSunny` | `<i class="fi fiSun solid"></i>` | `fa-sun` |
|
||
| **달 / 다크** | `fiMoon`, `fiWeatherMoon` | `<i class="fi fiMoon solid"></i>` | `fa-moon` |
|
||
| **문서 / 파일** | `fiDoc`, `fiFile`, `fiFileLines` | `<i class="fi fiDoc solid"></i>` | `fa-file`, `fa-file-alt` |
|
||
| **클립 / 첨부** | `fiClip`, `fiAttach`, `fiPaperclip` | `<i class="fi fiClip solid"></i>` | `fa-paperclip` |
|
||
| **알림 / 벨** | `fiBell`, `fiAlert` | `<i class="fi fiBell solid"></i>` | `fa-bell` |
|
||
| **수정 / 펜** | `fiPen`, `fiPencil`, `fiEdit` | `<i class="fi fiPen solid"></i>` | `fa-pen`, `fa-edit` |
|
||
| **복사** | `fiCopy`, `fiClone` | `<i class="fi fiCopy solid"></i>` | `fa-copy`, `fa-clone` |
|
||
| **붙여넣기** | `fiPaste`, `fiClipPaste` | `<i class="fi fiPaste solid"></i>` | `fa-paste` |
|
||
| **홈 / 집** | `fiHome`, `fiHouse` | `<i class="fi fiHome solid"></i>` | `fa-home`, `fa-house` |
|
||
| **새로고침 / 동기화**| `fiSync`, `fiRefresh`, `fiArrowsRotate`| `<i class="fi fiSync solid"></i>` | `fa-sync`, `fa-rotate` |
|
||
| **화살표(좌/우/상/하)**| `fiArrLeft`, `fiArrRight`, `fiArrUp`, `fiArrDown` | `<i class="fi fiArrLeft solid"></i>` | `fa-arrow-left` 등 |
|
||
| **꺾쇠(Chevron)** | `fiChevronLeft`, `fiChevronRight`, `fiChevronUp`, `fiChevronDown` | `<i class="fi fiChevronDown solid"></i>` | `fa-chevron-down` 등 |
|
||
| **검색** | `fiSearch`, `fiDocSearch` | `<i class="fi fiSearch solid"></i>` | `fa-search` |
|
||
| **와이파이** | `fiWifi`, `fiWifi4` | `<i class="fi fiWifi solid"></i>` | `fa-wifi` |
|
||
| **하트 / 좋아요** | `fiHeart` | `<i class="fi fiHeart solid"></i>` | `fa-heart` |
|
||
| **별 / 즐겨찾기** | `fiStar` | `<i class="fi fiStar solid"></i>` | `fa-star` |
|
||
| **로그인 / 진입** | `fiLogin`, `fiSignIn`, `fiSignInAlt` | `<i class="fi fiLogin solid"></i>` | `fa-sign-in-alt` |
|
||
|
||
---
|
||
|
||
## 💻 인터랙티브 아이콘 탐색기 (`index.html`)
|
||
|
||
아이콘 팩 루트에 포함된 `index.html` 파일을 웹 브라우저로 열면 편리한 전용 탐색기가 제공됩니다:
|
||
|
||
- **실시간 검색**: 카멜케이스명, FontAwesome 별칭, 영문 키워드로 즉시 검색
|
||
- **원클릭 복사**: 아이콘 카드를 클릭하면 즉시 `<i class="fi ..."></i>` HTML 코드가 클립보드에 복사
|
||
- **스타일 토글**: 상단 버튼을 통해 전체 아이콘의 "채움형(기본)"과 "솔리드형(solid)" 모드를 한눈에 비교
|
||
- **크기 및 테마 조절**: 16px부터 48px까지 실시간 크기 변경 및 라이트/다크 테마 전환 지원
|
||
|
||
---
|
||
|
||
## ⚙️ 동작 원리 (Technical Mechanism)
|
||
|
||
이 아이콘팩은 CSS 마스크 속성과 CSS 변수를 결합한 초경량 설계를 적용하고 있습니다:
|
||
|
||
```css
|
||
/* 공통 마스크 베이스 */
|
||
.fi {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: -0.125em;
|
||
background-color: currentColor;
|
||
-webkit-mask: var(--i) no-repeat 50% 50% / 100% 100%;
|
||
mask: var(--i) no-repeat 50% 50% / 100% 100%;
|
||
flex-shrink: 0;
|
||
--i: var(--f, var(--r)); /* 기본값: 채움(Fill) 형 */
|
||
}
|
||
|
||
/* 솔리드 모드 전환 */
|
||
.fi.solid, .fi.fiSolid {
|
||
--i: var(--r, var(--f)); /* 선형(Regular) 아이콘으로 대체 */
|
||
}
|
||
|
||
/* 개별 아이콘 정의 (단 1줄로 Fill과 Solid를 모두 지원) */
|
||
.fiAdd, .fiPlus { --f: url(i/8.svg); --r: url(i/7.svg); }
|
||
```
|
||
|
||
- 중복된 CSS 셀렉터 선언을 100% 배제하여 CSS 파일 크기를 혁신적으로 압축했습니다.
|
||
- 배경색은 `currentColor`로 지정되므로 텍스트 색상(`color`) 속성을 완벽하게 상속합니다.
|
||
|
||
---
|
||
|
||
## 📄 라이선스 (License)
|
||
|
||
- 원본 아이콘 디자인: [Microsoft Fluent System Icons](https://github.com/microsoft/fluentui-system-icons) (MIT License)
|
||
- 아이콘팩 최적화 및 카멜케이스 매핑: **BitPlus Platform** (MIT License)
|