📖 프로젝트 소개
바이브 아이콘 라이브러리는 웹 개발에서 가장 많이 사용되는 8개의 주요 아이콘 라이브러리를 한눈에 비교하고 탐색할 수 있는 도구입니다. 각 라이브러리마다 20개의 특별한 아이콘들을 선별하여 제공하며, 프로젝트에 가장 적합한 아이콘 스타일을 선택할 수 있습니다.
✨ 주요 기능
🎨 다크/라이트 모드
사용자 환경에 맞는 테마 선택 가능
🎯 특별한 아이콘 선별
각 라이브러리마다 20개의 특별한 아이콘 제공
🖼️ 로컬 SVG 지원
Feather Icons와 Lucide는 로컬 SVG 파일로 로드
📱 반응형 디자인
모든 디바이스에서 최적화된 경험
🎨 지원하는 아이콘 라이브러리
Feather Icons
로컬 SVG 파일
Lucide
로컬 SVG 파일
Material Icons
Google (특별한 아이콘)
Font Awesome
FontAwesome (특별한 아이콘)
Remix Icon
RemixIcon (건물 관련)
Bootstrap Icons
Bootstrap
Tabler Icons
Tabler
Heroicons
Tailwind CSS
🚀 사용 방법
- 아이콘 탐색: 각 라이브러리별로 20개의 특별한 아이콘들을 확인하세요
- 테마 변경: 다크 모드 버튼으로 테마를 변경하세요
- 라이브러리 방문: 각 라이브러리 이름을 클릭하여 공식 사이트를 방문하세요
- 스타일 비교: 동일한 개념의 아이콘들이 각 라이브러리에서 어떻게 다르게 표현되는지 비교하세요
💡 기술 스택
- HTML5: 시맨틱 마크업
- CSS3: CSS Variables, Grid, Flexbox
- JavaScript (ES6+): 동적 렌더링 및 상호작용
- SVG: 벡터 아이콘 지원 (로컬 파일)
- Web Fonts: 아이콘 폰트 지원 (CDN)
- Fetch API: 로컬 SVG 파일 로딩
🎯 프로젝트 목표
웹 개발자들이 아이콘 라이브러리를 선택할 때 겪는 어려움을 해결하고, 각 라이브러리의 특별한 아이콘들을 한눈에 비교할 수 있는 직관적인 도구를 제공합니다.
주요 해결 과제
- 여러 아이콘 라이브러리 사이트를 개별적으로 방문해야 하는 번거로움
- 각 라이브러리의 특별한 아이콘들을 쉽게 찾기 어려운 문제
- 프로젝트에 적합한 아이콘 라이브러리 선택의 어려움
- 로컬 SVG 파일과 CDN 폰트의 혼합 사용으로 인한 호환성 문제
🔧 개발 정보
프로젝트명: 바이브 아이콘 라이브러리 (Vibe Icon Library)
개발 언어: HTML, CSS, JavaScript
라이선스: MIT License
버전: 2.0.0
특별 기능: 로컬 SVG 파일 지원, 특별한 아이콘 선별
📞 문의 및 지원
프로젝트에 대한 문의사항이나 개선 제안이 있으시면 언제든지 연락해 주세요.
🔍 아이콘 라이브러리별 특징
- Feather Icons & Lucide: 로컬 SVG 파일로 로드되어 안정적인 표시
- Material Icons: Google의 특별한 UI 아이콘들 (쇼핑카트, 메뉴, 확장 등)
- Font Awesome: 특별한 인터페이스 아이콘들 (햄버거메뉴, 화살표, 확장 등)
- Remix Icon: 건물 관련 아이콘들 (집, 건물, 은행, 상점, 병원 등)
- Bootstrap Icons, Tabler Icons, Heroicons: 기본적인 UI 아이콘들
← 메인 페이지로 돌아가기