@refineui/icon-cdn 0.3.7 → 0.3.8
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 +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,15 +30,15 @@ yarn add @refineui/icon-cdn
|
|
|
30
30
|
```html
|
|
31
31
|
<!-- SVG icons -->
|
|
32
32
|
<img
|
|
33
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
33
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/24/add-regular.svg"
|
|
34
34
|
alt="Add"
|
|
35
35
|
/>
|
|
36
36
|
<img
|
|
37
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
37
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/32/heart-filled.svg"
|
|
38
38
|
alt="Heart"
|
|
39
39
|
/>
|
|
40
40
|
<img
|
|
41
|
-
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
41
|
+
src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/32/add_square-filled.svg"
|
|
42
42
|
alt="Add Square"
|
|
43
43
|
/>
|
|
44
44
|
```
|
|
@@ -47,7 +47,7 @@ yarn add @refineui/icon-cdn
|
|
|
47
47
|
|
|
48
48
|
```css
|
|
49
49
|
.add-icon {
|
|
50
|
-
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
50
|
+
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/24/add-regular.svg");
|
|
51
51
|
background-size: contain;
|
|
52
52
|
background-repeat: no-repeat;
|
|
53
53
|
width: 24px;
|
|
@@ -55,7 +55,7 @@ yarn add @refineui/icon-cdn
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.heart-icon {
|
|
58
|
-
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
58
|
+
background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/32/heart-filled.svg");
|
|
59
59
|
background-size: contain;
|
|
60
60
|
background-repeat: no-repeat;
|
|
61
61
|
width: 32px;
|
|
@@ -67,7 +67,7 @@ yarn add @refineui/icon-cdn
|
|
|
67
67
|
|
|
68
68
|
```javascript
|
|
69
69
|
function loadIcon(iconName, size = 24, style = "regular") {
|
|
70
|
-
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn
|
|
70
|
+
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/${size}/${iconName}-${style}.svg`;
|
|
71
71
|
|
|
72
72
|
const img = new Image();
|
|
73
73
|
img.src = url;
|
|
@@ -88,7 +88,7 @@ document.body.appendChild(heartIcon);
|
|
|
88
88
|
### URL Structure
|
|
89
89
|
|
|
90
90
|
```
|
|
91
|
-
https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
91
|
+
https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/{size}/{iconName}-{style}.svg
|
|
92
92
|
```
|
|
93
93
|
|
|
94
94
|
### Parameters
|
|
@@ -208,7 +208,7 @@ function createIconGallery(icons, size = 24, style = "regular") {
|
|
|
208
208
|
`;
|
|
209
209
|
|
|
210
210
|
const icon = document.createElement("img");
|
|
211
|
-
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
211
|
+
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/${size}/${iconName}-${style}.svg`;
|
|
212
212
|
icon.alt = iconName;
|
|
213
213
|
icon.style.width = `${size}px`;
|
|
214
214
|
icon.style.height = `${size}px`;
|
|
@@ -244,7 +244,7 @@ document.body.appendChild(gallery);
|
|
|
244
244
|
```javascript
|
|
245
245
|
function loadIconAsync(iconName, size = 24, style = "regular") {
|
|
246
246
|
return new Promise((resolve, reject) => {
|
|
247
|
-
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
247
|
+
const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/${size}/${iconName}-${style}.svg`;
|
|
248
248
|
|
|
249
249
|
fetch(url)
|
|
250
250
|
.then((response) => {
|
|
@@ -290,7 +290,7 @@ function preloadIcons(iconNames, size = 24, style = "regular") {
|
|
|
290
290
|
const img = new Image();
|
|
291
291
|
img.onload = () => resolve(iconName);
|
|
292
292
|
img.onerror = () => resolve(iconName); // Continue even if some fail
|
|
293
|
-
img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
293
|
+
img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/${size}/${iconName}-${style}.svg`;
|
|
294
294
|
});
|
|
295
295
|
});
|
|
296
296
|
|
|
@@ -322,7 +322,7 @@ criticalIcons.forEach((iconName) => {
|
|
|
322
322
|
const link = document.createElement("link");
|
|
323
323
|
link.rel = "preload";
|
|
324
324
|
link.as = "image";
|
|
325
|
-
link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
325
|
+
link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/24/${iconName}-regular.svg`;
|
|
326
326
|
document.head.appendChild(link);
|
|
327
327
|
});
|
|
328
328
|
|
|
@@ -332,7 +332,7 @@ function lazyLoadIcon(iconName, container) {
|
|
|
332
332
|
entries.forEach((entry) => {
|
|
333
333
|
if (entry.isIntersecting) {
|
|
334
334
|
const icon = document.createElement("img");
|
|
335
|
-
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@
|
|
335
|
+
icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@vTag/icons/24/${iconName}-regular.svg`;
|
|
336
336
|
icon.alt = iconName;
|
|
337
337
|
entry.target.appendChild(icon);
|
|
338
338
|
observer.unobserve(entry.target);
|