@refineui/icon-cdn 0.2.0 → 0.2.2

package/README.md

@@ -5,13 +5,14 @@ A CDN package providing direct URL access to RefineUI System Icons. Perfect for
 ## 🚀 Features
 
 - 🌐 **Direct URL access**: Load icons directly from CDN
-- 📦 **434+ icons**: Complete icon collection
-- 🎨 **Multiple formats**: SVG, PNG, and font files
+- 📦 **5,207+ icons**: Complete icon collection (434 base icons × 2 styles × 6 sizes)
+- 🎨 **SVG format**: High-quality vector icons
 - 🎭 **Two styles**: Regular and filled variants
 - 📱 **Multiple sizes**: 16, 20, 24, 28, 32, 48px variants
-- 🚀 **Fast delivery**: Global CDN distribution
+- 🚀 **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
 
 ## 📦 Installation
 
@@ -28,22 +29,16 @@ yarn add @refineui/icon-cdn
 ```html
 <!-- SVG icons -->
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.svg"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg"
   alt="Add"
 />
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/32/heart-filled.svg"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/heart-filled.svg"
   alt="Heart"
 />
-
-<!-- PNG icons -->
 <img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.png"
-  alt="Add"
-/>
-<img
-  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/32/heart-filled.png"
-  alt="Heart"
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/add_square-filled.svg"
+  alt="Add Square"
 />
 ```
 
@@ -51,7 +46,7 @@ yarn add @refineui/icon-cdn
 
 ```css
 .add-icon {
-  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.svg");
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg");
   background-size: contain;
   background-repeat: no-repeat;
   width: 24px;
@@ -59,7 +54,7 @@ yarn add @refineui/icon-cdn
 }
 
 .heart-icon {
-  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/32/heart-filled.svg");
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/32/heart-filled.svg");
   background-size: contain;
   background-repeat: no-repeat;
   width: 32px;
@@ -70,8 +65,8 @@ yarn add @refineui/icon-cdn
 ### JavaScript Dynamic Loading
 
 ```javascript
-function loadIcon(iconName, size = 24, style = "regular", format = "svg") {
-  const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/${size}/${iconName}-${style}.${format}`;
+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 img = new Image();
   img.src = url;
@@ -81,8 +76,10 @@ function loadIcon(iconName, size = 24, style = "regular", format = "svg") {
 }
 
 // Usage
-const addIcon = loadIcon("add", 24, "regular", "svg");
+const addIcon = loadIcon("add", 24, "regular");
+const heartIcon = loadIcon("heart", 32, "filled");
 document.body.appendChild(addIcon);
+document.body.appendChild(heartIcon);
 ```
 
 ## 📚 API Reference
@@ -90,7 +87,7 @@ document.body.appendChild(addIcon);
 ### URL Structure
 
 ```
-https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/{size}/{iconName}-{style}.{format}
+https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/{size}/{iconName}-{style}.svg
 ```
 
 ### Parameters
@@ -98,14 +95,12 @@ https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/{size}/{iconName}-{
 | Parameter  | Type   | Description             | Examples               |
 | ---------- | ------ | ----------------------- | ---------------------- |
 | `size`     | number | Icon size in pixels     | 16, 20, 24, 28, 32, 48 |
-| `iconName` | string | Icon name in snake_case | add, heart, settings   |
+| `iconName` | string | Icon name in snake_case | add, heart, add_square |
 | `style`    | string | Icon style variant      | regular, filled        |
-| `format`   | string | File format             | svg, png               |
 
 ### Available Formats
 
-- **SVG**: Vector format, scalable, best quality
-- **PNG**: Raster format, fixed size, good for web
+- **SVG**: Vector format, scalable, best quality (only format available)
 
 ### Icon Naming Convention
 
@@ -115,11 +110,12 @@ Icons follow a consistent naming pattern:
 - **Examples**:
   - `add-regular`
   - `heart-filled`
-  - `settings-regular`
+  - `add_square-filled`
+  - `access_time-regular`
 
 ## 🎨 Available Icons
 
-**All 434+ icons are supported!**
+**All 5,207+ icons are supported!** (434 base icons × 2 styles × 6 sizes)
 
 ### Key Icon Categories:
 
@@ -150,29 +146,29 @@ The package includes icons for every use case:
 ### URL Generation
 
 ```javascript
-import { generateIconUrl, generateIconFileName } from "@refineui/icon-cdn";
+import { generateCDNUrl, generateIconFileName } from "@refineui/icon-cdn";
 
 // Generate icon URL
-const iconUrl = generateIconUrl("add", 24, "regular", "svg");
-// Returns: "https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.svg"
+const iconUrl = generateCDNUrl("add", 24, "regular");
+// Returns: "https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/add-regular.svg"
 
 // Generate filename
-const fileName = generateIconFileName("heart", "filled", "png");
-// Returns: "heart-filled.png"
+const fileName = generateIconFileName("heart", "filled");
+// Returns: "heart-filled.svg"
 ```
 
 ### Icon Validation
 
 ```javascript
-import { isIconSupported, getAvailableIcons } from "@refineui/icon-cdn";
+import { getIconInfo, searchIcons } from "@refineui/icon-cdn";
 
-// Check if icon is supported
-const isSupported = isIconSupported("add", "regular", 24);
-// Returns: true
+// Get icon information
+const iconInfo = getIconInfo("add", 24, "regular");
+// Returns: { name: "add", size: 24, style: "regular", url: "...", fileName: "add-regular.svg" }
 
-// Get all available icons
-const allIcons = getAvailableIcons();
-// Returns: array of all icon names
+// Search for icons
+const searchResults = searchIcons("heart");
+// Returns: array of matching icon info objects
 ```
 
 ## 📱 Examples
@@ -203,7 +199,7 @@ function createIconGallery(icons, size = 24, style = "regular") {
     `;
 
     const icon = document.createElement("img");
-    icon.src = generateIconUrl(iconName, size, style, "svg");
+    icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
     icon.alt = iconName;
     icon.style.width = `${size}px`;
     icon.style.height = `${size}px`;
@@ -239,7 +235,7 @@ document.body.appendChild(gallery);
 ```javascript
 function loadIconAsync(iconName, size = 24, style = "regular") {
   return new Promise((resolve, reject) => {
-    const url = generateIconUrl(iconName, size, style, "svg");
+    const url = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
 
     fetch(url)
       .then((response) => {
@@ -285,7 +281,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 = generateIconUrl(iconName, size, style, "svg");
+      img.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/${size}/${iconName}-${style}.svg`;
     });
   });
 
@@ -317,7 +313,7 @@ criticalIcons.forEach((iconName) => {
   const link = document.createElement("link");
   link.rel = "preload";
   link.as = "image";
-  link.href = generateIconUrl(iconName, 24, "regular", "svg");
+  link.href = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/${iconName}-regular.svg`;
   document.head.appendChild(link);
 });
 
@@ -327,7 +323,7 @@ function lazyLoadIcon(iconName, container) {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         const icon = document.createElement("img");
-        icon.src = generateIconUrl(iconName, 24, "regular", "svg");
+        icon.src = `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@0.2.1/icons/24/${iconName}-regular.svg`;
         icon.alt = iconName;
         entry.target.appendChild(icon);
         observer.unobserve(entry.target);
@@ -368,13 +364,27 @@ MIT License - see [LICENSE](../../LICENSE) for details.
 - [`@refineui/react-icons`](../react-icons) - React icon components
 - [`@refineui/react-native-icons`](../react-native-icons) - React Native icon components
 - [`@refineui/web-icons`](../web-icons) - Web icon library for non-React projects
+- [`refineui_system_icons`](../../flutter) - Flutter icon package
 
 ## 🆘 Support
 
-- 📧 Email: support@refineui.com
-- 🐛 Issues: [GitHub Issues](https://github.com/refineui/system-icons/issues)
-- 📖 Documentation: [docs.refineui.com](https://docs.refineui.com)
-- 💬 Community: [Discord](https://discord.gg/refineui)
+- 🐛 Issues: [GitHub Issues](https://github.com/pelagornis/refineui-system-icons/issues)
+- 📖 Documentation: [GitHub Repository](https://github.com/pelagornis/refineui-system-icons)
+- 💬 Community: [GitHub Discussions](https://github.com/pelagornis/refineui-system-icons/discussions)
+
+## 📝 Changelog
+
+### v0.2.1 (Latest)
+
+- ✅ Fixed: Real SVG icons instead of text placeholders
+- ✅ Updated: All 5,207+ icons now properly generated from source assets
+- ✅ Improved: Build process now copies actual SVG files from assets directory
+
+### v0.2.0
+
+- 🎉 Initial release with CDN functionality
+- 📦 5,207+ icons across 6 sizes and 2 styles
+- 🌐 Global CDN distribution via jsDelivr
 
 ---
 

package/dist/build.js

@@ -4,13 +4,43 @@
  *
  * This script copies SVG icons to a structured folder for CDN usage.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.build = build;
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
 const constants_1 = require("./constants");
 const utils_1 = require("./utils");
 /**
@@ -19,8 +49,8 @@ const utils_1 = require("./utils");
 async function createDirectoryStructure() {
     console.log('📁 Creating directory structure...');
     for (const size of constants_1.BUILD_CONFIG.sizes) {
-        const sizeDir = path_1.default.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
-        await fs_extra_1.default.ensureDir(sizeDir);
+        const sizeDir = path.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
+        await fs.ensureDir(sizeDir);
     }
     console.log('✅ Directory structure created');
 }
@@ -33,31 +63,49 @@ async function copySVGFiles() {
     let copiedFiles = 0;
     try {
         // Find all SVG files in assets directory
-        const assetsDir = path_1.default.resolve(constants_1.BUILD_CONFIG.sourceDir);
-        if (!(await fs_extra_1.default.pathExists(assetsDir))) {
+        const assetsDir = path.resolve(constants_1.BUILD_CONFIG.sourceDir);
+        if (!(await fs.pathExists(assetsDir))) {
             console.log('⚠️  Assets directory not found, creating sample files...');
             await createSampleFiles();
             return;
         }
-        const iconDirs = await fs_extra_1.default.readdir(assetsDir);
+        const iconDirs = await fs.readdir(assetsDir);
         for (const iconDir of iconDirs) {
-            const iconDirPath = path_1.default.join(assetsDir, iconDir);
-            const stats = await fs_extra_1.default.stat(iconDirPath);
+            const iconDirPath = path.join(assetsDir, iconDir);
+            const stats = await fs.stat(iconDirPath);
             if (!stats.isDirectory())
                 continue;
             // Map icon name
             const iconName = (0, utils_1.mapIconName)(iconDir);
+            // Look for SVG files in the icon directory
+            const svgDir = path.join(iconDirPath, 'svg');
+            if (!(await fs.pathExists(svgDir))) {
+                console.log(`⚠️  SVG directory not found for ${iconDir}, skipping...`);
+                continue;
+            }
+            // const svgFiles = await fs.readdir(svgDir);
             // Copy files for each size
             for (const size of constants_1.BUILD_CONFIG.sizes) {
-                const sizeDir = path_1.default.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
+                const sizeDir = path.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
                 // Create files for each style
                 for (const style of constants_1.BUILD_CONFIG.styles) {
                     const fileName = `${iconName}-${style}.svg`;
-                    const outputPath = path_1.default.join(sizeDir, fileName);
-                    // Generate sample SVG content
-                    const svgContent = (0, utils_1.generateSampleSVG)(iconName, size, style);
-                    await fs_extra_1.default.writeFile(outputPath, svgContent);
-                    copiedFiles++;
+                    const outputPath = path.join(sizeDir, fileName);
+                    // Find the corresponding SVG file
+                    const svgFileName = `ic_refineui_${iconName.replace(/_/g, '-')}_${size}_${style}.svg`;
+                    const sourceSvgPath = path.join(svgDir, svgFileName);
+                    if (await fs.pathExists(sourceSvgPath)) {
+                        // Copy the actual SVG file
+                        await fs.copy(sourceSvgPath, outputPath);
+                        copiedFiles++;
+                    }
+                    else {
+                        // Generate sample SVG content if file not found
+                        console.log(`⚠️  SVG file not found: ${svgFileName}, generating sample...`);
+                        const svgContent = (0, utils_1.generateSampleSVG)(iconName, size, style);
+                        await fs.writeFile(outputPath, svgContent);
+                        copiedFiles++;
+                    }
                 }
             }
             totalFiles++;
@@ -84,12 +132,12 @@ async function createSampleFiles() {
     let totalFiles = 0;
     for (const iconName of sampleIcons) {
         for (const size of constants_1.BUILD_CONFIG.sizes) {
-            const sizeDir = path_1.default.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
+            const sizeDir = path.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
             for (const style of constants_1.BUILD_CONFIG.styles) {
                 const fileName = `${iconName}-${style}.svg`;
-                const outputPath = path_1.default.join(sizeDir, fileName);
+                const outputPath = path.join(sizeDir, fileName);
                 const svgContent = (0, utils_1.generateSampleSVG)(iconName, size, style);
-                await fs_extra_1.default.writeFile(outputPath, svgContent);
+                await fs.writeFile(outputPath, svgContent);
                 totalFiles++;
             }
         }
@@ -110,9 +158,9 @@ async function generateMetadata() {
     };
     // Generate icon list for each size
     for (const size of constants_1.BUILD_CONFIG.sizes) {
-        const sizeDir = path_1.default.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
-        if (await fs_extra_1.default.pathExists(sizeDir)) {
-            const files = await fs_extra_1.default.readdir(sizeDir);
+        const sizeDir = path.join(constants_1.BUILD_CONFIG.outputDir, size.toString());
+        if (await fs.pathExists(sizeDir)) {
+            const files = await fs.readdir(sizeDir);
             for (const file of files) {
                 if (file.endsWith('.svg')) {
                     const iconName = file.replace('.svg', '');
@@ -132,7 +180,7 @@ async function generateMetadata() {
     }
     metadata.totalIcons = metadata.icons.length;
     // Save metadata file
-    await fs_extra_1.default.writeFile(path_1.default.join(constants_1.BUILD_CONFIG.outputDir, 'metadata.json'), JSON.stringify(metadata, null, 2));
+    await fs.writeFile(path.join(constants_1.BUILD_CONFIG.outputDir, 'metadata.json'), JSON.stringify(metadata, null, 2));
     console.log(`✅ Generated metadata for ${metadata.totalIcons} icons`);
 }
 /**
@@ -142,7 +190,7 @@ async function build() {
     console.log('🚀 Starting RefineUI Icon CDN Package build...');
     try {
         // Clean output directory
-        await fs_extra_1.default.remove(constants_1.BUILD_CONFIG.outputDir);
+        await fs.remove(constants_1.BUILD_CONFIG.outputDir);
         // Create directory structure
         await createDirectoryStructure();
         // Copy SVG files