## 📁 디렉터리 구성 (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 문서의 `` 태그 안에 `fluenticons.min.css`를 추가합니다: ```html ``` ### 2. 아이콘 사용하기 기본 클래스 `fi`와 함께 원하는 아이콘 클래스를 지정합니다: ```html ``` --- ## 🎨 스타일 커스터마이징 (Styling) CSS Mask 기반으로 동작하므로 표준 텍스트 CSS 속성을 그대로 사용하여 크기와 색상을 조절할 수 있습니다: ### 크기 조절 (Sizing) 기본 크기는 `1em` × `1em`이므로 부모 폰트 크기를 따르거나 `font-size`로 조절합니다: ```html ``` ### 색상 조절 (Coloring) 아이콘은 부모 요소의 `color`(`currentColor`)를 상속받습니다: ```html ``` --- ## 🔍 주요 아이콘 및 FontAwesome 매핑표 기존 FontAwesome 사용자가 쉽게 적응할 수 있도록 직관적인 별칭을 제공합니다: | 용도 / 의미 | FluentIcons 클래스 (주요 별칭) | 선형 전환 예시 | FontAwesome 대응명 | | :--- | :--- | :--- | :--- | | **추가 / 플러스** | `fiPlus`, `fiAdd` | `` | `fa-plus` | | **원형 추가** | `fiPlusCircle`, `fiAddCircle` | `` | `fa-plus-circle` | | **삭제 / 휴지통** | `fiTrash`, `fiDelete`, `fiDel` | `` | `fa-trash`, `fa-trash-can` | | **사용자 / 프로필** | `fiUser`, `fiPerson` | `` | `fa-user` | | **팀 / 그룹** | `fiTeam`, `fiPeopleTeam`, `fiGroup` | `` | `fa-users` | | **체크 / 확인** | `fiCheck`, `fiCheckmark` | `` | `fa-check` | | **원형 체크** | `fiCircleCheck`, `fiCheckCircle` | `` | `fa-check-circle` | | **닫기 / 취소** | `fiClose`, `fiTimes`, `fiDismiss`, `fiXmark`| `` | `fa-times`, `fa-xmark` | | **원형 닫기** | `fiCircleXmark`, `fiDismissCircle` | `` | `fa-times-circle` | | **업로드** | `fiUpload`, `fiArrUpload` | `` | `fa-upload` | | **다운로드** | `fiDownload`, `fiArrDownload` | `` | `fa-download` | | **클라우드 업로드** | `fiCloudUpload`, `fiCloudArrUp` | `` | `fa-cloud-upload-alt` | | **달력** | `fiCalendar`, `fiCal`, `fiCalToday` | `` | `fa-calendar` | | **태양 / 라이트** | `fiSun`, `fiWeatherSunny` | `` | `fa-sun` | | **달 / 다크** | `fiMoon`, `fiWeatherMoon` | `` | `fa-moon` | | **문서 / 파일** | `fiDoc`, `fiFile`, `fiFileLines` | `` | `fa-file`, `fa-file-alt` | | **클립 / 첨부** | `fiClip`, `fiAttach`, `fiPaperclip` | `` | `fa-paperclip` | | **알림 / 벨** | `fiBell`, `fiAlert` | `` | `fa-bell` | | **수정 / 펜** | `fiPen`, `fiPencil`, `fiEdit` | `` | `fa-pen`, `fa-edit` | | **복사** | `fiCopy`, `fiClone` | `` | `fa-copy`, `fa-clone` | | **붙여넣기** | `fiPaste`, `fiClipPaste` | `` | `fa-paste` | | **홈 / 집** | `fiHome`, `fiHouse` | `` | `fa-home`, `fa-house` | | **새로고침 / 동기화**| `fiSync`, `fiRefresh`, `fiArrowsRotate`| `` | `fa-sync`, `fa-rotate` | | **화살표(좌/우/상/하)**| `fiArrLeft`, `fiArrRight`, `fiArrUp`, `fiArrDown` | `` | `fa-arrow-left` 등 | | **꺾쇠(Chevron)** | `fiChevronLeft`, `fiChevronRight`, `fiChevronUp`, `fiChevronDown` | `` | `fa-chevron-down` 등 | | **검색** | `fiSearch`, `fiDocSearch` | `` | `fa-search` | | **와이파이** | `fiWifi`, `fiWifi4` | `` | `fa-wifi` | | **하트 / 좋아요** | `fiHeart` | `` | `fa-heart` | | **별 / 즐겨찾기** | `fiStar` | `` | `fa-star` | | **로그인 / 진입** | `fiLogin`, `fiSignIn`, `fiSignInAlt` | `` | `fa-sign-in-alt` | --- ## 💻 인터랙티브 아이콘 탐색기 (`index.html`) 아이콘 팩 루트에 포함된 `index.html` 파일을 웹 브라우저로 열면 편리한 전용 탐색기가 제공됩니다: - **실시간 검색**: 카멜케이스명, FontAwesome 별칭, 영문 키워드로 즉시 검색 - **원클릭 복사**: 아이콘 카드를 클릭하면 즉시 `` 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)