@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 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.2.1/icons/24/add-regular.svg"
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.2.1/icons/32/heart-filled.svg"
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.2.1/icons/32/add_square-filled.svg"
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@0.2.1/icons/24/add-regular.svg");
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@0.2.1/icons/32/heart-filled.svg");
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@0.2.1/icons/${size}/${iconName}-${style}.svg`;
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.1/icons/{size}/{iconName}-{style}.svg
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 available)
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 { generateCDNUrl, generateIconFileName } from "@refineui/icon-cdn";
150
+ import {
151
+ createIconURL,
152
+ getIconURL,
153
+ generateIconFileName,
154
+ } from "@refineui/icon-cdn";
150
155
 
151
156
  // Generate icon URL
152
- const iconUrl = generateCDNUrl("add", 24, "regular");
153
- // Returns: "https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg"
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 { getIconInfo, searchIcons } from "@refineui/icon-cdn";
172
+ import { isValidIconSize, isValidIconStyle } from "@refineui/icon-cdn";
164
173
 
165
- // Get icon information
166
- const iconInfo = getIconInfo("add", 24, "regular");
167
- // Returns: { name: "add", size: 24, style: "regular", url: "...", fileName: "add-regular.svg" }
174
+ // Validate icon size
175
+ const isValidSize = isValidIconSize(24); // Returns: true
176
+ const isInvalidSize = isValidIconSize(30); // Returns: false
168
177
 
169
- // Search for icons
170
- const searchResults = searchIcons("heart");
171
- // Returns: array of matching icon info objects
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.1/icons/${size}/${iconName}-${style}.svg`;
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.1/icons/${size}/${iconName}-${style}.svg`;
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.1/icons/${size}/${iconName}-${style}.svg`;
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.1/icons/24/${iconName}-regular.svg`;
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.1/icons/24/${iconName}-regular.svg`;
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.1 (Latest)
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, getCDNBaseUrl, generateIconFileName, } from './utils';
4
- export * from './cdn';
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