README.md 업데이트
This commit is contained in:
@@ -1,35 +1,3 @@
|
||||
# ✨ Fluent Icons (BitPlus Edition)
|
||||
|
||||
> **Microsoft Fluent System Icons 기반의 초경량화(81.7 KB) & 고성능 CSS Mask 아이콘 팩**
|
||||
> 1,497개 기본 아이콘 세트 (총 2,983개 SVG), FontAwesome 호환 별칭 및 직관적인 카멜케이스(camelCase) 네이밍 완비.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 주요 특징 (Key Features)
|
||||
|
||||
1. **초경량 스타일시트 (Ultra-lightweight)**
|
||||
- `fluenticons.min.css` 단 **81.7 KB** (Gzip 압축 시 약 **15.2 KB**)
|
||||
- 기존 176.8 KB 대비 **53.8% 용량 감축** 달성
|
||||
- 단일 CSS 규칙 및 경로 최적화(`i/{id}.svg`)로 최소 바이트 실현
|
||||
|
||||
2. **단일 클래스 & 2가지 모드 전환 (Fill & Solid)**
|
||||
- **기본값**: 채움형(Filled) 디자인 자동 적용 (`<i class="fi fiPlus"></i>`)
|
||||
- **솔리드 전환**: `.solid` 클래스만 붙이면 선형(Outline) 아이콘으로 즉시 전환 (`<i class="fi fiPlus solid"></i>`)
|
||||
|
||||
3. **엄격한 카멜케이스 & No-Hyphen 네이밍**
|
||||
- 중간바(`-`) 없는 직관적인 카멜케이스 적용 (`fiAccessCheck`, `fiUpload`, `fiSun`, `fiUser` 등)
|
||||
- 불필요하게 긴 클래스명을 대폭 줄여 HTML 마크업 바이트 절약
|
||||
|
||||
4. **FontAwesome 개발자 친화 별칭 (188+ Aliases)**
|
||||
- FontAwesome에서 널리 쓰이는 명칭(`fiPlus`, `fiTrash`, `fiUser`, `fiDownload`, `fiHeart`, `fiCheck`, `fiClose` 등)을 별칭으로 완벽 지원
|
||||
|
||||
5. **현대적인 CSS Mask 렌더링**
|
||||
- 웹폰트(Font)의 깜빡임(FOIT/FOUT)이나 렌더링 깨짐 현상 없음
|
||||
- 인라인 SVG처럼 HTML 코드가 비대해지지 않고 브라우저 캐싱 100% 활용
|
||||
- `color` (`currentColor`) 및 `font-size`에 자연스럽게 반응하며 호버/트랜지션 지원
|
||||
|
||||
---
|
||||
|
||||
## 📁 디렉터리 구성 (Directory Structure)
|
||||
|
||||
아이콘팩을 웹 프로젝트에 배포할 때 아래와 같이 폴더 구조를 유지합니다:
|
||||
|
||||
Reference in New Issue
Block a user