@refineui/icon-cdn 0.1.22

package/README.md

@@ -0,0 +1,381 @@
+# @refineui/icon-cdn
+
+A CDN package providing direct URL access to RefineUI System Icons. Perfect for projects that need to load icons directly from URLs without installing packages.
+
+## 🚀 Features
+
+- 🌐 **Direct URL access**: Load icons directly from CDN
+- 📦 **434+ icons**: Complete icon collection
+- 🎨 **Multiple formats**: SVG, PNG, and font files
+- 🎭 **Two styles**: Regular and filled variants
+- 📱 **Multiple sizes**: 16, 20, 24, 28, 32, 48px variants
+- 🚀 **Fast delivery**: Global CDN distribution
+- 💰 **Free to use**: No API keys or authentication required
+- 🔧 **Framework agnostic**: Works with any technology stack
+
+## 📦 Installation
+
+```bash
+npm install @refineui/icon-cdn
+# or
+yarn add @refineui/icon-cdn
+```
+
+## 🎯 Quick Start
+
+### Direct URL Usage
+
+```html
+<!-- SVG icons -->
+<img
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.svg"
+  alt="Add"
+/>
+<img
+  src="https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/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"
+/>
+```
+
+### CSS Background Images
+
+```css
+.add-icon {
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/24/add-regular.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+}
+
+.heart-icon {
+  background-image: url("https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/32/heart-filled.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 32px;
+  height: 32px;
+}
+```
+
+### 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}`;
+
+  const img = new Image();
+  img.src = url;
+  img.alt = iconName;
+
+  return img;
+}
+
+// Usage
+const addIcon = loadIcon("add", 24, "regular", "svg");
+document.body.appendChild(addIcon);
+```
+
+## 📚 API Reference
+
+### URL Structure
+
+```
+https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@latest/icons/{size}/{iconName}-{style}.{format}
+```
+
+### Parameters
+
+| 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   |
+| `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
+
+### Icon Naming Convention
+
+Icons follow a consistent naming pattern:
+
+- **Format**: `icon-name-style`
+- **Examples**:
+  - `add-regular`
+  - `heart-filled`
+  - `settings-regular`
+
+## 🎨 Available Icons
+
+**All 434+ icons are supported!**
+
+### Key Icon Categories:
+
+- 🧭 **Navigation**: home, search, arrow, chevron, location, map
+- ⚡ **Actions**: add, edit, delete, save, close, checkmark
+- 💬 **Communication**: mail, chat, phone, share, notification
+- 🎬 **Media**: play, pause, stop, video, audio, camera
+- 👥 **Social**: person, user, group, heart, star
+- 💻 **Technology**: computer, laptop, phone, tablet, wifi
+- 🌤️ **Weather**: sun, moon, cloud, rain, snow
+- 🔧 **Tools**: settings, gear, tool, wrench, hammer
+
+### Complete Icon List
+
+The package includes icons for every use case:
+
+- **UI Elements**: Button, Input, Form, Modal, Tab
+- **Business**: Calendar, Chart, Document, Invoice, Payment
+- **Development**: Code, Database, Server, API, Terminal
+- **Design**: Color, Palette, Brush, Crop, Filter
+- **Communication**: Email, Message, Call, Video Call, Conference
+- **File Management**: File, Folder, Document, Image, Archive
+- **Security**: Lock, Shield, Key, Certificate, Privacy
+- **And many more...**
+
+## 🔧 Utility Functions
+
+### URL Generation
+
+```javascript
+import { generateIconUrl, 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"
+
+// Generate filename
+const fileName = generateIconFileName("heart", "filled", "png");
+// Returns: "heart-filled.png"
+```
+
+### Icon Validation
+
+```javascript
+import { isIconSupported, getAvailableIcons } from "@refineui/icon-cdn";
+
+// Check if icon is supported
+const isSupported = isIconSupported("add", "regular", 24);
+// Returns: true
+
+// Get all available icons
+const allIcons = getAvailableIcons();
+// Returns: array of all icon names
+```
+
+## 📱 Examples
+
+### Icon Gallery
+
+```javascript
+function createIconGallery(icons, size = 24, style = "regular") {
+  const gallery = document.createElement("div");
+  gallery.style.cssText = `
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 16px;
+    padding: 16px;
+  `;
+
+  icons.forEach((iconName) => {
+    const iconContainer = document.createElement("div");
+    iconContainer.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 8px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    `;
+
+    const icon = document.createElement("img");
+    icon.src = generateIconUrl(iconName, size, style, "svg");
+    icon.alt = iconName;
+    icon.style.width = `${size}px`;
+    icon.style.height = `${size}px`;
+
+    const label = document.createElement("span");
+    label.textContent = iconName;
+    label.style.cssText = `
+      font-size: 12px;
+      margin-top: 4px;
+      text-align: center;
+    `;
+
+    iconContainer.appendChild(icon);
+    iconContainer.appendChild(label);
+    iconContainer.addEventListener("click", () =>
+      console.log(`Clicked: ${iconName}`)
+    );
+
+    gallery.appendChild(iconContainer);
+  });
+
+  return gallery;
+}
+
+// Usage
+const iconNames = ["add", "heart", "settings", "home", "search"];
+const gallery = createIconGallery(iconNames, 24, "regular");
+document.body.appendChild(gallery);
+```
+
+### Dynamic Icon Loading
+
+```javascript
+function loadIconAsync(iconName, size = 24, style = "regular") {
+  return new Promise((resolve, reject) => {
+    const url = generateIconUrl(iconName, size, style, "svg");
+
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to load icon: ${response.statusText}`);
+        }
+        return response.text();
+      })
+      .then((svgContent) => {
+        // Create SVG element from content
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgContent, "image/svg+xml");
+        const svgElement = doc.querySelector("svg");
+
+        if (svgElement) {
+          svgElement.style.width = `${size}px`;
+          svgElement.style.height = `${size}px`;
+          resolve(svgElement);
+        } else {
+          reject(new Error("Invalid SVG content"));
+        }
+      })
+      .catch(reject);
+  });
+}
+
+// Usage
+loadIconAsync("heart", 32, "filled")
+  .then((icon) => {
+    document.body.appendChild(icon);
+  })
+  .catch((error) => {
+    console.error("Error loading icon:", error);
+  });
+```
+
+### Icon Preloading
+
+```javascript
+function preloadIcons(iconNames, size = 24, style = "regular") {
+  const promises = iconNames.map((iconName) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(iconName);
+      img.onerror = () => resolve(iconName); // Continue even if some fail
+      img.src = generateIconUrl(iconName, size, style, "svg");
+    });
+  });
+
+  return Promise.all(promises);
+}
+
+// Usage
+const commonIcons = ["add", "edit", "delete", "save", "close"];
+preloadIcons(commonIcons, 24, "regular").then(() => {
+  console.log("Common icons preloaded");
+});
+```
+
+## 🚀 Performance
+
+### CDN Benefits
+
+- **Global Distribution**: Icons served from servers closest to users
+- **Caching**: Browser and CDN level caching for fast loading
+- **Compression**: Optimized file sizes for faster downloads
+- **Parallel Loading**: Multiple icons can load simultaneously
+
+### Best Practices
+
+```javascript
+// Preload critical icons
+const criticalIcons = ["add", "close", "menu"];
+criticalIcons.forEach((iconName) => {
+  const link = document.createElement("link");
+  link.rel = "preload";
+  link.as = "image";
+  link.href = generateIconUrl(iconName, 24, "regular", "svg");
+  document.head.appendChild(link);
+});
+
+// Lazy load non-critical icons
+function lazyLoadIcon(iconName, container) {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const icon = document.createElement("img");
+        icon.src = generateIconUrl(iconName, 24, "regular", "svg");
+        icon.alt = iconName;
+        entry.target.appendChild(icon);
+        observer.unobserve(entry.target);
+      }
+    });
+  });
+
+  observer.observe(container);
+}
+```
+
+## 🔧 Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Development Mode
+
+```bash
+npm run dev
+```
+
+### Type Checking
+
+```bash
+npm run type-check
+```
+
+## 📄 License
+
+MIT License - see [LICENSE](../../LICENSE) for details.
+
+## 🔗 Related Packages
+
+- [`@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
+
+## 🆘 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)
+
+---
+
+**@refineui/icon-cdn** - Professional icons via CDN 🚀

package/dist/IconUtils.d.ts

@@ -0,0 +1,60 @@
+export interface IconData {
+    name: string;
+    slug: string;
+    size: number[];
+    style: string[];
+    keyword: string;
+    description: string;
+    files: any[];
+    unicodeMapping: any;
+}
+export interface Metadata {
+    totalIcons: number;
+    supportedSizes: number[];
+    supportedStyles: string[];
+    fontFamilies: any;
+    icons: {
+        [key: string]: IconData;
+    };
+}
+declare class IconUtils {
+    private metadata;
+    private fontFamilies;
+    constructor();
+    /**
+     * Get the unicode character of the icon
+     */
+    getIconChar(iconName: string, style?: 'regular' | 'filled', size?: number): string | null;
+    /**
+     * Get the CSS class name of the icon
+     */
+    getIconClass(iconName: string, style?: 'regular' | 'filled', size?: number): string | null;
+    /**
+     * Get the font family of the icon
+     */
+    getFontFamily(style?: 'regular' | 'filled'): string;
+    /**
+     * Get all available icon names
+     */
+    getAllIconNames(): string[];
+    /**
+     * Get supported sizes
+     */
+    getSupportedSizes(): number[];
+    /**
+     * Get icon info
+     */
+    getIconInfo(iconName: string): IconData | null;
+    /**
+     * Search icons
+     */
+    searchIcons(query: string): string[];
+    /**
+     * Check if an icon is supported for a specific size and style
+     */
+    isIconSupported(iconName: string, style?: 'regular' | 'filled', size?: number): boolean;
+}
+declare const iconUtils: IconUtils;
+export default iconUtils;
+export { IconUtils };
+//# sourceMappingURL=IconUtils.d.ts.map

package/dist/IconUtils.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconUtils = void 0;
+const metadata_json_1 = __importDefault(require("./metadata.json"));
+class IconUtils {
+    constructor() {
+        this.metadata = metadata_json_1.default;
+        this.fontFamilies = metadata_json_1.default.fontFamilies;
+    }
+    /**
+     * Get the unicode character of the icon
+     */
+    getIconChar(iconName, style = 'regular', size = 24) {
+        const iconData = this.metadata.icons[iconName];
+        if (!iconData)
+            return null;
+        const unicodeInfo = iconData.unicodeMapping[size]?.[style];
+        if (!unicodeInfo)
+            return null;
+        return String.fromCodePoint(unicodeInfo.unicode);
+    }
+    /**
+     * Get the CSS class name of the icon
+     */
+    getIconClass(iconName, style = 'regular', size = 24) {
+        const iconData = this.metadata.icons[iconName];
+        if (!iconData)
+            return null;
+        const unicodeInfo = iconData.unicodeMapping[size]?.[style];
+        if (!unicodeInfo)
+            return null;
+        return unicodeInfo.cssClass;
+    }
+    /**
+     * Get the font family of the icon
+     */
+    getFontFamily(style = 'regular') {
+        return this.fontFamilies[style].font_family;
+    }
+    /**
+     * Get all available icon names
+     */
+    getAllIconNames() {
+        return Object.keys(this.metadata.icons);
+    }
+    /**
+     * Get supported sizes
+     */
+    getSupportedSizes() {
+        return this.metadata.supportedSizes;
+    }
+    /**
+     * Get icon info
+     */
+    getIconInfo(iconName) {
+        return this.metadata.icons[iconName] || null;
+    }
+    /**
+     * Search icons
+     */
+    searchIcons(query) {
+        const searchTerm = query.toLowerCase();
+        return Object.keys(this.metadata.icons).filter(iconName => iconName.toLowerCase().includes(searchTerm) ||
+            (this.metadata.icons[iconName]?.description || '').toLowerCase().includes(searchTerm));
+    }
+    /**
+     * Check if an icon is supported for a specific size and style
+     */
+    isIconSupported(iconName, style = 'regular', size = 24) {
+        const iconData = this.metadata.icons[iconName];
+        if (!iconData)
+            return false;
+        return iconData.size.includes(size) && iconData.style.includes(style);
+    }
+}
+exports.IconUtils = IconUtils;
+// Singleton instance creation
+const iconUtils = new IconUtils();
+exports.default = iconUtils;
+//# sourceMappingURL=IconUtils.js.map

package/dist/build.d.ts

@@ -0,0 +1,10 @@
+/**
+ * RefineUI Icon CDN Package Build Script
+ *
+ * This script copies SVG icons to a structured folder for CDN usage.
+ */
+/**
+ * Main build function
+ */
+export declare function build(): Promise<void>;
+//# sourceMappingURL=build.d.ts.map

package/dist/build.js

@@ -0,0 +1,165 @@
+"use strict";
+/**
+ * RefineUI Icon CDN Package Build Script
+ *
+ * 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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = build;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+/**
+ * Creates the directory structure for icon files
+ */
+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);
+    }
+    console.log('✅ Directory structure created');
+}
+/**
+ * Copies SVG files from source to output directory
+ */
+async function copySVGFiles() {
+    console.log('📋 Copying SVG files...');
+    let totalFiles = 0;
+    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))) {
+            console.log('⚠️  Assets directory not found, creating sample files...');
+            await createSampleFiles();
+            return;
+        }
+        const iconDirs = await fs_extra_1.default.readdir(assetsDir);
+        for (const iconDir of iconDirs) {
+            const iconDirPath = path_1.default.join(assetsDir, iconDir);
+            const stats = await fs_extra_1.default.stat(iconDirPath);
+            if (!stats.isDirectory())
+                continue;
+            // Map icon name
+            const iconName = (0, utils_1.mapIconName)(iconDir);
+            // 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());
+                // 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++;
+                }
+            }
+            totalFiles++;
+        }
+        console.log(`✅ Copied ${copiedFiles} SVG files for ${totalFiles} icons`);
+    }
+    catch (error) {
+        console.error('❌ Error copying SVG files:', error);
+        throw error;
+    }
+}
+/**
+ * Creates sample SVG files for testing
+ */
+async function createSampleFiles() {
+    console.log('🎨 Creating sample SVG files...');
+    const sampleIcons = [
+        'add', 'home', 'settings', 'search', 'heart', 'star', 'checkmark', 'close',
+        'edit', 'eye', 'file', 'folder', 'lock', 'mail', 'menu', 'play', 'plus',
+        'share', 'trash', 'user', 'calendar', 'camera', 'chat', 'download',
+        'gear', 'globe', 'image', 'link', 'more', 'notification', 'pause',
+        'save', 'upload', 'video', 'alert', 'bookmark', 'add_circle', 'add_square'
+    ];
+    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());
+            for (const style of constants_1.BUILD_CONFIG.styles) {
+                const fileName = `${iconName}-${style}.svg`;
+                const outputPath = path_1.default.join(sizeDir, fileName);
+                const svgContent = (0, utils_1.generateSampleSVG)(iconName, size, style);
+                await fs_extra_1.default.writeFile(outputPath, svgContent);
+                totalFiles++;
+            }
+        }
+    }
+    console.log(`✅ Created ${totalFiles} sample SVG files`);
+}
+/**
+ * Generates metadata file for all icons
+ */
+async function generateMetadata() {
+    console.log('📊 Generating metadata...');
+    const metadata = {
+        version: '1.0.0',
+        totalIcons: 0,
+        sizes: constants_1.BUILD_CONFIG.sizes,
+        styles: constants_1.BUILD_CONFIG.styles,
+        icons: []
+    };
+    // 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);
+            for (const file of files) {
+                if (file.endsWith('.svg')) {
+                    const iconName = file.replace('.svg', '');
+                    const [name, style] = iconName.split('-');
+                    if (name && style) {
+                        metadata.icons.push({
+                            name: name,
+                            style: style,
+                            size: size,
+                            fileName: file,
+                            url: `https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@1.0.0/icons/${size}/${file}`
+                        });
+                    }
+                }
+            }
+        }
+    }
+    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));
+    console.log(`✅ Generated metadata for ${metadata.totalIcons} icons`);
+}
+/**
+ * Main build function
+ */
+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);
+        // Create directory structure
+        await createDirectoryStructure();
+        // Copy SVG files
+        await copySVGFiles();
+        // Generate metadata
+        await generateMetadata();
+        console.log('🎉 Build completed successfully!');
+        console.log(`📦 Package ready for publishing to npm`);
+        console.log(`🌐 CDN URLs will be available at: https://cdn.jsdelivr.net/npm/@refineui/icon-cdn@1.0.0/icons/`);
+    }
+    catch (error) {
+        console.error('❌ Build failed:', error);
+        process.exit(1);
+    }
+}
+// Execute script if run directly
+if (require.main === module) {
+    build();
+}
+//# sourceMappingURL=build.js.map