{"_id":"@designbasekorea/icons-webfont","_rev":"5-8c9969aa4f07150e56610e69f442a2c9","name":"@designbasekorea/icons-webfont","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@designbasekorea/icons-webfont","version":"0.1.0","_id":"@designbasekorea/icons-webfont@0.1.0","maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"homepage":"https://github.com/designbase/designbase-library#readme","bugs":{"url":"https://github.com/designbase/designbase-library/issues"},"dist":{"shasum":"65e90e17e0168325d485685606162d6a188489f9","tarball":"https://registry.npmjs.org/@designbasekorea/icons-webfont/-/icons-webfont-0.1.0.tgz","fileCount":6,"integrity":"sha512-Zo66P7sUMTQlAuHqBv90Dk+yyxlnB/5yAz932SCY9LkuiPW4c2FYhXXx8WX9kwB0Redhq1t7CWrzRzEH4wSRSw==","signatures":[{"sig":"MEUCIQCOTr4PmNjCqVywE+9OPwGU9rdiPdUjZ4JKPeq/NXvhkgIgYjcbSnV8y24tepxP1SN0iPTuBQ7T5P0aQ1XqYlE80BQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":470374},"type":"commonjs","exports":{".":"./dist/webfont/icons.css","./css":"./dist/webfont/icons.css","./html":"./dist/webfont/icons.html","./json":"./dist/webfont/icons.json","./woff":"./dist/webfont/icons.woff","./woff2":"./dist/webfont/icons.woff2","./package.json":"./package.json"},"gitHead":"21c0569902e2ede2ec446fe7abee4b13811eb441","scripts":{"prepublishOnly":"node scripts/build-and-copy.cjs"},"_npmUser":{"name":"designbasekorea","email":"designbasekorea@gmail.com"},"repository":{"url":"git+https://github.com/designbase/designbase-library.git","type":"git","directory":"packages/icons-webfont"},"_npmVersion":"10.8.2","description":"Designbase 아이콘 웹폰트 배포용 패키지","directories":{},"sideEffects":false,"_nodeVersion":"23.7.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"fs-extra":"^11.3.1"},"_npmOperationalInternal":{"tmp":"tmp/icons-webfont_0.1.0_1757339549783_0.7274549949343001","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@designbasekorea/icons-webfont","version":"0.1.1","_id":"@designbasekorea/icons-webfont@0.1.1","maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"homepage":"https://github.com/designbasekorea/Designbase-Library#readme","bugs":{"url":"https://github.com/designbasekorea/Designbase-Library/issues"},"dist":{"shasum":"83bc7301220eaa6707474c17e3a4ef3b70e9ce3f","tarball":"https://registry.npmjs.org/@designbasekorea/icons-webfont/-/icons-webfont-0.1.1.tgz","fileCount":6,"integrity":"sha512-IcLUYCKTCXFo2XK1DQVtq9/cHn5egphUuZ1nsQR7asBzmBYaM0gY76faaqzd05Ihpzd24Dv7mf2klhRKFyTfAw==","signatures":[{"sig":"MEYCIQDWBmulbex5sFMz1eeULr1ynbStZQOwm+mWKoWclly15QIhAKZCYjkcBLyho32RUGmSM3+/R7RgOrtObvLgT25rm4mV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":470376},"type":"commonjs","exports":{".":"./dist/webfont/icons.css","./css":"./dist/webfont/icons.css","./html":"./dist/webfont/icons.html","./json":"./dist/webfont/icons.json","./woff":"./dist/webfont/icons.woff","./woff2":"./dist/webfont/icons.woff2","./package.json":"./package.json"},"gitHead":"77f024a7f318fb78dbed2b7495e5173044100eed","scripts":{"prepublishOnly":"node scripts/build-and-copy.cjs"},"_npmUser":{"name":"designbasekorea","email":"designbasekorea@gmail.com"},"repository":{"url":"git+https://github.com/designbasekorea/Designbase-Library.git","type":"git","directory":"packages/icons-webfont"},"_npmVersion":"10.8.2","description":"Designbase 아이콘 웹폰트 배포용 패키지","directories":{},"sideEffects":false,"_nodeVersion":"23.7.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"fs-extra":"^11.3.1"},"_npmOperationalInternal":{"tmp":"tmp/icons-webfont_0.1.1_1757583917588_0.021285852635702707","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@designbasekorea/icons-webfont","version":"0.1.2","_id":"@designbasekorea/icons-webfont@0.1.2","maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"homepage":"https://github.com/designbasekorea/Designbase-Library#readme","bugs":{"url":"https://github.com/designbasekorea/Designbase-Library/issues"},"dist":{"shasum":"fca64505bf774fa1affe521dab8ebc29866f8a96","tarball":"https://registry.npmjs.org/@designbasekorea/icons-webfont/-/icons-webfont-0.1.2.tgz","fileCount":7,"integrity":"sha512-+gfqb7d89j3jL4GXkQRGAyCjLU2v5LkYOS9ZmcX2gU/ZYxMrLtaVDRGuPo+nsKe8hIeDd17mYFqPwpiiR4vj8g==","signatures":[{"sig":"MEYCIQDnY2Uz8ba0yIl3/hgofoGO7DLvWZl9UnUCh9LlVHFX8wIhAInoBz5V3lmznKjh2Eyv4kIxJCfN0ehi83FuZjn5K+cj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":480648},"type":"commonjs","exports":{".":"./dist/webfont/icons.css","./css":"./dist/webfont/icons.css","./html":"./dist/webfont/icons.html","./json":"./dist/webfont/icons.json","./woff":"./dist/webfont/icons.woff","./woff2":"./dist/webfont/icons.woff2","./package.json":"./package.json"},"gitHead":"77f024a7f318fb78dbed2b7495e5173044100eed","scripts":{"prepublishOnly":"node scripts/build-and-copy.cjs"},"_npmUser":{"name":"designbasekorea","email":"designbasekorea@gmail.com"},"repository":{"url":"git+https://github.com/designbasekorea/Designbase-Library.git","type":"git","directory":"packages/icons-webfont"},"_npmVersion":"10.8.2","description":"Designbase 아이콘 웹폰트 배포용 패키지","directories":{},"sideEffects":false,"_nodeVersion":"23.7.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"fs-extra":"^11.3.1"},"_npmOperationalInternal":{"tmp":"tmp/icons-webfont_0.1.2_1760356544659_0.4968116528421458","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@designbasekorea/icons-webfont","version":"0.1.3","_id":"@designbasekorea/icons-webfont@0.1.3","maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"homepage":"https://github.com/designbasekorea/Designbase-Library#readme","bugs":{"url":"https://github.com/designbasekorea/Designbase-Library/issues"},"dist":{"shasum":"506fce2f4739c89f850eefe8a7d8a24116dd3acb","tarball":"https://registry.npmjs.org/@designbasekorea/icons-webfont/-/icons-webfont-0.1.3.tgz","fileCount":7,"integrity":"sha512-DsXUOCvyowztxseAiytem6Xj36eqGLftBL4OC4UCZcbIq7OS06TVV/Ge5fKRJESlMiQ/TyqSpvPQcjdpyD2TMw==","signatures":[{"sig":"MEQCIHDPoAAkyNETrIw8RVm8uyUuJRZMgZsv3Bs/HVySsR7WAiAmJekiLrNmOujNWGMg+TYxdwbSKeLIKDBwlYVHmo75zg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":480648},"type":"commonjs","exports":{".":"./dist/webfont/icons.css","./css":"./dist/webfont/icons.css","./html":"./dist/webfont/icons.html","./json":"./dist/webfont/icons.json","./woff":"./dist/webfont/icons.woff","./woff2":"./dist/webfont/icons.woff2","./package.json":"./package.json"},"gitHead":"77f024a7f318fb78dbed2b7495e5173044100eed","scripts":{"prepublishOnly":"node scripts/build-and-copy.cjs"},"_npmUser":{"name":"designbasekorea","email":"designbasekorea@gmail.com"},"repository":{"url":"git+https://github.com/designbasekorea/Designbase-Library.git","type":"git","directory":"packages/icons-webfont"},"_npmVersion":"10.8.2","description":"Designbase 아이콘 웹폰트 배포용 패키지","directories":{},"sideEffects":false,"_nodeVersion":"23.7.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"fs-extra":"^11.3.1"},"_npmOperationalInternal":{"tmp":"tmp/icons-webfont_0.1.3_1760359555646_0.3447181804554236","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@designbasekorea/icons-webfont","version":"0.1.4","description":"Designbase 아이콘 웹폰트 배포용 패키지","type":"commonjs","sideEffects":false,"exports":{".":"./dist/webfont/icons.css","./css":"./dist/webfont/icons.css","./json":"./dist/webfont/icons.json","./html":"./dist/webfont/icons.html","./woff2":"./dist/webfont/icons.woff2","./woff":"./dist/webfont/icons.woff","./package.json":"./package.json"},"scripts":{"prepublishOnly":"node scripts/build-and-copy.cjs"},"dependencies":{},"devDependencies":{"fs-extra":"^11.3.1"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/designbasekorea/Designbase-Library.git","directory":"packages/icons-webfont"},"_id":"@designbasekorea/icons-webfont@0.1.4","gitHead":"77f024a7f318fb78dbed2b7495e5173044100eed","bugs":{"url":"https://github.com/designbasekorea/Designbase-Library/issues"},"homepage":"https://github.com/designbasekorea/Designbase-Library#readme","_nodeVersion":"23.7.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-gsephK7OaHqMsY3xmw5f94QzOKGRnuZ6cplrPDppimOSwklslAdkNhclUW4mAjTCPiNNcnIdJhuObdW577wzhA==","shasum":"7cd329e123e312684df3cee96e7c026a686a13c8","tarball":"https://registry.npmjs.org/@designbasekorea/icons-webfont/-/icons-webfont-0.1.4.tgz","fileCount":7,"unpackedSize":533632,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD+PJaLtPgegCsQoX0QOITya3yDfkp/NoSij7dKQwt6PQIhAKG00S/Vaqb2eEqiKSb04/5/jNqjyNrNoLOdzdOsFXaL"}]},"_npmUser":{"name":"designbasekorea","email":"designbasekorea@gmail.com"},"directories":{},"maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icons-webfont_0.1.4_1760965933089_0.49929033192102046"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-08T13:52:29.693Z","modified":"2025-10-20T13:12:13.475Z","0.1.0":"2025-09-08T13:52:29.973Z","0.1.1":"2025-09-11T09:45:17.817Z","0.1.2":"2025-10-13T11:55:44.912Z","0.1.3":"2025-10-13T12:45:55.915Z","0.1.4":"2025-10-20T13:12:13.308Z"},"bugs":{"url":"https://github.com/designbasekorea/Designbase-Library/issues"},"homepage":"https://github.com/designbasekorea/Designbase-Library#readme","repository":{"type":"git","url":"git+https://github.com/designbasekorea/Designbase-Library.git","directory":"packages/icons-webfont"},"description":"Designbase 아이콘 웹폰트 배포용 패키지","maintainers":[{"name":"designbasekorea","email":"designbasekorea@gmail.com"}],"readme":"# @designbasekorea/icons-webfont\n\nDesignbase 아이콘 웹폰트 - HTML/CSS로 사용할 수 있는 아이콘 폰트 라이브러리입니다.\n\n![npm](https://img.shields.io/npm/v/@designbasekorea/icons-webfont)\n![license](https://img.shields.io/npm/l/@designbasekorea/icons-webfont)\n\n## 📦 설치\n\n### NPM\n```bash\nnpm install @designbasekorea/icons-webfont\n```\n\n### Yarn\n```bash\nyarn add @designbasekorea/icons-webfont\n```\n\n### pnpm\n```bash\npnpm add @designbasekorea/icons-webfont\n```\n\n## 🚀 사용법\n\n### CSS import (NPM)\n\n```tsx\n// React/Next.js\nimport '@designbasekorea/icons-webfont/dist/css/designbase-icons.css';\n\n// 또는 SCSS\n@import '@designbasekorea/icons-webfont/dist/css/designbase-icons.css';\n```\n\n### CDN 사용\n\n```html\n\n\n\n\n\n```\n\n### HTML에서 사용\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### CSS로 스타일링\n\n```css\n/* 크기 조정 */\n.icon-large {\n font-size: 32px;\n}\n\n.icon-small {\n font-size: 16px;\n}\n\n/* 색상 변경 */\n.icon-primary {\n color: var(--db-color-primary);\n}\n\n.icon-success {\n color: var(--db-color-success);\n}\n\n/* 애니메이션 */\n.icon-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n```\n\n## 🎨 사용 가능한 아이콘\n\n### 일반 아이콘\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### 액션 아이콘\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### 화살표/네비게이션\n```html\n\n\n\n\n\n\n\n\n```\n\n### 미디어/통신\n```html\n\n\n\n\n\n\n\n\n```\n\n### 기타\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## 💡 사용 팁\n\n### 1. 테마 색상과 함께 사용\n\n```html\n\n\n\n```\n\n### 2. 버튼에 아이콘 추가\n\n```html\n\n\n\n```\n\n### 3. 입력 필드에 아이콘\n\n```html\n
\n \n \n
\n\n\n```\n\n### 4. 알림 배지\n\n```html\n
\n \n 5\n
\n\n\n```\n\n### 5. 로딩 스피너\n\n```html\n\n\n\n```\n\n## 🎯 실전 예제\n\n### 네비게이션 메뉴\n\n```html\n\n\n\n```\n\n### 상태 표시\n\n```html\n
\n
\n \n 완료\n
\n
\n \n 실패\n
\n
\n \n 경고\n
\n
\n\n\n```\n\n### 카드 헤더\n\n```html\n
\n
\n
\n \n

문서 제목

\n
\n \n
\n
\n

카드 내용...

\n
\n
\n\n\n```\n\n## 📦 패키지 내용물\n\n```\n@designbasekorea/icons-webfont/\n├── dist/\n│ ├── css/\n│ │ └── designbase-icons.css # 아이콘 폰트 CSS\n│ ├── fonts/\n│ │ ├── designbase-icons.woff2 # WOFF2 폰트\n│ │ ├── designbase-icons.woff # WOFF 폰트\n│ │ ├── designbase-icons.ttf # TTF 폰트\n│ │ └── designbase-icons.eot # EOT 폰트 (IE)\n│ ├── html/\n│ │ └── preview.html # 아이콘 미리보기\n│ └── json/\n│ └── icons.json # 아이콘 메타데이터\n└── package.json\n```\n\n## 🔗 관련 패키지\n\n- [@designbasekorea/icons](../icons) - React 아이콘 컴포넌트\n- [@designbasekorea/ui](../ui) - UI 컴포넌트 라이브러리\n\n## 🆚 React vs Webfont\n\n### Webfont (@designbasekorea/icons-webfont) - 현재 패키지\n**장점**:\n- ✅ 순수 HTML/CSS에서 사용 가능\n- ✅ React 없이 사용 가능\n- ✅ CSS로 간편하게 스타일링\n- ✅ 브라우저 캐싱 가능\n\n**단점**:\n- ❌ 동적 제어 제한적\n- ❌ 전체 폰트 로드 필요 (번들 크기)\n\n```html\n\n```\n\n### React 컴포넌트 (@designbasekorea/icons)\n**장점**:\n- ✅ TypeScript 지원\n- ✅ Props로 동적 제어\n- ✅ Tree shaking 지원\n- ✅ React 이벤트 핸들러\n\n**단점**:\n- ❌ React 프로젝트에서만 사용 가능\n\n```tsx\n\n```\n\n## 🔄 버전 히스토리\n\n### 0.1.1 (Latest)\n- ✅ 100+ 아이콘 웹폰트 제공\n- ✅ WOFF2, WOFF, TTF, EOT 형식 지원\n- ✅ CSS 클래스 기반 사용\n\n## 📄 라이선스\n\nMIT\n\n","readmeFilename":"README.md"}