@refineui/icon-cdn 0.2.2 → 0.3.6
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.
- package/README.md +43 -25
- package/dist/index.d.ts +3 -2
- package/dist/index.esm.js +37792 -218
- package/dist/index.js +37796 -224
- package/dist/index.umd.js +37796 -224
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -6,13 +6,14 @@ A CDN package providing direct URL access to RefineUI System Icons. Perfect for
|
|
|
6
6
|
|
|
7
7
|
- 🌐 **Direct URL access**: Load icons directly from CDN
|
|
8
8
|
- 📦 **5,207+ icons**: Complete icon collection (434 base icons × 2 styles × 6 sizes)
|
|
9
|
-
- 🎨 **SVG format**: High-quality vector icons
|
|
9
|
+
- 🎨 **SVG format**: High-quality vector icons (SVG only)
|
|
10
10
|
- 🎭 **Two styles**: Regular and filled variants
|
|
11
11
|
- 📱 **Multiple sizes**: 16, 20, 24, 28, 32, 48px variants
|
|
12
12
|
- 🚀 **Fast delivery**: Global CDN distribution via jsDelivr
|
|
13
13
|
- 💰 **Free to use**: No API keys or authentication required
|
|
14
14
|
- 🔧 **Framework agnostic**: Works with any technology stack
|
|
15
15
|
- ✅ **Real SVG icons**: Actual vector graphics, not placeholders
|
|
16
|
+
- 🎯 **Lightweight**: No font files, pure SVG approach
|
|
16
17
|
|
|
17
18
|
## 📦 Installation
|
|
18
19
|
|
|
@@ -29,15 +30,15 @@ yarn add @refineui/icon-cdn
|
|
|
29
30
|
```html
|
|
30
31
|
<!-- SVG icons -->
|
|
31
32
|
<img
|
|
32
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.
|
|
33
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.3.1/icons/24/add-regular.svg"
|
|
33
34
|
alt="Add"
|
|
34
35
|
/>
|
|
35
36
|
<img
|
|
36
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.
|
|
37
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.3.1/icons/32/heart-filled.svg"
|
|
37
38
|
alt="Heart"
|
|
38
39
|
/>
|
|
39
40
|
<img
|
|
40
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.
|
|
41
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.3.1/icons/32/add_square-filled.svg"
|
|
41
42
|
alt="Add Square"
|
|
42
43
|
/>
|
|
43
44
|
```
|
|
@@ -46,7 +47,7 @@ yarn add @refineui/icon-cdn
|
|
|
46
47
|
|
|
47
48
|
```css
|
|
48
49
|
.add-icon {
|
|
49
|
-
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
50
|
+
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@${tag}/icons/24/add-regular.svg");
|
|
50
51
|
background-size: contain;
|
|
51
52
|
background-repeat: no-repeat;
|
|
52
53
|
width: 24px;
|
|
@@ -54,7 +55,7 @@ yarn add @refineui/icon-cdn
|
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
.heart-icon {
|
|
57
|
-
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
58
|
+
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@${tag}/icons/32/heart-filled.svg");
|
|
58
59
|
background-size: contain;
|
|
59
60
|
background-repeat: no-repeat;
|
|
60
61
|
width: 32px;
|
|
@@ -66,7 +67,7 @@ yarn add @refineui/icon-cdn
|
|
|
66
67
|
|
|
67
68
|
```javascript
|
|
68
69
|
function loadIcon(iconName, size = 24, style = "regular") {
|
|
69
|
-
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
70
|
+
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@${tag}/icons/${size}/${iconName}-${style}.svg`;
|
|
70
71
|
|
|
71
72
|
const img = new Image();
|
|
72
73
|
img.src = url;
|
|
@@ -87,7 +88,7 @@ document.body.appendChild(heartIcon);
|
|
|
87
88
|
### URL Structure
|
|
88
89
|
|
|
89
90
|
```
|
|
90
|
-
https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
91
|
+
https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/{size}/{iconName}-{style}.svg
|
|
91
92
|
```
|
|
92
93
|
|
|
93
94
|
### Parameters
|
|
@@ -100,7 +101,7 @@ https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/{size}/{iconName}-{s
|
|
|
100
101
|
|
|
101
102
|
### Available Formats
|
|
102
103
|
|
|
103
|
-
- **SVG**: Vector format, scalable, best quality (only format
|
|
104
|
+
- **SVG**: Vector format, scalable, best quality (SVG only format)
|
|
104
105
|
|
|
105
106
|
### Icon Naming Convention
|
|
106
107
|
|
|
@@ -146,11 +147,19 @@ The package includes icons for every use case:
|
|
|
146
147
|
### URL Generation
|
|
147
148
|
|
|
148
149
|
```javascript
|
|
149
|
-
import {
|
|
150
|
+
import {
|
|
151
|
+
createIconURL,
|
|
152
|
+
getIconURL,
|
|
153
|
+
generateIconFileName,
|
|
154
|
+
} from "@refineui/icon-cdn";
|
|
150
155
|
|
|
151
156
|
// Generate icon URL
|
|
152
|
-
const iconUrl =
|
|
153
|
-
// Returns: "https://
|
|
157
|
+
const iconUrl = createIconURL("add", 24, "regular");
|
|
158
|
+
// Returns: "https://jihoonahn.github.io/refineui-system-icons/cdn/icons/24/add-regular.svg"
|
|
159
|
+
|
|
160
|
+
// Alternative function
|
|
161
|
+
const iconUrl2 = getIconURL("heart", 32, "filled");
|
|
162
|
+
// Returns: "https://jihoonahn.github.io/refineui-system-icons/cdn/icons/32/heart-filled.svg"
|
|
154
163
|
|
|
155
164
|
// Generate filename
|
|
156
165
|
const fileName = generateIconFileName("heart", "filled");
|
|
@@ -160,15 +169,15 @@ const fileName = generateIconFileName("heart", "filled");
|
|
|
160
169
|
### Icon Validation
|
|
161
170
|
|
|
162
171
|
```javascript
|
|
163
|
-
import {
|
|
172
|
+
import { isValidIconSize, isValidIconStyle } from "@refineui/icon-cdn";
|
|
164
173
|
|
|
165
|
-
//
|
|
166
|
-
const
|
|
167
|
-
|
|
174
|
+
// Validate icon size
|
|
175
|
+
const isValidSize = isValidIconSize(24); // Returns: true
|
|
176
|
+
const isInvalidSize = isValidIconSize(30); // Returns: false
|
|
168
177
|
|
|
169
|
-
//
|
|
170
|
-
const
|
|
171
|
-
|
|
178
|
+
// Validate icon style
|
|
179
|
+
const isValidStyle = isValidIconStyle("regular"); // Returns: true
|
|
180
|
+
const isInvalidStyle = isValidIconStyle("outline"); // Returns: false
|
|
172
181
|
```
|
|
173
182
|
|
|
174
183
|
## 📱 Examples
|
|
@@ -199,7 +208,7 @@ function createIconGallery(icons, size = 24, style = "regular") {
|
|
|
199
208
|
`;
|
|
200
209
|
|
|
201
210
|
const icon = document.createElement("img");
|
|
202
|
-
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
211
|
+
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
|
|
203
212
|
icon.alt = iconName;
|
|
204
213
|
icon.style.width = `${size}px`;
|
|
205
214
|
icon.style.height = `${size}px`;
|
|
@@ -235,7 +244,7 @@ document.body.appendChild(gallery);
|
|
|
235
244
|
```javascript
|
|
236
245
|
function loadIconAsync(iconName, size = 24, style = "regular") {
|
|
237
246
|
return new Promise((resolve, reject) => {
|
|
238
|
-
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
247
|
+
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
|
|
239
248
|
|
|
240
249
|
fetch(url)
|
|
241
250
|
.then((response) => {
|
|
@@ -281,7 +290,7 @@ function preloadIcons(iconNames, size = 24, style = "regular") {
|
|
|
281
290
|
const img = new Image();
|
|
282
291
|
img.onload = () => resolve(iconName);
|
|
283
292
|
img.onerror = () => resolve(iconName); // Continue even if some fail
|
|
284
|
-
img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
293
|
+
img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
|
|
285
294
|
});
|
|
286
295
|
});
|
|
287
296
|
|
|
@@ -313,7 +322,7 @@ criticalIcons.forEach((iconName) => {
|
|
|
313
322
|
const link = document.createElement("link");
|
|
314
323
|
link.rel = "preload";
|
|
315
324
|
link.as = "image";
|
|
316
|
-
link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
325
|
+
link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/${iconName}-regular.svg`;
|
|
317
326
|
document.head.appendChild(link);
|
|
318
327
|
});
|
|
319
328
|
|
|
@@ -323,7 +332,7 @@ function lazyLoadIcon(iconName, container) {
|
|
|
323
332
|
entries.forEach((entry) => {
|
|
324
333
|
if (entry.isIntersecting) {
|
|
325
334
|
const icon = document.createElement("img");
|
|
326
|
-
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.
|
|
335
|
+
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/${iconName}-regular.svg`;
|
|
327
336
|
icon.alt = iconName;
|
|
328
337
|
entry.target.appendChild(icon);
|
|
329
338
|
observer.unobserve(entry.target);
|
|
@@ -374,7 +383,16 @@ MIT License - see [LICENSE](../../LICENSE) for details.
|
|
|
374
383
|
|
|
375
384
|
## 📝 Changelog
|
|
376
385
|
|
|
377
|
-
### v0.2.
|
|
386
|
+
### v0.2.2 (Latest)
|
|
387
|
+
|
|
388
|
+
- 🎯 **Major Update**: Removed font files for lightweight package
|
|
389
|
+
- 🔧 **API Changes**: Updated utility functions to focus on SVG URLs
|
|
390
|
+
- ✨ **New Functions**: `createIconURL()`, `getIconURL()` for direct URL generation
|
|
391
|
+
- 🗑️ **Removed**: Font-based icon generation functions
|
|
392
|
+
- 📦 **Optimized**: Package size significantly reduced by removing font files
|
|
393
|
+
- 🎨 **SVG Only**: Pure SVG approach for better performance and flexibility
|
|
394
|
+
|
|
395
|
+
### v0.2.1
|
|
378
396
|
|
|
379
397
|
- ✅ Fixed: Real SVG icons instead of text placeholders
|
|
380
398
|
- ✅ Updated: All 5,207+ icons now properly generated from source assets
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './regular-icons';
|
|
2
2
|
export * from './filled-icons';
|
|
3
|
-
export { createIconURL, getIconURL,
|
|
4
|
-
export
|
|
3
|
+
export { createIconURL, getCDNBaseUrl, getIconURL, mapIconName, generateSampleSVG, isValidIconSize, isValidIconStyle, generateIconFileName, } from './utils';
|
|
4
|
+
export { default as IconUtils } from './IconUtils';
|
|
5
|
+
export type { IconData } from './IconUtils';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|