icon-craft 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/LICENSE +45 -0
  2. package/README.md +766 -0
  3. package/fonts/iconcraft.otf +0 -0
  4. package/fonts/iconcraft.ttf +0 -0
  5. package/fonts/iconcraft.woff +0 -0
  6. package/fonts/iconcraft.woff2 +0 -0
  7. package/package.json +11 -0
  8. package/style.css +10480 -0
package/README.md ADDED
@@ -0,0 +1,766 @@
1
+ # Icon-Craft ๐ŸŽจโšก
2
+
3
+ <div align="center">
4
+
5
+ ![Icon-Craft Banner](https://img.shields.io/badge/Icon--Craft-3000%2B%20Icons-blueviolet?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==)
6
+
7
+ **A modern, developer-friendly icon library unifying the simplicity of Feather Icons with the richness of Remix Icons**
8
+
9
+ [![Version](https://img.shields.io/badge/version-1.0.0-blue?style=flat-square)](https://github.com/PATEL-KRISH-0/icon-craft/releases)
10
+ [![jsDelivr Hits](https://img.shields.io/jsdelivr/gh/hm/PATEL-KRISH-0/icon-craft?style=flat-square&color=orange)](https://cdn.jsdelivr.net/gh/PATEL-KRISH-0/icon-craft@main/style.css)
11
+ [![License](https://img.shields.io/badge/License-MIT-green.svg?style=flat-square)](LICENSE)
12
+ [![Icons](https://img.shields.io/badge/icons-3000%2B-purple?style=flat-square)](https://github.com/PATEL-KRISH-0/icon-craft)
13
+
14
+ [๐Ÿš€ Quick Start](#-quick-start) ยท [๐Ÿ“– Documentation](#-documentation) ยท [๐ŸŽจ Icon Browser](https://patel-krish-0.github.io/icon-craft) ยท [โš›๏ธ React Package](https://github.com/PATEL-KRISH-0/icon-craft/tree/main/packages/react)
15
+
16
+ </div>
17
+
18
+ ---
19
+
20
+ ## ๐ŸŒŸ Overview
21
+
22
+ Icon-Craft combines **3000+ carefully curated icons** from two of the most popular icon libraries into a single, unified icon font. Whether you're building dashboards, websites, admin panels, or web apps, Icon-Craft provides everything you need in one lightweight package.
23
+
24
+ ### Why Icon-Craft?
25
+
26
+ - **๐ŸŽจ Unified Design Language** - Consistent visual style across all 3000+ icons
27
+ - **๐Ÿš€ Multiple Integration Options** - CDN, npm, React components, or direct download
28
+ - **โšก Lightning Fast** - Optimized font files loaded via global CDN
29
+ - **๐Ÿ“ฆ Zero Dependencies** - Just include the CSS and start using icons
30
+ - **๐ŸŽฏ Developer Friendly** - Simple class-based syntax: `<i class="ico-home"></i>`
31
+ - **๐ŸŒ Framework Agnostic** - Works with React, Vue, Angular, Svelte, or vanilla HTML
32
+
33
+ ---
34
+
35
+ ## โœจ Features
36
+
37
+ | Feature | Description |
38
+ |---------|-------------|
39
+ | **3000+ Icons** | Carefully curated from Feather Icons & Remix Icon |
40
+ | **Icon Font** | WOFF2, WOFF, and TTF formats for maximum compatibility |
41
+ | **CDN Ready** | Powered by jsDelivr - globally distributed & fast |
42
+ | **Lightweight** | Optimized font files for minimal load time |
43
+ | **Simple Usage** | Class-based: `<i class="ico-home"></i>` |
44
+ | **Variants** | Base, fill (`-fill`), and line (`-line`) styles |
45
+ | **Customizable** | Size, color, rotation, opacity - all via CSS |
46
+ | **React Components** | Official TypeScript-enabled package available |
47
+ | **Retina Ready** | Crisp rendering on all screen resolutions |
48
+ | **MIT Licensed** | Free for personal and commercial use |
49
+
50
+ ---
51
+
52
+ ## ๐Ÿš€ Quick Start
53
+
54
+ ### CDN (Recommended)
55
+
56
+ The fastest way to get started. Just add one line to your HTML:
57
+
58
+ ```html
59
+ <!DOCTYPE html>
60
+ <html>
61
+ <head>
62
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PATEL-KRISH-0/icon-craft@main/style.css">
63
+ </head>
64
+ <body>
65
+ <!-- Use icons anywhere -->
66
+ <i class="ico-home"></i>
67
+ <i class="ico-heart"></i>
68
+ <i class="ico-search"></i>
69
+ </body>
70
+ </html>
71
+ ```
72
+
73
+ ### NPM
74
+
75
+ Install via npm for local hosting:
76
+
77
+ ```bash
78
+ npm install icon-craft
79
+ ```
80
+
81
+ Then import in your project:
82
+
83
+ ```javascript
84
+ // Import the CSS
85
+ import 'icon-craft/style.css';
86
+ ```
87
+
88
+ ```html
89
+ <!-- Use icons in your components -->
90
+ <i class="ico-home"></i>
91
+ ```
92
+
93
+ ### Download
94
+
95
+ 1. Download the [latest release](https://github.com/PATEL-KRISH-0/icon-craft/releases)
96
+ 2. Extract and copy `style.css` and `fonts/` folder to your project
97
+ 3. Link the CSS file:
98
+
99
+ ```html
100
+ <link rel="stylesheet" href="path/to/style.css">
101
+ ```
102
+
103
+ ---
104
+
105
+ ## ๐Ÿ“– Documentation
106
+
107
+ ### Basic Usage
108
+
109
+ Icons use a simple class-based syntax with the `ico-` prefix:
110
+
111
+ ```html
112
+ <!-- Basic icons -->
113
+ <i class="ico-home"></i>
114
+ <i class="ico-heart"></i>
115
+ <i class="ico-search"></i>
116
+ <i class="ico-star"></i>
117
+
118
+ <!-- Fill variants (solid) -->
119
+ <i class="ico-play-fill"></i>
120
+ <i class="ico-settings-fill"></i>
121
+ <i class="ico-user-fill"></i>
122
+
123
+ <!-- Line variants (outline) -->
124
+ <i class="ico-heart-line"></i>
125
+ <i class="ico-star-line"></i>
126
+ <i class="ico-bell-line"></i>
127
+ ```
128
+
129
+ ### Icon Naming Convention
130
+
131
+ | Pattern | Description | Examples |
132
+ |---------|-------------|----------|
133
+ | `ico-{name}` | Base icon | `ico-home`, `ico-heart`, `ico-search` |
134
+ | `ico-{name}-fill` | Filled/solid variant | `ico-star-fill`, `ico-heart-fill` |
135
+ | `ico-{name}-line` | Outline/line variant | `ico-star-line`, `ico-bell-line` |
136
+
137
+ ### Customization
138
+
139
+ #### Size
140
+
141
+ ```html
142
+ <style>
143
+ .small-icon { font-size: 16px; }
144
+ .medium-icon { font-size: 24px; }
145
+ .large-icon { font-size: 48px; }
146
+ </style>
147
+
148
+ <i class="ico-home small-icon"></i>
149
+ <i class="ico-heart medium-icon"></i>
150
+ <i class="ico-star large-icon"></i>
151
+ ```
152
+
153
+ #### Color
154
+
155
+ ```html
156
+ <style>
157
+ .red-icon { color: #ff0000; }
158
+ .blue-icon { color: #0066cc; }
159
+ .gold-icon { color: gold; }
160
+ </style>
161
+
162
+ <i class="ico-heart red-icon"></i>
163
+ <i class="ico-star gold-icon"></i>
164
+ ```
165
+
166
+ #### Rotation & Animation
167
+
168
+ ```html
169
+ <style>
170
+ .rotate-90 { transform: rotate(90deg); }
171
+ .spin { animation: spin 1s linear infinite; }
172
+
173
+ @keyframes spin {
174
+ from { transform: rotate(0deg); }
175
+ to { transform: rotate(360deg); }
176
+ }
177
+ </style>
178
+
179
+ <i class="ico-arrow-right rotate-90"></i>
180
+ <i class="ico-loader spin"></i>
181
+ ```
182
+
183
+ #### With Buttons
184
+
185
+ ```html
186
+ <style>
187
+ .btn {
188
+ display: inline-flex;
189
+ align-items: center;
190
+ gap: 8px;
191
+ padding: 10px 20px;
192
+ border: none;
193
+ border-radius: 6px;
194
+ background: #007bff;
195
+ color: white;
196
+ cursor: pointer;
197
+ font-size: 16px;
198
+ }
199
+
200
+ .btn i {
201
+ font-size: 18px;
202
+ }
203
+ </style>
204
+
205
+ <button class="btn">
206
+ <i class="ico-download"></i>
207
+ Download
208
+ </button>
209
+ ```
210
+
211
+ ---
212
+
213
+ ## ๐ŸŽจ Icon Categories
214
+
215
+ ### Popular Icons
216
+
217
+ | Category | Icons |
218
+ |----------|-------|
219
+ | **UI/Navigation** | `home`, `menu`, `settings`, `grid`, `layout`, `dashboard`, `sidebar` |
220
+ | **Arrows** | `arrow-left`, `arrow-right`, `arrow-up`, `arrow-down`, `chevron-*` |
221
+ | **Actions** | `search`, `download`, `upload`, `edit`, `trash`, `save`, `copy`, `share` |
222
+ | **Media** | `play`, `pause`, `stop`, `music`, `video`, `volume`, `mic`, `camera` |
223
+ | **Communication** | `mail`, `message`, `chat`, `phone`, `send`, `notification` |
224
+ | **Social** | `github`, `twitter`, `facebook`, `instagram`, `linkedin`, `youtube` |
225
+ | **User** | `user`, `users`, `account`, `profile`, `avatar`, `team`, `group` |
226
+ | **Files** | `file`, `folder`, `document`, `save`, `upload`, `download`, `cloud` |
227
+ | **Status** | `check`, `close`, `alert`, `info`, `warning`, `error`, `success` |
228
+ | **Commerce** | `shopping-cart`, `bag`, `basket`, `credit-card`, `dollar`, `tag` |
229
+
230
+ > **๐Ÿ“ Note:** Visit our [Icon Browser](https://patel-krish-0.github.io/icon-craft/browse.html) to explore all 3000+ icons with live preview, search, and copy functionality.
231
+
232
+ ---
233
+
234
+ ## ๐Ÿ’ป Framework Integration
235
+
236
+ ### React (CSS Approach)
237
+
238
+ ```jsx
239
+ import 'icon-craft/style.css';
240
+
241
+ function App() {
242
+ return (
243
+ <div>
244
+ <i className="ico-home"></i>
245
+ <button>
246
+ <i className="ico-download"></i>
247
+ Download
248
+ </button>
249
+ </div>
250
+ );
251
+ }
252
+ ```
253
+
254
+ ### React (Component Approach) โญ
255
+
256
+ For a better developer experience with React, use our official **@icon-craft/react** package:
257
+
258
+ ```bash
259
+ npm install @icon-craft/react
260
+ ```
261
+
262
+ ```jsx
263
+ import { IcoHome, IcoHeart, Ico } from '@icon-craft/react';
264
+
265
+ function App() {
266
+ return (
267
+ <div>
268
+ <IcoHome size={24} />
269
+ <IcoHeart size={32} color="red" />
270
+ <Ico name="IcoSearch" size={24} />
271
+ </div>
272
+ );
273
+ }
274
+ ```
275
+
276
+ [๐Ÿ“˜ View React Package Documentation โ†’](https://github.com/PATEL-KRISH-0/icon-craft/tree/main/packages/react)
277
+
278
+ ### Vue
279
+
280
+ ```vue
281
+ <script setup>
282
+ import 'icon-craft/style.css';
283
+ </script>
284
+
285
+ <template>
286
+ <i class="ico-home"></i>
287
+ <button>
288
+ <i class="ico-settings"></i>
289
+ Settings
290
+ </button>
291
+ </template>
292
+ ```
293
+
294
+ ### Angular
295
+
296
+ ```typescript
297
+ // angular.json
298
+ {
299
+ "styles": [
300
+ "node_modules/icon-craft/style.css"
301
+ ]
302
+ }
303
+ ```
304
+
305
+ ```html
306
+ <!-- component.html -->
307
+ <i class="ico-home"></i>
308
+ <button>
309
+ <i class="ico-download"></i>
310
+ Download
311
+ </button>
312
+ ```
313
+
314
+ ### Svelte
315
+
316
+ ```svelte
317
+ <script>
318
+ import 'icon-craft/style.css';
319
+ </script>
320
+
321
+ <i class="ico-star"></i>
322
+ <button>
323
+ <i class="ico-settings"></i>
324
+ Settings
325
+ </button>
326
+ ```
327
+
328
+ ---
329
+
330
+ ## ๐Ÿ“ฆ Available Packages
331
+
332
+ | Package | Description | Install | Documentation |
333
+ |---------|-------------|---------|---------------|
334
+ | **icon-craft** | CSS icon font (this package) | `npm install icon-craft` | [View README](#) |
335
+ | **@icon-craft/react** | React components with TypeScript | `npm install @icon-craft/react` | [View README](https://github.com/PATEL-KRISH-0/icon-craft/tree/main/packages/react) |
336
+
337
+ ### Quick Comparison
338
+
339
+ | Feature | icon-craft | @icon-craft/react |
340
+ |---------|-----------|-------------------|
341
+ | **Type** | Icon Font (CSS) | React Components |
342
+ | **TypeScript** | No | โœ… Full support |
343
+ | **Tree-shaking** | No | โœ… Yes |
344
+ | **Bundle Size** | ~150KB (full font) | 2-5KB per icon |
345
+ | **Usage** | `<i class="ico-*">` | `<IcoHome />` |
346
+ | **Customization** | CSS | Props (size, color, etc.) |
347
+ | **Best For** | HTML/CSS projects | React/TypeScript projects |
348
+
349
+ ---
350
+
351
+ ## ๐Ÿ“˜ TypeScript Support
352
+
353
+ While the icon font package itself is CSS-based, our **@icon-craft/react** package provides full TypeScript support with complete type definitions.
354
+
355
+ ### Type-Safe Icon Names
356
+
357
+ ```typescript
358
+ import type { IconName } from '@icon-craft/react';
359
+
360
+ // IconName is a union type of all 3000+ icon names
361
+ const icon: IconName = 'home'; // โœ… Valid
362
+ const invalid: IconName = 'not-exist'; // โŒ TypeScript error
363
+ ```
364
+
365
+ ### Available Types
366
+
367
+ ```typescript
368
+ // Core types available in @icon-craft/react
369
+ import {
370
+ IconName, // Union of all icon names
371
+ IcoProps, // Props for <Ico> component
372
+ IconComponentProps, // Props for individual icons
373
+ IconMetadata, // Icon metadata structure
374
+ IconStyle, // 'outline' | 'filled' | 'duotone'
375
+ IconCategory // Icon category names
376
+ } from '@icon-craft/react';
377
+ ```
378
+
379
+ ### Type-Safe Usage
380
+
381
+ ```typescript
382
+ import { Ico, IcoHome, IconName } from '@icon-craft/react';
383
+
384
+ // Dynamic icon with type safety
385
+ function DynamicIcon({ name }: { name: IconName }) {
386
+ return <Ico name={name} size={24} />;
387
+ }
388
+
389
+ // Will autocomplete all 3000+ icon names
390
+ <DynamicIcon name="home" /> // โœ…
391
+ <DynamicIcon name="heart" /> // โœ…
392
+ <DynamicIcon name="invalid" /> // โŒ TypeScript error
393
+ ```
394
+
395
+ For complete TypeScript documentation, see the [@icon-craft/react package](https://github.com/PATEL-KRISH-0/icon-craft/tree/main/packages/react#typescript).
396
+
397
+ ---
398
+
399
+ ## ๐ŸŒ Browser Support
400
+
401
+ | Browser | Version | Support |
402
+ |---------|---------|---------|
403
+ | Chrome | Latest | โœ… Full support |
404
+ | Firefox | Latest | โœ… Full support |
405
+ | Safari | Latest | โœ… Full support |
406
+ | Edge | Latest | โœ… Full support |
407
+ | Opera | Latest | โœ… Full support |
408
+ | IE | 11+ | โš ๏ธ WOFF support only |
409
+
410
+ **Requirements:**
411
+ - Modern browsers with WOFF2 support (recommended)
412
+ - WOFF fallback for older browsers
413
+ - TTF fallback for legacy browsers
414
+
415
+ ---
416
+
417
+ ## ๐Ÿš€ Performance
418
+
419
+ - **WOFF2 Format**: ~50% smaller than TTF (150KB vs 300KB)
420
+ - **CDN Delivery**: Global edge network with 99.9% uptime
421
+ - **Font Display**: `block` - prevents FOIT (Flash of Invisible Text)
422
+ - **Optimized Rendering**: Antialiasing enabled for crisp display
423
+ - **Zero JavaScript**: Pure CSS solution, no runtime overhead
424
+
425
+ ---
426
+
427
+ ## ๐Ÿ“š Examples
428
+
429
+ ### Dashboard Navigation
430
+
431
+ ```html
432
+ <aside class="sidebar">
433
+ <nav>
434
+ <a href="#dashboard">
435
+ <i class="ico-dashboard-fill"></i>
436
+ Dashboard
437
+ </a>
438
+ <a href="#users">
439
+ <i class="ico-group-fill"></i>
440
+ Users
441
+ </a>
442
+ <a href="#analytics">
443
+ <i class="ico-bar-chart-fill"></i>
444
+ Analytics
445
+ </a>
446
+ <a href="#settings">
447
+ <i class="ico-settings-fill"></i>
448
+ Settings
449
+ </a>
450
+ </nav>
451
+ </aside>
452
+ ```
453
+
454
+ ### Action Buttons
455
+
456
+ ```html
457
+ <div class="actions">
458
+ <button class="btn-primary">
459
+ <i class="ico-download-fill"></i>
460
+ Download
461
+ </button>
462
+ <button class="btn-secondary">
463
+ <i class="ico-share-fill"></i>
464
+ Share
465
+ </button>
466
+ <button class="btn-danger">
467
+ <i class="ico-delete-bin-fill"></i>
468
+ Delete
469
+ </button>
470
+ </div>
471
+ ```
472
+
473
+ ### Status Indicators
474
+
475
+ ```html
476
+ <style>
477
+ .status {
478
+ display: inline-flex;
479
+ align-items: center;
480
+ gap: 8px;
481
+ padding: 8px 16px;
482
+ border-radius: 6px;
483
+ }
484
+ .status-success { background: #d1fae5; color: #047857; }
485
+ .status-warning { background: #fef3c7; color: #92400e; }
486
+ .status-error { background: #fee2e2; color: #991b1b; }
487
+ </style>
488
+
489
+ <div class="status status-success">
490
+ <i class="ico-checkbox-circle-fill"></i>
491
+ Connected
492
+ </div>
493
+ <div class="status status-warning">
494
+ <i class="ico-alert-fill"></i>
495
+ Warning
496
+ </div>
497
+ <div class="status status-error">
498
+ <i class="ico-close-circle-fill"></i>
499
+ Error
500
+ </div>
501
+ ```
502
+
503
+ ---
504
+
505
+ ## ๐Ÿ—‚๏ธ Project Structure
506
+
507
+ ```
508
+ icon-craft/
509
+ โ”œโ”€โ”€ fonts/
510
+ โ”‚ โ”œโ”€โ”€ iconcraft.woff2 # Modern browsers (recommended)
511
+ โ”‚ โ”œโ”€โ”€ iconcraft.woff # Older browser support
512
+ โ”‚ โ””โ”€โ”€ iconcraft.ttf # Legacy support
513
+ โ”œโ”€โ”€ style.css # Main stylesheet
514
+ โ”œโ”€โ”€ package.json # Package metadata
515
+ โ”œโ”€โ”€ LICENSE # MIT License
516
+ โ””โ”€โ”€ README.md # This file
517
+ ```
518
+
519
+ ---
520
+
521
+ ## ๐Ÿค Contributing
522
+
523
+ We welcome contributions from the community! Here's how you can help:
524
+
525
+ ### How to Contribute
526
+
527
+ 1. **Fork** the repository
528
+ 2. **Clone** your fork: `git clone https://github.com/YOUR_USERNAME/icon-craft.git`
529
+ 3. Create a **feature branch**: `git checkout -b feature/amazing-feature`
530
+ 4. **Make your changes** and test them
531
+ 5. **Commit**: `git commit -m 'Add amazing feature'`
532
+ 6. **Push**: `git push origin feature/amazing-feature`
533
+ 7. Open a **Pull Request**
534
+
535
+ ### Development Setup
536
+
537
+ ```bash
538
+ # Clone the repo
539
+ git clone https://github.com/PATEL-KRISH-0/icon-craft.git
540
+ cd icon-craft
541
+
542
+ # Install dependencies (if any)
543
+ npm install
544
+
545
+ # Make your changes to style.css or font files
546
+
547
+ # Test locally
548
+ # Open index.html in your browser
549
+ ```
550
+
551
+ ### Contribution Guidelines
552
+
553
+ - Follow existing code style and conventions
554
+ - Test your changes across different browsers
555
+ - Update documentation if needed
556
+ - Keep commits atomic and well-described
557
+ - Be respectful and constructive in discussions
558
+
559
+ ---
560
+
561
+ ## ๐Ÿ”— Related Projects
562
+
563
+ ### Official Packages
564
+
565
+ - ๐Ÿ“ฆ [icon-craft](https://www.npmjs.com/package/icon-craft) - CSS icon font (this package)
566
+ - โš›๏ธ [@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react) - React components with TypeScript
567
+
568
+ ### Website & Tools
569
+
570
+ - ๐ŸŒ [Icon Browser](https://patel-krish-0.github.io/icon-craft/browse.html) - Search, preview, and copy icons
571
+ - ๐ŸŽจ [Icon Editor](https://patel-krish-0.github.io/icon-craft/browse.html) - Customize and export icons
572
+ - ๐Ÿ“– [Documentation](https://github.com/PATEL-KRISH-0/icon-craft) - Complete guides and API reference
573
+
574
+ ---
575
+
576
+ ## โ“ FAQ
577
+
578
+ ### How do I find the right icon class name?
579
+
580
+ 1. Browse the [Icon Browser](https://patel-krish-0.github.io/icon-craft/browse.html) for visual search
581
+ 2. Search in `style.css` for available icons
582
+ 3. Use pattern: `ico-` + icon name (e.g., `ico-home`, `ico-star-fill`)
583
+
584
+ ### Can I use this in commercial projects?
585
+
586
+ **Yes!** Icon-Craft is licensed under MIT, which allows:
587
+ - โœ… Commercial use
588
+ - โœ… Modification
589
+ - โœ… Distribution
590
+ - โœ… Private use
591
+
592
+ ### How do I report bugs or request features?
593
+
594
+ - ๐Ÿ› [Report a bug](https://github.com/PATEL-KRISH-0/icon-craft/issues/new?labels=bug)
595
+ - ๐Ÿ’ก [Request a feature](https://github.com/PATEL-KRISH-0/icon-craft/issues/new?labels=enhancement)
596
+ - ๐Ÿ’ฌ [Start a discussion](https://github.com/PATEL-KRISH-0/icon-craft/discussions)
597
+
598
+ ### What's the difference between `-fill` and `-line` icons?
599
+
600
+ - **`-fill`**: Solid/filled version (e.g., `ico-heart-fill`)
601
+ - **`-line`**: Outline/stroke version (e.g., `ico-heart-line`)
602
+ - **Base** (no suffix): May be either style depending on the icon
603
+
604
+ ### How is this different from Font Awesome?
605
+
606
+ | Feature | Icon-Craft | Font Awesome |
607
+ |---------|-----------|--------------|
608
+ | **Icons** | 3000+ (Feather + Remix) | 2000+ free / 16000+ pro |
609
+ | **License** | MIT (free forever) | SIL OFL / Pro license |
610
+ | **Design** | Modern, unified | Classic, varied |
611
+ | **Size** | ~150KB | ~200KB+ |
612
+ | **React Package** | Full TypeScript support | Basic React wrapper |
613
+ | **Cost** | Free | Free / Paid Pro |
614
+
615
+ ### Can I use this with Next.js?
616
+
617
+ **Absolutely!** Icon-Craft works perfectly with Next.js:
618
+
619
+ ```javascript
620
+ // pages/_app.js
621
+ import 'icon-craft/style.css';
622
+
623
+ export default function App({ Component, pageProps }) {
624
+ return <Component {...pageProps} />;
625
+ }
626
+ ```
627
+
628
+ For better Next.js integration, consider using **@icon-craft/react**:
629
+
630
+ ```jsx
631
+ import { IcoHome } from '@icon-craft/react';
632
+
633
+ export default function Page() {
634
+ return <IcoHome size={24} />;
635
+ }
636
+ ```
637
+
638
+ ---
639
+
640
+ ## ๐Ÿ“œ License & Attribution
641
+
642
+ ### License
643
+
644
+ Icon-Craft is licensed under the **MIT License**. See [LICENSE](LICENSE) for full details.
645
+
646
+ ```
647
+ MIT License
648
+
649
+ Copyright (c) 2026 Krish Patel
650
+
651
+ Permission is hereby granted, free of charge, to any person obtaining a copy
652
+ of this software and associated documentation files (the "Software"), to deal
653
+ in the Software without restriction...
654
+ ```
655
+
656
+ ### Icon Sources
657
+
658
+ This project unifies icons from two excellent open-source libraries:
659
+
660
+ #### Feather Icons โ€” MIT License
661
+ - **Source**: https://feathericons.com
662
+ - **Repository**: https://github.com/feathericons/feather
663
+ - **License**: MIT License
664
+ - **Copyright**: ยฉ Cole Bemis
665
+ - **Note**: Icons have been converted to font format and unified with Remix icons
666
+
667
+ #### Remix Icon โ€” Apache License 2.0
668
+ - **Source**: https://remixicon.com
669
+ - **Repository**: https://github.com/Remix-Design/RemixIcon
670
+ - **License**: Apache License 2.0
671
+ - **Copyright**: ยฉ Remix Design
672
+ - **Note**: Icons have been converted to font format and unified with Feather icons
673
+
674
+ Both licenses **explicitly permit** modification, redistribution, and commercial use. Icon-Craft respects and acknowledges these original projects.
675
+
676
+ ### Legal Compliance
677
+
678
+ โœ… **MIT + Apache 2.0 are fully compatible**
679
+ โœ… **Proper attribution provided**
680
+ โœ… **No license violations**
681
+ โœ… **Icons transformed, not redistributed verbatim**
682
+
683
+ ---
684
+
685
+ ## ๐Ÿ‘จโ€๐Ÿ’ป Author
686
+
687
+ **Krish Patel**
688
+
689
+ - ๐Ÿ™ GitHub: [@PATEL-KRISH-0](https://github.com/PATEL-KRISH-0)
690
+ - ๐Ÿ’ผ LinkedIn: [patelkrish0](https://www.linkedin.com/in/patelkrish0)
691
+ - ๐Ÿ“ง Email: [Contact via GitHub](https://github.com/PATEL-KRISH-0)
692
+ - โ˜• Support: [Buy me a coffee](https://buymeacoffee.com/codecafe247)
693
+
694
+ ---
695
+
696
+ ## ๐ŸŒŸ Show Your Support
697
+
698
+ If Icon-Craft helps your project, please consider:
699
+
700
+ - โญ **[Star this repository](https://github.com/PATEL-KRISH-0/icon-craft)** on GitHub
701
+ - ๐Ÿฆ **Share** on social media ([Twitter](https://twitter.com/intent/tweet?text=Check%20out%20Icon-Craft%20-%203000%2B%20beautiful%20icons%20for%20modern%20projects!&url=https://github.com/PATEL-KRISH-0/icon-craft), [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://github.com/PATEL-KRISH-0/icon-craft))
702
+ - ๐Ÿค **Contribute** to the project
703
+ - โ˜• **[Buy me a coffee](https://buymeacoffee.com/codecafe247)** to support development
704
+ - ๐Ÿ’ฌ **Join discussions** on [GitHub Discussions](https://github.com/PATEL-KRISH-0/icon-craft/discussions)
705
+
706
+ ---
707
+
708
+ ## ๐Ÿ“Š Project Stats
709
+
710
+ ```
711
+ Total Icons: 3000+
712
+ Icon Styles: Fill, Line, Base
713
+ Font Formats: WOFF2, WOFF, TTF
714
+ CDN: jsDelivr
715
+ License: MIT
716
+ NPM Packages: 2 (@icon-craft/react, icon-craft)
717
+ Categories: 20+
718
+ Contributors: Open for contributions!
719
+ ```
720
+
721
+ ---
722
+
723
+ ## ๐Ÿ”— Links
724
+
725
+ - ๐ŸŒ **Website**: [Icon-Craft Landing Page](https://patel-krish-0.github.io/icon-craft)
726
+ - ๐ŸŽจ **Icon Browser**: [Browse all icons](https://patel-krish-0.github.io/icon-craft/browse.html)
727
+ - ๐Ÿ“ฆ **NPM (CSS)**: [icon-craft](https://www.npmjs.com/package/icon-craft)
728
+ - โš›๏ธ **NPM (React)**: [@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react)
729
+ - ๐Ÿ™ **GitHub**: [Main Repository](https://github.com/PATEL-KRISH-0/icon-craft)
730
+ - ๐Ÿ› **Issue Tracker**: [Report Issues](https://github.com/PATEL-KRISH-0/icon-craft/issues)
731
+ - ๐Ÿ’ฌ **Discussions**: [Community Discussions](https://github.com/PATEL-KRISH-0/icon-craft/discussions)
732
+ - ๐Ÿ“– **Changelog**: [Release Notes](https://github.com/PATEL-KRISH-0/icon-craft/releases)
733
+
734
+ ---
735
+
736
+ ## ๐Ÿ“ Changelog
737
+
738
+ ### v1.0.0 (January 30, 2026)
739
+
740
+ ๐ŸŽ‰ **Initial Release**
741
+
742
+ - โœจ 3000+ icons from Feather Icons + Remix Icon
743
+ - ๐ŸŒ jsDelivr CDN support
744
+ - ๐Ÿ“ฆ Multiple font formats (WOFF2, WOFF, TTF)
745
+ - โš›๏ธ React package published (@icon-craft/react)
746
+ - ๐ŸŽจ Interactive icon browser website
747
+ - ๐Ÿ“– Complete documentation
748
+ - ๐Ÿš€ npm package published
749
+
750
+ ---
751
+
752
+ <div align="center">
753
+
754
+ **Made with โค๏ธ by [Krish Patel](https://github.com/PATEL-KRISH-0)**
755
+
756
+ If you find Icon-Craft useful, please give it a โญ๏ธ on [GitHub](https://github.com/PATEL-KRISH-0/icon-craft)!
757
+
758
+ ---
759
+
760
+ [![GitHub stars](https://img.shields.io/github/stars/PATEL-KRISH-0/icon-craft?style=social)](https://github.com/PATEL-KRISH-0/icon-craft/stargazers)
761
+ [![GitHub forks](https://img.shields.io/github/forks/PATEL-KRISH-0/icon-craft?style=social)](https://github.com/PATEL-KRISH-0/icon-craft/fork)
762
+ [![GitHub watchers](https://img.shields.io/github/watchers/PATEL-KRISH-0/icon-craft?style=social)](https://github.com/PATEL-KRISH-0/icon-craft/watchers)
763
+
764
+ **[icon-craft](https://www.npmjs.com/package/icon-craft)** ยท **[@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react)** ยท **[GitHub](https://github.com/PATEL-KRISH-0/icon-craft)** ยท **[Website](https://patel-krish-0.github.io/icon-craft)**
765
+
766
+ </div>