reicon 1.1.1 → 1.1.102

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 (6) hide show
  1. package/README.md +89 -118
  2. package/cdn/reicon.js +1 -1
  3. package/createIcon.js +5 -4
  4. package/package.json +1 -1
  5. package/umd/reicon.js +5 -4
  6. package/cdn/reicon.min.js +0 -19
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <p align="center">
2
2
  <a href="https://reicon.dev">
3
- <img src="https://reicon.dev/jspackage.png" alt="Reicon — SVG Icon Library" width="50%" />
3
+ <img src="https://reicon.dev/jspackage.png" alt="Reicon — SVG Icon Library for Vanilla JS" width="100%" />
4
4
  </a>
5
5
  </p>
6
6
 
@@ -9,17 +9,33 @@
9
9
  <a href="https://npmjs.com/package/reicon"><img src="https://img.shields.io/npm/dm/reicon?color=black&label=downloads" alt="npm downloads" /></a>
10
10
  <a href="https://github.com/dqev/reicon/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" alt="MIT License" /></a>
11
11
  <a href="https://reicon.dev"><img src="https://img.shields.io/badge/docs-reicon.dev-black" alt="Documentation" /></a>
12
+ <a href="https://github.com/dqev/reicon"><img src="https://img.shields.io/badge/github-dqev/reicon-black" alt="GitHub" /></a>
12
13
  </p>
13
14
 
14
- # Reicon
15
+ <h1 align="center">Reicon</h1>
15
16
 
16
- > 2674+ pixel-perfect SVG icons • Outline & Filled weights • React, Vue, Vanilla JS, Svelte, Astro • Zero dependencies • MIT Licensed
17
+ <p align="center">
18
+ <b>2674+ pixel-perfect SVG icons</b> • Outline & Filled weights • Vanilla JS & CDN runtime • Zero dependencies • MIT Licensed
19
+ </p>
17
20
 
18
- **Reicon** is a free, open-source SVG icon library with 2674+ handcrafted, grid-aligned icons built for developers and designers. Every icon ships in two weights — Outline and Filled — and works natively in vanilla JS with no framework required. Official React, Vue, and Svelte packages are available separately.
21
+ <p align="center">
22
+ <a href="#install">Install</a> •
23
+ <a href="#usage">Usage</a> •
24
+ <a href="#options">Options</a> •
25
+ <a href="#tree-shaking">Tree-shaking</a> •
26
+ <a href="#icon-names">Icon Names</a> •
27
+ <a href="#typescript">TypeScript</a> •
28
+ <a href="#cdn">CDN</a>
29
+ </p>
19
30
 
20
- - 🔗 **Website & icon browser:** [reicon.dev](https://reicon.dev)
21
- - 📦 **React package:** [reicon-react](https://npmjs.com/package/reicon-react)
22
- - 🎨 **Figma plugin:** [reicon.dev/figma](https://reicon.dev/figma)
31
+ **Reicon** is the core vanilla JavaScript package for <a href="https://reicon.dev">Reicon</a> — a free, open-source SVG icon library featuring 2674+ handcrafted, grid-aligned icons. Use it directly as ES modules, or load via CDN with zero build step. Every icon is tree-shakeable, fully TypeScript-ready, and ships with no dependencies.
32
+
33
+ | 🔗 &nbsp; Resource | Link |
34
+ |---|---|
35
+ | 🌐 &nbsp; Website & icon browser | [reicon.dev](https://reicon.dev) |
36
+ | 📖 &nbsp; Documentation | [reicon.dev/docs](https://reicon.dev/docs) |
37
+ | ⚛️ &nbsp; React package | [reicon-react](https://npmjs.com/package/reicon-react) |
38
+ | 🎨 &nbsp; Figma plugin | [reicon.dev/docs/figma](https://reicon.dev/docs/figma) |
23
39
 
24
40
  ---
25
41
 
@@ -36,13 +52,11 @@ yarn add reicon
36
52
  ### CDN (no build step required)
37
53
 
38
54
  ```html
39
- <!-- Latest production build -->
40
55
  <script src="https://unpkg.com/reicon@latest"></script>
41
-
42
- <!-- Development (unminified) -->
43
- <script src="https://unpkg.com/reicon@latest/umd/reicon.js"></script>
44
56
  ```
45
57
 
58
+ No bundler, no framework — just a `<script>` tag.
59
+
46
60
  ---
47
61
 
48
62
  ## Usage
@@ -52,7 +66,6 @@ yarn add reicon
52
66
  ```js
53
67
  import { Home, ShieldCheck, AltArrowDown } from 'reicon';
54
68
 
55
- // Returns an SVGElement, append anywhere
56
69
  document.body.appendChild(Home());
57
70
  document.body.appendChild(ShieldCheck({ size: 32, color: '#d97757' }));
58
71
  document.body.appendChild(AltArrowDown({ weight: 'Filled' }));
@@ -67,75 +80,40 @@ const svgString = Home.toSvg({ size: 32, color: 'red' });
67
80
  element.innerHTML = svgString;
68
81
  ```
69
82
 
70
- ### CDN / Script tag
71
-
72
- ```html
73
- <script src="https://unpkg.com/reicon@latest"></script>
74
- <script>
75
- document.body.appendChild(reicon.Home());
76
- document.body.appendChild(reicon.ShieldCheck({ size: 32, color: '#d97757' }));
77
- document.body.appendChild(reicon.AltArrowDown({ weight: 'Filled' }));
78
- </script>
79
- ```
80
-
81
- ---
82
-
83
- ## Usage with React
84
-
85
- Install the official React package:
86
-
87
- ```bash
88
- npm i reicon-react
89
- ```
90
-
91
- ```tsx
92
- import { Home, ShieldCheck, AltArrowDown } from 'reicon-react';
93
-
94
- export default function App() {
95
- return (
96
- <div>
97
- <Home />
98
- <ShieldCheck size={32} color="#d97757" />
99
- <AltArrowDown weight="Filled" />
100
- </div>
101
- );
102
- }
103
- ```
104
-
105
- → Full docs: [reicon.dev/docs](https://reicon.dev/docs) · npm: [reicon-react](https://npmjs.com/package/reicon-react)
83
+ ### Weights
106
84
 
107
- ---
85
+ Every icon ships in two weights — **Outline** (default) and **Filled**:
108
86
 
109
- ## Usage with Vue
87
+ ```js
88
+ import { Home } from 'reicon';
110
89
 
111
- ```bash
112
- npm i reicon-vue
90
+ Home() // Outline (default)
91
+ Home({ weight: 'Filled' }) // Filled
113
92
  ```
114
93
 
115
- ```vue
116
- <script setup>
117
- import { Home, ShieldCheck } from 'reicon-vue';
118
- </script>
94
+ ### Sizing & coloring
119
95
 
120
- <template>
121
- <Home />
122
- <ShieldCheck :size="32" color="#d97757" />
123
- </template>
96
+ ```js
97
+ Home({ size: 32 }) // 32×32px
98
+ Home({ size: 48, color: 'red' }) // Custom size and color
99
+ Home({ color: 'currentColor' }) // Inherits parent text color
124
100
  ```
125
101
 
126
- ---
127
-
128
- ## Usage with Svelte / Astro / plain HTML
129
-
130
- Any framework that can render SVG strings or DOM elements works with the base `reicon` package directly. For Svelte and Astro, use `Home.toSvg()` to get the raw SVG markup and inject it with `{@html}`:
102
+ ### CDN / Script tag
131
103
 
132
- ```svelte
104
+ ```html
105
+ <script src="https://unpkg.com/reicon@latest"></script>
133
106
  <script>
134
- import { Home } from 'reicon';
135
- const icon = Home.toSvg({ size: 24 });
107
+ document.body.appendChild(reicon.Home());
108
+ document.body.appendChild(reicon.ShieldCheck({ size: 32, color: '#d97757' }));
136
109
  </script>
110
+ ```
137
111
 
138
- {@html icon}
112
+ ### Direct icon import (smallest bundle)
113
+
114
+ ```js
115
+ import Home from 'reicon/icons/Home';
116
+ import ShieldCheck from 'reicon/icons/ShieldCheck';
139
117
  ```
140
118
 
141
119
  ---
@@ -144,58 +122,50 @@ Any framework that can render SVG strings or DOM elements works with the base `r
144
122
 
145
123
  | Option | Type | Default | Description |
146
124
  |--------|------|---------|-------------|
147
- | `size` | `number | string` | `24` | Icon size (unitless = px) |
148
- | `color` | `string` | `currentColor` | Icon color — accepts any CSS color value |
149
- | `weight` | `'Outline' | 'Filled'` | `'Outline'` | Icon style / weight |
150
- | `strokeWidth` | `number | string` | — | Override default stroke width |
151
- | `className` | `string` | — | Extra CSS class on the `<svg>` element |
125
+ | `size` | `number | string` | `24` | Icon width & height (number = px) |
126
+ | `color` | `string` | — | Primary icon stroke/fill color. Leave unset to use CSS. |
127
+ | `weight` | `'Outline' | 'Filled'` | `'Outline'` | Icon style variant |
128
+ | `strokeWidth` | `number | string` | — | Override the default stroke width |
129
+ | `className` | `string` | — | Additional CSS class on the `<svg>` element |
152
130
  | `attrs` | `object` | — | Any additional SVG attributes |
153
131
 
154
- ### Weights
155
-
156
- ```js
157
- import { Home } from 'reicon';
158
-
159
- Home() // Outline (default)
160
- Home({ weight: 'Filled' }) // Filled
161
- Home({ weight: 'Filled', color: 'red' }) // Filled + custom color
162
- ```
163
-
164
132
  ---
165
133
 
166
- ## Tree-shaking — import only what you use
134
+ ## Tree-shaking
167
135
 
168
- Every icon is a standalone ES module. Bundlers (Vite, Webpack, Rollup, esbuild) will tree-shake unused icons automatically.
136
+ Every icon is a standalone ES module. Modern bundlers — **Vite**, **Webpack**, **Rollup**, **esbuild** — automatically tree-shake unused icons, keeping only what you import.
169
137
 
170
138
  ```js
171
- // ✅ Only Home is included in your bundle
139
+ // ✅ Only Home is included in your production bundle
172
140
  import { Home } from 'reicon';
173
141
 
174
- // ✅ Direct import — smallest possible bundle
142
+ // ✅ Even smaller — direct path import skips the barrel file entirely
175
143
  import Home from 'reicon/icons/Home';
176
144
  ```
177
145
 
146
+ The package is marked `"sideEffects": false` for optimal dead-code elimination.
147
+
178
148
  ---
179
149
 
180
150
  ## Icon Names
181
151
 
182
- Icons use **PascalCase**, derived from their original kebab-case names:
152
+ Icons use **PascalCase**, derived from their original kebab-case file names:
183
153
 
184
- | Original name | Import |
185
- |---------------|--------|
154
+ | Original name | PascalCase import |
155
+ |---------------|-------------------|
186
156
  | `home` | `Home` |
187
157
  | `shield-check` | `ShieldCheck` |
188
158
  | `alt-arrow-down` | `AltArrowDown` |
189
159
  | `shopping-cart` | `ShoppingCart` |
190
160
  | `user-circle` | `UserCircle` |
191
161
 
192
- Browse all 2674+ icons at [reicon.dev](https://reicon.dev).
162
+ Browse and search all 2674+ icons at <a href="https://reicon.dev">reicon.dev</a>.
193
163
 
194
164
  ---
195
165
 
196
166
  ## TypeScript
197
167
 
198
- Full TypeScript support — types ship with the package, no `@types/` install needed.
168
+ Full type declarations ship with the package — no separate `@types/` installation needed.
199
169
 
200
170
  ```ts
201
171
  import { Home, IconOptions, IconWeight } from 'reicon';
@@ -207,24 +177,25 @@ const svg: SVGSVGElement = Home(options);
207
177
  document.body.appendChild(svg);
208
178
  ```
209
179
 
210
- ---
180
+ ### Exported types
181
+
182
+ | Type | Description |
183
+ |------|-------------|
184
+ | `IconOptions` | Options for creating an SVG element |
185
+ | `IconWeight` | `'Outline' | 'Filled'` |
211
186
 
212
- ## Why Reicon?
187
+ ---
213
188
 
214
- | | Reicon | Lucide | Heroicons | Phosphor |
215
- |--|--------|--------|-----------|---------|
216
- | **Icons** | 2674+ | 1600+ | 292 | 7700+ |
217
- | **Weights** | Outline + Filled | Outline only | Outline + Solid | 6 weights |
218
- | **Vanilla JS** | ✅ Native | ❌ | ❌ | ❌ |
219
- | **React** | ✅ reicon-react | ✅ | ✅ | ✅ |
220
- | **Vue** | ✅ reicon-vue | ✅ | ✅ | ✅ |
221
- | **CDN / script tag** | ✅ | ❌ | ❌ | ❌ |
222
- | **Zero dependencies** | ✅ | ✅ | ✅ | ✅ |
223
- | **TypeScript** | ✅ | ✅ | ✅ | ✅ |
224
- | **MIT License** | ✅ | ✅ | ✅ | ✅ |
225
- | **Figma plugin** | ✅ | ✅ | ❌ | ✅ |
189
+ ## Features
226
190
 
227
- Reicon is the only major icon library with a **native vanilla JS API** — no React, no Vue, no build tools required. Add a `<script>` tag and you're done.
191
+ - **2674+ icons** — Handcrafted, pixel-perfect SVGs across a wide range of categories
192
+ - **Two weights** — Outline and Filled, with consistent 24×24 grid alignment
193
+ - **Tree-shakeable** — Import only what you use; every icon is a standalone ES module
194
+ - **Zero dependencies** — No runtime overhead whatsoever
195
+ - **TypeScript-ready** — Full type declarations included, no extra packages needed
196
+ - **CDN ready** — Drop a `<script>` tag and start using icons immediately
197
+ - **`toSvg()` helper** — Get raw SVG markup for any framework or template
198
+ - **MIT licensed** — Free for personal and commercial use
228
199
 
229
200
  ---
230
201
 
@@ -232,20 +203,20 @@ Reicon is the only major icon library with a **native vanilla JS API** — no Re
232
203
 
233
204
  | Package | Description |
234
205
  |---------|-------------|
235
- | [`reicon`](https://npmjs.com/package/reicon) | **This package.** Core vanilla JS + CDN |
236
- | [`reicon-react`](https://npmjs.com/package/reicon-react) | React components for all 2674+ icons |
237
- | [`reicon-vue`](https://npmjs.com/package/reicon-vue) | Vue 3 components for all 2674+ icons |
238
- | [`reicon-svelte`](https://npmjs.com/package/reicon-svelte) | Svelte components for all 2674+ icons |
206
+ | [`reicon`](https://npmjs.com/package/reicon) | **This package.** Core vanilla JS + CDN runtime. No framework required. |
207
+ | [`reicon-react`](https://npmjs.com/package/reicon-react) | React components for 2674+ icons. |
208
+ | [`reicon-vue`](https://npmjs.com/package/reicon-vue) | Vue 3 components for 2674+ icons. |
209
+ | [`reicon-svelte`](https://npmjs.com/package/reicon-svelte) | Svelte components for 2674+ icons. |
239
210
 
240
211
  ---
241
212
 
242
213
  ## Links
243
214
 
244
- - 🌐 Website: [reicon.dev](https://reicon.dev)
245
- - 📖 Documentation: [reicon.dev/docs](https://reicon.dev/docs)
246
- - 📦 npm (React): [npmjs.com/package/reicon-react](https://npmjs.com/package/reicon-react)
247
- - 🐙 GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
248
- - 🐛 Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
215
+ - 🌐 &nbsp; Website: [reicon.dev](https://reicon.dev)
216
+ - 📖 &nbsp; Documentation: [reicon.dev/docs](https://reicon.dev/docs)
217
+ - 📦 &nbsp; npm: [npmjs.com/package/reicon](https://npmjs.com/package/reicon)
218
+ - 🐙 &nbsp; GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
219
+ - 🐛 &nbsp; Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
249
220
 
250
221
  ---
251
222
 
@@ -253,4 +224,4 @@ Reicon is the only major icon library with a **native vanilla JS API** — no Re
253
224
 
254
225
  MIT © [Dev Chauhan](https://devchauhan.in)
255
226
 
256
- Free to use in personal and commercial projects.
227
+ Free to use in personal and commercial projects. Attribution is appreciated but not required.
package/cdn/reicon.js CHANGED
@@ -224,7 +224,7 @@
224
224
 
225
225
  _applyHostStyle() {
226
226
  var size = normalizeSize(this.getAttribute('size'));
227
- var color = this.getAttribute('color') || 'currentColor';
227
+ var color = this.getAttribute('color');
228
228
  var secondary = this.getAttribute('secondary-color') || color;
229
229
  var stroke = this.getAttribute('stroke-width');
230
230
  var rotate = this.getAttribute('rotate');
package/createIcon.js CHANGED
@@ -17,7 +17,7 @@ const createIcon = (displayName, iconData) => {
17
17
  */
18
18
  const icon = (options = {}) => {
19
19
  const {
20
- color = 'currentColor',
20
+ color,
21
21
  size = 24,
22
22
  weight = 'Outline',
23
23
  strokeWidth,
@@ -49,7 +49,7 @@ const createIcon = (displayName, iconData) => {
49
49
  svg.setAttribute('viewBox', '0 0 24 24');
50
50
  svg.setAttribute('fill', 'none');
51
51
  svg.setAttribute('class', className ? 'reicon ' + className : 'reicon');
52
- svg.style.color = color;
52
+ if (color != null) svg.style.color = color;
53
53
 
54
54
  for (const [k, v] of Object.entries(attrs)) {
55
55
  svg.setAttribute(k, String(v));
@@ -69,7 +69,7 @@ const createIcon = (displayName, iconData) => {
69
69
  */
70
70
  icon.toSvg = (options = {}) => {
71
71
  const {
72
- color = 'currentColor',
72
+ color,
73
73
  size = 24,
74
74
  weight = 'Outline',
75
75
  strokeWidth,
@@ -91,7 +91,8 @@ const createIcon = (displayName, iconData) => {
91
91
  .map(([k, v]) => `${escAttr(k)}="${escAttr(v)}"`)
92
92
  .join(' ');
93
93
 
94
- return `<svg xmlns="http://www.w3.org/2000/svg" width="${escAttr(size)}" height="${escAttr(size)}" viewBox="0 0 24 24" fill="none" class="${escAttr(className ? 'reicon ' + className : 'reicon')}" style="color: ${escAttr(color)}"${extraAttrs ? ' ' + extraAttrs : ''}>${html}</svg>`;
94
+ const colorStyle = color != null ? ` style="color: ${escAttr(color)}"` : '';
95
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="${escAttr(size)}" height="${escAttr(size)}" viewBox="0 0 24 24" fill="none" class="${escAttr(className ? 'reicon ' + className : 'reicon')}"${colorStyle}${extraAttrs ? ' ' + extraAttrs : ''}>${html}</svg>`;
95
96
  };
96
97
 
97
98
  return icon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reicon",
3
- "version": "1.1.1",
3
+ "version": "1.1.102",
4
4
  "type": "module",
5
5
  "description": "Core vanilla JS icon components for 2674+ icons in 2 weights (Outline & Filled). Tree-shakeable, TypeScript-ready.",
6
6
  "main": "./index.js",
package/umd/reicon.js CHANGED
@@ -11,7 +11,7 @@
11
11
  function createIcon(displayName, iconData) {
12
12
  var icon = function(options) {
13
13
  options = options || {};
14
- var color = options.color || 'currentColor';
14
+ var color = options.color;
15
15
  var size = options.size || 24;
16
16
  var weight = options.weight || 'Outline';
17
17
  var strokeWidth = options.strokeWidth;
@@ -39,7 +39,7 @@
39
39
  svg.setAttribute('viewBox', '0 0 24 24');
40
40
  svg.setAttribute('fill', 'none');
41
41
  svg.setAttribute('class', className ? 'reicon ' + className : 'reicon');
42
- svg.style.color = color;
42
+ if (color != null) svg.style.color = color;
43
43
 
44
44
  var attrKeys = Object.keys(attrs);
45
45
  for (var i = 0; i < attrKeys.length; i++) {
@@ -55,7 +55,7 @@
55
55
 
56
56
  icon.toSvg = function(options) {
57
57
  options = options || {};
58
- var color = options.color || 'currentColor';
58
+ var color = options.color;
59
59
  var size = options.size || 24;
60
60
  var weight = options.weight || 'Outline';
61
61
  var strokeWidth = options.strokeWidth;
@@ -70,7 +70,8 @@
70
70
  }
71
71
 
72
72
  var extraAttrs = Object.keys(attrs).map(function(k) { return escAttr(k) + '="' + escAttr(attrs[k]) + '"'; }).join(' ');
73
- return '<svg xmlns="http://www.w3.org/2000/svg" width="' + escAttr(size) + '" height="' + escAttr(size) + '" viewBox="0 0 24 24" fill="none" class="' + escAttr(className ? 'reicon ' + className : 'reicon') + '" style="color: ' + escAttr(color) + '"' + (extraAttrs ? ' ' + extraAttrs : '') + '>' + html + '</svg>';
73
+ var styleAttr = color != null ? ' style="color: ' + escAttr(color) + '"' : '';
74
+ return '<svg xmlns="http://www.w3.org/2000/svg" width="' + escAttr(size) + '" height="' + escAttr(size) + '" viewBox="0 0 24 24" fill="none" class="' + escAttr(className ? 'reicon ' + className : 'reicon') + '"' + styleAttr + (extraAttrs ? ' ' + extraAttrs : '') + '>' + html + '</svg>';
74
75
  };
75
76
 
76
77
  return icon;