gper/Fluent-Icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Fluent-Icons/README.md
T
gper a3e9969175 README.md 업데이트
2026-09-29 03:20:18 +00:00

8.0 KiB
Raw Permalink Blame History

📁 디렉터리 구성 (Directory Structure)

아이콘팩을 웹 프로젝트에 배포할 때 아래와 같이 폴더 구조를 유지합니다:

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를 추가합니다:

<link rel="stylesheet" href="./lib/fluenticons/fluenticons.min.css" />

2. 아이콘 사용하기

기본 클래스 fi와 함께 원하는 아이콘 클래스를 지정합니다:

<!-- 기본: 채움(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로 조절합니다:

<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)를 상속받습니다:

<!-- 인라인 스타일 -->
<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 변수를 결합한 초경량 설계를 적용하고 있습니다:

/* 공통 마스크 베이스 */
.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 (MIT License)
  • 아이콘팩 최적화 및 카멜케이스 매핑: BitPlus Platform (MIT License)
Reference in New Issue View Git Blame Copy Permalink