viconic-react-icons 1.4.1 → 1.4.2

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 (2) hide show
  1. package/README.md +53 -34
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,21 +1,27 @@
1
- # Viconic React Icons
1
+ ïŧŋ# Viconic React Icons
2
2
 
3
- ![NPM Version](https://img.shields.io/npm/v/viconic-react-icons)
4
- ![NPM License](https://img.shields.io/npm/l/viconic-react-icons)
3
+ [![NPM Version](https://img.shields.io/npm/v/viconic-react-icons?style=flat-square&color=blue)](https://www.npmjs.com/package/viconic-react-icons)
4
+ [![NPM License](https://img.shields.io/npm/l/viconic-react-icons?style=flat-square)](https://github.com/noname21024/copyicons-backend)
5
+ [![Bundle Size](https://img.shields.io/bundlephobia/minzip/viconic-react-icons?style=flat-square&label=bundle%20size)](https://bundlephobia.com/package/viconic-react-icons)
5
6
 
6
7
  The official React component wrapper for [Viconic](https://viconic.dev), a modern, hyper-fast, CDN-powered icon system.
7
8
 
8
- `viconic-react-icons` gives you access to over 200,000+ open-source, pixel-perfect icons grouped in customizable collections. The icons are loaded dynamically from our Smart CDN at runtime, meaning your React bundle stays incredibly lightweight regardless of how many icons you use.
9
+ `viconic-react-icons` gives you access to over **200,000+ open-source, pixel-perfect icons** grouped in customizable collections. The icons are loaded dynamically from our Smart CDN at runtime, meaning your React bundle stays incredibly lightweight regardless of how many icons you use.
9
10
 
10
- ## Highlights
11
- - ðŸŠķ **Zero-Bundle Bloat**: SVGs are fetched magically via our CDN and injected directly into the DOM.
12
- - ðŸŽĻ **Fully Customizable**: Compatible with Tailwind CSS and standard inline styles. Inherits color natively via `currentColor`.
13
- - ⚡ **Smart Caching**: LocalStorage and Memory caching so icons appear instantly on repeated renders.
14
- - 🔧 **Kit Support**: Use your custom icon kit with `initViconic()` — supports multiple kits.
15
- - ðŸ–Ĩïļ **SSR Ready**: Fully supports Next.js, Vite, and other Server-Side Rendering frameworks.
16
- - 📘 **TypeScript Support**: Includes built-in types for easy autocompletion.
11
+ ---
17
12
 
18
- ## Installation
13
+ ## 🌟 Highlights
14
+
15
+ * ðŸŠķ **Zero-Bundle Bloat**: SVGs are fetched magically via our CDN and injected directly into the DOM.
16
+ * ⚡ **Smart Caching**: LocalStorage and Memory caching so icons appear instantly on repeated renders. Event-driven icon injection for ultra-fast, progressive rendering.
17
+ * ïŋ―ïŋ― **Fully Customizable**: Compatible with Tailwind CSS and standard inline styles. Inherits color natively via `currentColor`.
18
+ * 🔧 **Kit Support**: Use your custom icon kit with `initViconic()` — supports multiple kits and user-uploaded SVGs simultaneously.
19
+ * ðŸ–Ĩïļ **SSR Ready**: Fully supports Next.js, Vite, Remix, and other Server-Side Rendering frameworks.
20
+ * 📘 **TypeScript Support**: Includes built-in types for easy autocompletion.
21
+
22
+ ---
23
+
24
+ ## ðŸ“Ķ Installation
19
25
 
20
26
  ```bash
21
27
  npm install viconic-react-icons
@@ -25,7 +31,11 @@ yarn add viconic-react-icons
25
31
  pnpm add viconic-react-icons
26
32
  ```
27
33
 
28
- ## Quick Start — System Icons
34
+ ---
35
+
36
+ ## 🚀 Quick Start
37
+
38
+ ### 1. System Icons (200k+ Free Icons)
29
39
 
30
40
  Import the `ViconicIcon` component and pass the unique `name` identifier corresponding to your icon of choice from [viconic.dev](https://viconic.dev).
31
41
 
@@ -37,7 +47,7 @@ function App() {
37
47
  <div style={{ display: "flex", gap: "10px" }}>
38
48
  {/* Basic Usage */}
39
49
  <ViconicIcon name="h2:0" />
40
-
50
+
41
51
  {/* With Tailwind CSS */}
42
52
  <ViconicIcon name="lucide:home" className="w-8 h-8 text-blue-500" />
43
53
 
@@ -48,17 +58,17 @@ function App() {
48
58
  }
49
59
  ```
50
60
 
51
- ## Quick Start — Custom Kit
61
+ ### 2. Custom Kits & Uploaded Icons
52
62
 
53
- Use icons from your own kit created at [viconic.dev](https://viconic.dev):
63
+ Use icons from your own customized kit (including your own SVG uploads) created at [viconic.dev](https://viconic.dev):
54
64
 
55
65
  ```jsx
56
66
  import { initViconic, ViconicIcon } from "viconic-react-icons";
57
67
 
58
- // Initialize your kit — call once at app startup (e.g., in main.jsx or App.jsx)
68
+ // Initialize your kit — call once at app startup (e.g., in main.jsx or _app.tsx)
59
69
  initViconic({ kitId: "your-kit-uuid-here" });
60
70
 
61
- // You can load multiple kits!
71
+ // You can load multiple kits at the same time!
62
72
  initViconic({ kitId: "another-kit-uuid" });
63
73
 
64
74
  function App() {
@@ -66,21 +76,23 @@ function App() {
66
76
  <div style={{ display: "flex", gap: "10px" }}>
67
77
  {/* Kit icon using @prefix/name format */}
68
78
  <ViconicIcon name="@myprefix/home" />
69
-
70
- {/* Kit icon using prefix:name format (also works) */}
71
- <ViconicIcon name="myprefix:settings" />
72
-
79
+
80
+ {/* User uploaded icon format */}
81
+ <ViconicIcon name="@myprefix/my-custom-logo" size="48px" />
82
+
73
83
  {/* Mix kit icons with system icons */}
74
- <ViconicIcon name="lucide:star" />
84
+ <ViconicIcon name="lucide:star" color="#FFD700" />
75
85
  </div>
76
86
  );
77
87
  }
78
88
  ```
79
89
 
80
- ## Props
90
+ ---
91
+
92
+ ## 🎛ïļ Props
81
93
 
82
94
  | Prop | Type | Default | Description |
83
- | ---- | ---- | ------- | ----------- |
95
+ | :--- | :--- | :--- | :--- |
84
96
  | `name` | `string` | `undefined` | **Required.** The unique icon ID (e.g. `lucide:activity`, `@prefix/name`). |
85
97
  | `size` | `string \| number` | `undefined` | Icon size as CSS value (e.g. `"24px"`, `"2rem"`). |
86
98
  | `color` | `string` | `undefined` | Icon color as CSS value (e.g. `"red"`, `"#333"`). |
@@ -88,16 +100,19 @@ function App() {
88
100
  | `style` | `React.CSSProperties` | `{}` | Inline CSS styling. |
89
101
  | `...props` | `HTMLAttributes` | | Spread standard HTML attributes (e.g. `onClick`, `title`). |
90
102
 
91
- ## API
103
+ ---
104
+
105
+ ## 🛠ïļ API Reference
92
106
 
93
107
  ### `initViconic(options)`
94
108
 
95
- Inject a kit's loader script into `<head>`. Call once per kit at app startup.
109
+ Inject a kit's smart loader script into `<head>`. Call once per kit at app startup.
96
110
 
97
111
  | Option | Type | Default | Description |
98
- | ------ | ---- | ------- | ----------- |
112
+ | :--- | :--- | :--- | :--- |
99
113
  | `kitId` | `string` | — | **Required.** UUID of your Viconic Kit. |
100
114
  | `cdnBase` | `string` | `"cdn.viconic.dev"` | Custom CDN domain. |
115
+ | `version` | `string` | `undefined` | Bypass cache version (e.g. pass `"dev"` or a timestamp). |
101
116
 
102
117
  ```jsx
103
118
  // In your main.jsx or App.jsx
@@ -106,14 +121,18 @@ import { initViconic } from "viconic-react-icons";
106
121
  initViconic({ kitId: "387a6161-cb39-411f-8f13-29a5813e4efd" });
107
122
  ```
108
123
 
109
- ## Architecture
124
+ ---
125
+
126
+ ## 🧠 Architecture
127
+
128
+ This package is a high-performance React wrapper around `<viconic-icon>` Web Components. The included smart loader script dynamically monitors the DOM using a lightweight `MutationObserver` and rapidly replaces `<viconic-icon>` elements with actual raw `<svg>` code.
110
129
 
111
- This package is a React wrapper around `<viconic-icon>` Web Components. The included `copyicons-smart-loader.js` script dynamically monitors the DOM using a `MutationObserver` and rapidly replaces `<viconic-icon>` elements with actual raw `<svg>` code.
130
+ When using kits, `initViconic()` injects the kit's loader from CDN, which leverages **chunked batch fetching**, **event-driven rendering**, and **parallel processing**.
112
131
 
113
- When using kits, `initViconic()` injects the kit's loader.js from CDN, which fetches your kit's icon map and SVGs in parallel.
132
+ Because we fetch SVGs in parallel and cache them heavily via LocalStorage across user sessions, your frontend performance score will skyrocket compared to packing large icon sets directly into your JS chunks.
114
133
 
115
- Because we fetch SVGs in parallel and cache them across user sessions, your frontend performance score will skyrocket compared to packing large icon sets directly into your JS chunks.
134
+ ---
116
135
 
117
- ## License
136
+ ## 📄 License
118
137
 
119
- This project is licensed under the MIT License. Icon licenses depend on the specific icon families you request.
138
+ This project is licensed under the MIT License. Icon licenses depend on the specific icon families you use.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "viconic-react-icons",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "description": "Viconic Smart Icons loader for React — supports Kit and 200k+ system icons",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",