@refineui/icon-cdn 0.2.2 → 0.3.0

package/README.md

@@ -6,13 +6,14 @@ A CDN package providing direct URL access to RefineUI System Icons. Perfect for
 
 - 🌐 **Direct URL access**: Load icons directly from CDN
 - 📦 **5,207+ icons**: Complete icon collection (434 base icons × 2 styles × 6 sizes)
-- 🎨 **SVG format**: High-quality vector icons
+- 🎨 **SVG format**: High-quality vector icons (SVG only)
 - 🎭 **Two styles**: Regular and filled variants
 - 📱 **Multiple sizes**: 16, 20, 24, 28, 32, 48px variants
 - 🚀 **Fast delivery**: Global CDN distribution via jsDelivr
 - 💰 **Free to use**: No API keys or authentication required
 - 🔧 **Framework agnostic**: Works with any technology stack
 - ✅ **Real SVG icons**: Actual vector graphics, not placeholders
+- 🎯 **Lightweight**: No font files, pure SVG approach
 
 ## 📦 Installation
 
@@ -29,15 +30,15 @@ yarn add @refineui/icon-cdn
 ```html
 <!-- SVG icons -->
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/add-regular.svg"
   alt="Add"
 />
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/heart-filled.svg"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/32/heart-filled.svg"
   alt="Heart"
 />
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/add_square-filled.svg"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/32/add_square-filled.svg"
   alt="Add Square"
 />
 ```
@@ -46,7 +47,7 @@ yarn add @refineui/icon-cdn
 
 ```css
 .add-icon {
-  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg");
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/add-regular.svg");
   background-size: contain;
   background-repeat: no-repeat;
   width: 24px;
@@ -54,7 +55,7 @@ yarn add @refineui/icon-cdn
 }
 
 .heart-icon {
-  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/heart-filled.svg");
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/32/heart-filled.svg");
   background-size: contain;
   background-repeat: no-repeat;
   width: 32px;
@@ -66,7 +67,7 @@ yarn add @refineui/icon-cdn
 
 ```javascript
 function loadIcon(iconName, size = 24, style = "regular") {
-  const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
+  const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
 
   const img = new Image();
   img.src = url;
@@ -87,7 +88,7 @@ document.body.appendChild(heartIcon);
 ### URL Structure
 
 ```
-https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/{size}/{iconName}-{style}.svg
+https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/{size}/{iconName}-{style}.svg
 ```
 
 ### Parameters
@@ -100,7 +101,7 @@ https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/{size}/{iconName}-{s
 
 ### Available Formats
 
-- **SVG**: Vector format, scalable, best quality (only format available)
+- **SVG**: Vector format, scalable, best quality (SVG only format)
 
 ### Icon Naming Convention
 
@@ -146,11 +147,19 @@ The package includes icons for every use case:
 ### URL Generation
 
 ```javascript
-import { generateCDNUrl, generateIconFileName } from "@refineui/icon-cdn";
+import {
+  createIconURL,
+  getIconURL,
+  generateIconFileName,
+} from "@refineui/icon-cdn";
 
 // Generate icon URL
-const iconUrl = generateCDNUrl("add", 24, "regular");
-// Returns: "https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg"
+const iconUrl = createIconURL("add", 24, "regular");
+// Returns: "https://jihoonahn.github.io/refineui-system-icons/cdn/icons/24/add-regular.svg"
+
+// Alternative function
+const iconUrl2 = getIconURL("heart", 32, "filled");
+// Returns: "https://jihoonahn.github.io/refineui-system-icons/cdn/icons/32/heart-filled.svg"
 
 // Generate filename
 const fileName = generateIconFileName("heart", "filled");
@@ -160,15 +169,15 @@ const fileName = generateIconFileName("heart", "filled");
 ### Icon Validation
 
 ```javascript
-import { getIconInfo, searchIcons } from "@refineui/icon-cdn";
+import { isValidIconSize, isValidIconStyle } from "@refineui/icon-cdn";
 
-// Get icon information
-const iconInfo = getIconInfo("add", 24, "regular");
-// Returns: { name: "add", size: 24, style: "regular", url: "...", fileName: "add-regular.svg" }
+// Validate icon size
+const isValidSize = isValidIconSize(24); // Returns: true
+const isInvalidSize = isValidIconSize(30); // Returns: false
 
-// Search for icons
-const searchResults = searchIcons("heart");
-// Returns: array of matching icon info objects
+// Validate icon style
+const isValidStyle = isValidIconStyle("regular"); // Returns: true
+const isInvalidStyle = isValidIconStyle("outline"); // Returns: false
 ```
 
 ## 📱 Examples
@@ -199,7 +208,7 @@ function createIconGallery(icons, size = 24, style = "regular") {
     `;
 
     const icon = document.createElement("img");
-    icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
+    icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
     icon.alt = iconName;
     icon.style.width = `${size}px`;
     icon.style.height = `${size}px`;
@@ -235,7 +244,7 @@ document.body.appendChild(gallery);
 ```javascript
 function loadIconAsync(iconName, size = 24, style = "regular") {
   return new Promise((resolve, reject) => {
-    const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
+    const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
 
     fetch(url)
       .then((response) => {
@@ -281,7 +290,7 @@ function preloadIcons(iconNames, size = 24, style = "regular") {
       const img = new Image();
       img.onload = () => resolve(iconName);
       img.onerror = () => resolve(iconName); // Continue even if some fail
-      img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
+      img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/${size}/${iconName}-${style}.svg`;
     });
   });
 
@@ -313,7 +322,7 @@ criticalIcons.forEach((iconName) => {
   const link = document.createElement("link");
   link.rel = "preload";
   link.as = "image";
-  link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/${iconName}-regular.svg`;
+  link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/${iconName}-regular.svg`;
   document.head.appendChild(link);
 });
 
@@ -323,7 +332,7 @@ function lazyLoadIcon(iconName, container) {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         const icon = document.createElement("img");
-        icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/${iconName}-regular.svg`;
+        icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.2/icons/24/${iconName}-regular.svg`;
         icon.alt = iconName;
         entry.target.appendChild(icon);
         observer.unobserve(entry.target);
@@ -374,7 +383,16 @@ MIT License - see [LICENSE](../../LICENSE) for details.
 
 ## 📝 Changelog
 
-### v0.2.1 (Latest)
+### v0.2.2 (Latest)
+
+- 🎯 **Major Update**: Removed font files for lightweight package
+- 🔧 **API Changes**: Updated utility functions to focus on SVG URLs
+- ✨ **New Functions**: `createIconURL()`, `getIconURL()` for direct URL generation
+- 🗑️ **Removed**: Font-based icon generation functions
+- 📦 **Optimized**: Package size significantly reduced by removing font files
+- 🎨 **SVG Only**: Pure SVG approach for better performance and flexibility
+
+### v0.2.1
 
 - ✅ Fixed: Real SVG icons instead of text placeholders
 - ✅ Updated: All 5,207+ icons now properly generated from source assets