npm - @nice2dev/icons - Versions diffs - 1.0.0 → 1.0.3 - Mend

@nice2dev/icons 1.0.0 → 1.0.3

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.

Files changed (152) hide show

package/CHANGELOG.md +169 -7
package/README.md +247 -2
package/bin/ntd-icons.mjs +732 -0
package/dist/cjs/NtdIconBadge.js +375 -0
package/dist/cjs/NtdIconBadge.js.map +1 -0
package/dist/cjs/NtdIconMorph.js +386 -0
package/dist/cjs/NtdIconMorph.js.map +1 -0
package/dist/cjs/NtdStateMorph.js +177 -0
package/dist/cjs/NtdStateMorph.js.map +1 -0
package/dist/cjs/createIcon.js +51 -4
package/dist/cjs/createIcon.js.map +1 -1
package/dist/cjs/figmaSync.js +308 -0
package/dist/cjs/figmaSync.js.map +1 -0
package/dist/cjs/iconAnalytics.js +189 -0
package/dist/cjs/iconAnalytics.js.map +1 -0
package/dist/cjs/iconMetadata.js +523 -0
package/dist/cjs/iconMetadata.js.map +1 -0
package/dist/cjs/iconStyles.js +597 -0
package/dist/cjs/iconStyles.js.map +1 -0
package/dist/cjs/icons/accessibility.js +168 -0
package/dist/cjs/icons/accessibility.js.map +1 -0
package/dist/cjs/icons/ai.js +191 -0
package/dist/cjs/icons/ai.js.map +1 -0
package/dist/cjs/icons/brand.js +70 -0
package/dist/cjs/icons/brand.js.map +1 -1
package/dist/cjs/icons/education.js +212 -0
package/dist/cjs/icons/education.js.map +1 -0
package/dist/cjs/icons/food.js +198 -0
package/dist/cjs/icons/food.js.map +1 -0
package/dist/cjs/icons/gaming.js +191 -0
package/dist/cjs/icons/gaming.js.map +1 -0
package/dist/cjs/icons/index.js +520 -0
package/dist/cjs/icons/index.js.map +1 -0
package/dist/cjs/icons/legal.js +168 -0
package/dist/cjs/icons/legal.js.map +1 -0
package/dist/cjs/icons/realestate.js +212 -0
package/dist/cjs/icons/realestate.js.map +1 -0
package/dist/cjs/icons/science.js +201 -0
package/dist/cjs/icons/science.js.map +1 -0
package/dist/cjs/icons/sports.js +176 -0
package/dist/cjs/icons/sports.js.map +1 -0
package/dist/cjs/icons/sustainability.js +193 -0
package/dist/cjs/icons/sustainability.js.map +1 -0
package/dist/cjs/icons/travel.js +184 -0
package/dist/cjs/icons/travel.js.map +1 -0
package/dist/cjs/index.js +265 -2
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/lottieIntegration.js +286 -0
package/dist/cjs/lottieIntegration.js.map +1 -0
package/dist/cjs/nicetodev-icons.css +1 -1
package/dist/cjs/particleEffects.js +259 -0
package/dist/cjs/particleEffects.js.map +1 -0
package/dist/cjs/resolver.js +224 -0
package/dist/cjs/resolver.js.map +1 -0
package/dist/cjs/tailwind-plugin.js +340 -0
package/dist/cjs/tailwind-plugin.js.map +1 -0
package/dist/cjs/types.js +38 -0
package/dist/cjs/types.js.map +1 -1
package/dist/cjs/variantProps.js +78 -0
package/dist/cjs/variantProps.js.map +1 -0
package/dist/esm/NtdIconBadge.js +370 -0
package/dist/esm/NtdIconBadge.js.map +1 -0
package/dist/esm/NtdIconMorph.js +381 -0
package/dist/esm/NtdIconMorph.js.map +1 -0
package/dist/esm/NtdStateMorph.js +174 -0
package/dist/esm/NtdStateMorph.js.map +1 -0
package/dist/esm/createIcon.js +53 -6
package/dist/esm/createIcon.js.map +1 -1
package/dist/esm/figmaSync.js +304 -0
package/dist/esm/figmaSync.js.map +1 -0
package/dist/esm/iconAnalytics.js +185 -0
package/dist/esm/iconAnalytics.js.map +1 -0
package/dist/esm/iconMetadata.js +510 -0
package/dist/esm/iconMetadata.js.map +1 -0
package/dist/esm/iconStyles.js +585 -0
package/dist/esm/iconStyles.js.map +1 -0
package/dist/esm/icons/accessibility.js +153 -0
package/dist/esm/icons/accessibility.js.map +1 -0
package/dist/esm/icons/ai.js +174 -0
package/dist/esm/icons/ai.js.map +1 -0
package/dist/esm/icons/brand.js +67 -1
package/dist/esm/icons/brand.js.map +1 -1
package/dist/esm/icons/education.js +193 -0
package/dist/esm/icons/education.js.map +1 -0
package/dist/esm/icons/food.js +180 -0
package/dist/esm/icons/food.js.map +1 -0
package/dist/esm/icons/gaming.js +174 -0
package/dist/esm/icons/gaming.js.map +1 -0
package/dist/esm/icons/index.js +31 -0
package/dist/esm/icons/index.js.map +1 -0
package/dist/esm/icons/legal.js +153 -0
package/dist/esm/icons/legal.js.map +1 -0
package/dist/esm/icons/realestate.js +193 -0
package/dist/esm/icons/realestate.js.map +1 -0
package/dist/esm/icons/science.js +183 -0
package/dist/esm/icons/science.js.map +1 -0
package/dist/esm/icons/sports.js +160 -0
package/dist/esm/icons/sports.js.map +1 -0
package/dist/esm/icons/sustainability.js +176 -0
package/dist/esm/icons/sustainability.js.map +1 -0
package/dist/esm/icons/travel.js +167 -0
package/dist/esm/icons/travel.js.map +1 -0
package/dist/esm/index.js +27 -5
package/dist/esm/index.js.map +1 -1
package/dist/esm/lottieIntegration.js +282 -0
package/dist/esm/lottieIntegration.js.map +1 -0
package/dist/esm/nicetodev-icons.css +1 -1
package/dist/esm/particleEffects.js +257 -0
package/dist/esm/particleEffects.js.map +1 -0
package/dist/esm/resolver.js +221 -0
package/dist/esm/resolver.js.map +1 -0
package/dist/esm/tailwind-plugin.js +337 -0
package/dist/esm/tailwind-plugin.js.map +1 -0
package/dist/esm/types.js +37 -1
package/dist/esm/types.js.map +1 -1
package/dist/esm/variantProps.js +68 -0
package/dist/esm/variantProps.js.map +1 -0
package/dist/types/NtdIconBadge.d.ts +209 -0
package/dist/types/NtdIconMorph.d.ts +183 -0
package/dist/types/NtdStateMorph.d.ts +100 -0
package/dist/types/client.d.ts +27 -0
package/dist/types/design-tokens.d.ts +281 -0
package/dist/types/figmaSync.d.ts +135 -0
package/dist/types/headless-ui.d.ts +462 -0
package/dist/types/iconAnalytics.d.ts +131 -0
package/dist/types/iconMetadata.d.ts +123 -0
package/dist/types/iconStyles.d.ts +104 -0
package/dist/types/icons/accessibility.d.ts +39 -0
package/dist/types/icons/ai.d.ts +43 -0
package/dist/types/icons/brand.d.ts +4 -0
package/dist/types/icons/education.d.ts +47 -0
package/dist/types/icons/food.d.ts +45 -0
package/dist/types/icons/gaming.d.ts +42 -0
package/dist/types/icons/index.d.ts +12 -1
package/dist/types/icons/legal.d.ts +39 -0
package/dist/types/icons/realestate.d.ts +47 -0
package/dist/types/icons/science.d.ts +45 -0
package/dist/types/icons/sports.d.ts +41 -0
package/dist/types/icons/sustainability.d.ts +43 -0
package/dist/types/icons/travel.d.ts +43 -0
package/dist/types/index.d.ts +28 -6
package/dist/types/lottieIntegration.d.ts +173 -0
package/dist/types/micro-interactions.d.ts +146 -0
package/dist/types/microInteractions.d.ts +174 -0
package/dist/types/particleEffects.d.ts +69 -0
package/dist/types/resolver.d.ts +58 -0
package/dist/types/rsc.d.ts +159 -0
package/dist/types/tailwind-plugin.d.ts +100 -0
package/dist/types/types.d.ts +100 -0
package/dist/types/utilities.d.ts +221 -0
package/dist/types/variantProps.d.ts +122 -0
package/package.json +58 -5

package/bin/ntd-icons.mjs ADDED Viewed

@@ -0,0 +1,732 @@
+#!/usr/bin/env node
+/**
+ * @file ntd-icons CLI
+ * @description Command-line interface for @nice2dev/icons library
+ *
+ * Commands:
+ *   preview <icon>     Open icon preview in browser
+ *   list               List all icons
+ *   export             Export icons to various formats
+ *   search             Search icons by name or tags
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+import { spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import http from 'http';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, '..');
+// ANSI colors for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+};
+const log = {
+  info: (msg) => console.log(`${colors.blue}ℹ${colors.reset} ${msg}`),
+  success: (msg) => console.log(`${colors.green}✔${colors.reset} ${msg}`),
+  warn: (msg) => console.log(`${colors.yellow}⚠${colors.reset} ${msg}`),
+  error: (msg) => console.error(`${colors.red}✖${colors.reset} ${msg}`),
+  title: (msg) => console.log(`\n${colors.bright}${colors.cyan}${msg}${colors.reset}\n`),
+};
+// Parse command line arguments
+function parseArgs(args) {
+  const result = {
+    command: null,
+    positional: [],
+    flags: {},
+  };
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.startsWith('--')) {
+      const [key, value] = arg.slice(2).split('=');
+      result.flags[key] = value ?? true;
+    } else if (arg.startsWith('-') && arg.length === 2) {
+      result.flags[arg.slice(1)] = args[++i] ?? true;
+    } else if (!result.command) {
+      result.command = arg;
+    } else {
+      result.positional.push(arg);
+    }
+  }
+  return result;
+}
+// Get list of all icons from source files
+async function getIconList() {
+  const iconsDir = path.join(packageRoot, 'src', 'icons');
+  const icons = [];
+  const categories = {};
+  try {
+    const files = fs.readdirSync(iconsDir).filter(f => f.endsWith('.tsx') && f !== 'index.ts');
+    for (const file of files) {
+      const category = file.replace('.tsx', '');
+      const content = fs.readFileSync(path.join(iconsDir, file), 'utf-8');
+      // Match all exported const NtdXxx = createIcon patterns
+      const iconMatches = content.matchAll(/export const (Ntd\w+)\s*=\s*createIcon/g);
+      const categoryIcons = [];
+      for (const match of iconMatches) {
+        const iconName = match[1];
+        icons.push({ name: iconName, category, file });
+        categoryIcons.push(iconName);
+      }
+      if (categoryIcons.length > 0) {
+        categories[category] = categoryIcons;
+      }
+    }
+  } catch (err) {
+    log.error(`Failed to read icons: ${err.message}`);
+  }
+  return { icons, categories };
+}
+// Generate HTML preview page for icons
+function generatePreviewHtml(iconNames, title = 'Icon Preview') {
+  const icons = iconNames.map(name => `
+    <div class="icon-card">
+      <div class="icon-preview" id="icon-${name}">
+        <!-- Icon will be rendered here -->
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <text x="12" y="16" text-anchor="middle" font-size="8">${name.slice(3, 6)}</text>
+        </svg>
+      </div>
+      <div class="icon-name">${name}</div>
+      <div class="icon-actions">
+        <button onclick="copyName('${name}')" title="Copy name">📋</button>
+        <button onclick="copyImport('${name}')" title="Copy import">📥</button>
+      </div>
+    </div>
+  `).join('\n');
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title} - @nice2dev/icons</title>
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card-bg: #1e293b;
+      --text: #e2e8f0;
+      --text-dim: #94a3b8;
+      --accent: #3b82f6;
+      --accent-hover: #2563eb;
+      --success: #22c55e;
+      --border: #334155;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      padding: 2rem;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    .header h1 {
+      font-size: 2rem;
+      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .header p {
+      color: var(--text-dim);
+      margin-top: 0.5rem;
+    }
+    .controls {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+    }
+    .controls input, .controls select {
+      padding: 0.75rem 1rem;
+      border: 1px solid var(--border);
+      border-radius: 0.5rem;
+      background: var(--card-bg);
+      color: var(--text);
+      font-size: 1rem;
+      min-width: 200px;
+    }
+    .controls input:focus, .controls select:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    .variant-buttons {
+      display: flex;
+      gap: 0.5rem;
+    }
+    .variant-btn {
+      padding: 0.5rem 1rem;
+      border: 1px solid var(--border);
+      border-radius: 0.375rem;
+      background: var(--card-bg);
+      color: var(--text);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .variant-btn:hover {
+      border-color: var(--accent);
+    }
+    .variant-btn.active {
+      background: var(--accent);
+      border-color: var(--accent);
+    }
+    .icon-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 1rem;
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+    .icon-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      padding: 1rem;
+      text-align: center;
+      transition: all 0.2s;
+    }
+    .icon-card:hover {
+      border-color: var(--accent);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+    }
+    .icon-preview {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon-preview svg {
+      width: 100%;
+      height: 100%;
+    }
+    .icon-name {
+      font-size: 0.75rem;
+      color: var(--text-dim);
+      word-break: break-all;
+      margin-bottom: 0.5rem;
+    }
+    .icon-actions {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+    }
+    .icon-actions button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0.25rem;
+      font-size: 1rem;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+    }
+    .icon-actions button:hover {
+      opacity: 1;
+    }
+    .toast {
+      position: fixed;
+      bottom: 2rem;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--success);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.5rem;
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 0.3s;
+      pointer-events: none;
+    }
+    .toast.show {
+      opacity: 1;
+    }
+    .stats {
+      text-align: center;
+      margin-bottom: 1.5rem;
+      color: var(--text-dim);
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #f8fafc;
+        --card-bg: #ffffff;
+        --text: #1e293b;
+        --text-dim: #64748b;
+        --border: #e2e8f0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>${title}</h1>
+    <p>@nice2dev/icons</p>
+  </div>
+  <div class="controls">
+    <input type="text" id="search" placeholder="Search icons..." oninput="filterIcons()">
+    <select id="size" onchange="updateSize()">
+      <option value="24">24px</option>
+      <option value="32">32px</option>
+      <option value="48" selected>48px</option>
+      <option value="64">64px</option>
+    </select>
+    <input type="color" id="color" value="#3b82f6" onchange="updateColor()" title="Icon color">
+    <div class="variant-buttons">
+      <button class="variant-btn active" data-variant="solid" onclick="setVariant('solid')">Solid</button>
+      <button class="variant-btn" data-variant="outline" onclick="setVariant('outline')">Outline</button>
+      <button class="variant-btn" data-variant="duotone" onclick="setVariant('duotone')">Duotone</button>
+      <button class="variant-btn" data-variant="flat" onclick="setVariant('flat')">Flat</button>
+    </div>
+  </div>
+  <div class="stats" id="stats">${iconNames.length} icons</div>
+  <div class="icon-grid" id="icon-grid">
+    ${icons}
+  </div>
+  <div class="toast" id="toast">Copied!</div>
+  <script>
+    let currentVariant = 'solid';
+    let currentColor = '#3b82f6';
+    let currentSize = 48;
+    function showToast(message) {
+      const toast = document.getElementById('toast');
+      toast.textContent = message;
+      toast.classList.add('show');
+      setTimeout(() => toast.classList.remove('show'), 2000);
+    }
+    function copyName(name) {
+      navigator.clipboard.writeText(name);
+      showToast('Name copied!');
+    }
+    function copyImport(name) {
+      const importStatement = \`import { \${name} } from '@nice2dev/icons';\`;
+      navigator.clipboard.writeText(importStatement);
+      showToast('Import copied!');
+    }
+    function filterIcons() {
+      const search = document.getElementById('search').value.toLowerCase();
+      const cards = document.querySelectorAll('.icon-card');
+      let visible = 0;
+      cards.forEach(card => {
+        const name = card.querySelector('.icon-name').textContent.toLowerCase();
+        const matches = name.includes(search);
+        card.style.display = matches ? '' : 'none';
+        if (matches) visible++;
+      });
+      document.getElementById('stats').textContent = visible + ' icons';
+    }
+    function updateSize() {
+      currentSize = parseInt(document.getElementById('size').value);
+      document.querySelectorAll('.icon-preview').forEach(el => {
+        el.style.width = currentSize + 'px';
+        el.style.height = currentSize + 'px';
+      });
+    }
+    function updateColor() {
+      currentColor = document.getElementById('color').value;
+      document.querySelectorAll('.icon-preview svg').forEach(svg => {
+        svg.style.color = currentColor;
+      });
+    }
+    function setVariant(variant) {
+      currentVariant = variant;
+      document.querySelectorAll('.variant-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.variant === variant);
+      });
+      // In a real implementation, this would update the icon rendering
+    }
+  </script>
+</body>
+</html>`;
+}
+// Command: preview
+async function cmdPreview(args) {
+  const { positional, flags } = args;
+  const iconName = positional[0];
+  const port = parseInt(flags.port) || 3333;
+  log.title('📱 Icon Preview');
+  const { icons, categories } = await getIconList();
+  let iconsToShow;
+  let title;
+  if (iconName) {
+    // Show specific icon(s)
+    const matchingIcons = icons.filter(i =>
+      i.name.toLowerCase().includes(iconName.toLowerCase())
+    );
+    if (matchingIcons.length === 0) {
+      log.error(`No icons found matching "${iconName}"`);
+      process.exit(1);
+    }
+    iconsToShow = matchingIcons.map(i => i.name);
+    title = `Preview: ${iconName}`;
+    log.info(`Found ${matchingIcons.length} icon(s) matching "${iconName}"`);
+  } else {
+    // Show all icons
+    iconsToShow = icons.map(i => i.name);
+    title = 'All Icons Preview';
+  }
+  const html = generatePreviewHtml(iconsToShow, title);
+  // Create a simple HTTP server
+  const server = http.createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(html);
+  });
+  server.listen(port, () => {
+    log.success(`Preview server running at http://localhost:${port}`);
+    log.info('Press Ctrl+C to stop');
+    // Try to open browser
+    const url = `http://localhost:${port}`;
+    const openCmd = process.platform === 'win32' ? 'start' :
+                    process.platform === 'darwin' ? 'open' : 'xdg-open';
+    spawn(openCmd, [url], { shell: true, stdio: 'ignore' });
+  });
+}
+// Command: list
+async function cmdList(args) {
+  const { flags } = args;
+  const category = flags.category;
+  const format = flags.format || 'table';
+  const json = flags.json;
+  log.title('📋 Icon List');
+  const { icons, categories } = await getIconList();
+  if (json) {
+    console.log(JSON.stringify(category ? { [category]: categories[category] } : categories, null, 2));
+    return;
+  }
+  if (category) {
+    if (!categories[category]) {
+      log.error(`Category "${category}" not found`);
+      log.info(`Available categories: ${Object.keys(categories).join(', ')}`);
+      process.exit(1);
+    }
+    console.log(`\n${colors.bright}${category}${colors.reset} (${categories[category].length} icons)\n`);
+    categories[category].forEach(icon => {
+      console.log(`  ${colors.cyan}•${colors.reset} ${icon}`);
+    });
+  } else {
+    // Show all categories with counts
+    console.log(`\n${colors.bright}Categories:${colors.reset}\n`);
+    for (const [cat, catIcons] of Object.entries(categories).sort()) {
+      console.log(`  ${colors.cyan}${cat}${colors.reset} ${colors.dim}(${catIcons.length} icons)${colors.reset}`);
+    }
+    console.log(`\n${colors.dim}Total: ${icons.length} icons in ${Object.keys(categories).length} categories${colors.reset}`);
+    console.log(`\n${colors.dim}Use --category=<name> to list icons in a specific category${colors.reset}`);
+  }
+}
+// Command: search
+async function cmdSearch(args) {
+  const { positional, flags } = args;
+  const query = positional.join(' ');
+  if (!query) {
+    log.error('Please provide a search query');
+    console.log('\nUsage: ntd-icons search <query>');
+    process.exit(1);
+  }
+  log.title(`🔍 Searching for "${query}"`);
+  const { icons } = await getIconList();
+  const results = icons.filter(icon =>
+    icon.name.toLowerCase().includes(query.toLowerCase()) ||
+    icon.category.toLowerCase().includes(query.toLowerCase())
+  );
+  if (results.length === 0) {
+    log.warn('No icons found');
+    return;
+  }
+  console.log(`\nFound ${results.length} icon(s):\n`);
+  results.forEach(icon => {
+    console.log(`  ${colors.cyan}${icon.name}${colors.reset} ${colors.dim}[${icon.category}]${colors.reset}`);
+  });
+  if (flags.copy && results.length === 1) {
+    const importStatement = `import { ${results[0].name} } from '@nice2dev/icons';`;
+    // Note: clipboard not available in all environments
+    log.info(`Import: ${importStatement}`);
+  }
+}
+// Command: export
+async function cmdExport(args) {
+  const { flags } = args;
+  const format = flags.format || 'svg';
+  const iconNames = flags.icons?.split(',') || [];
+  const output = flags.output || './icons-export';
+  const all = flags.all;
+  log.title('📦 Export Icons');
+  const { icons, categories } = await getIconList();
+  let iconsToExport;
+  if (all) {
+    iconsToExport = icons;
+  } else if (iconNames.length > 0) {
+    iconsToExport = icons.filter(i => iconNames.includes(i.name));
+  } else {
+    log.error('Please specify icons to export with --icons=NtdHome,NtdUser or use --all');
+    process.exit(1);
+  }
+  log.info(`Exporting ${iconsToExport.length} icons as ${format.toUpperCase()}`);
+  // Create output directory
+  if (!fs.existsSync(output)) {
+    fs.mkdirSync(output, { recursive: true });
+  }
+  if (format === 'json') {
+    // Export as JSON manifest
+    const manifest = {
+      version: '1.0.0',
+      generatedAt: new Date().toISOString(),
+      icons: iconsToExport.map(i => ({
+        name: i.name,
+        category: i.category,
+        import: `import { ${i.name} } from '@nice2dev/icons';`,
+      })),
+    };
+    const filePath = path.join(output, 'icons-manifest.json');
+    fs.writeFileSync(filePath, JSON.stringify(manifest, null, 2));
+    log.success(`Exported manifest to ${filePath}`);
+  } else if (format === 'ts' || format === 'typescript') {
+    // Generate TypeScript barrel file
+    const imports = iconsToExport.map(i => `  ${i.name},`).join('\n');
+    const content = `// Auto-generated icon barrel file
+// Generated at ${new Date().toISOString()}
+export {
+${imports}
+} from '@nice2dev/icons';
+`;
+    const filePath = path.join(output, 'icons.ts');
+    fs.writeFileSync(filePath, content);
+    log.success(`Exported TypeScript barrel to ${filePath}`);
+  } else {
+    log.warn(`Format "${format}" export requires the full build. Use JSON or TypeScript for now.`);
+    log.info('For SVG export, use: npm run build:spritesheet');
+  }
+}
+// Command: info
+async function cmdInfo(args) {
+  const { positional } = args;
+  const iconName = positional[0];
+  if (!iconName) {
+    log.error('Please specify an icon name');
+    console.log('\nUsage: ntd-icons info <icon-name>');
+    process.exit(1);
+  }
+  log.title(`ℹ️  Icon Info: ${iconName}`);
+  const { icons } = await getIconList();
+  const icon = icons.find(i => i.name.toLowerCase() === iconName.toLowerCase());
+  if (!icon) {
+    log.error(`Icon "${iconName}" not found`);
+    process.exit(1);
+  }
+  console.log(`
+  ${colors.bright}Name:${colors.reset}     ${icon.name}
+  ${colors.bright}Category:${colors.reset} ${icon.category}
+  ${colors.bright}File:${colors.reset}     src/icons/${icon.file}
+  ${colors.bright}Import:${colors.reset}
+    import { ${icon.name} } from '@nice2dev/icons';
+  ${colors.bright}Usage:${colors.reset}
+    <${icon.name} size="md" variant="solid" primaryColor="#3b82f6" />
+    <${icon.name} variant="duotone" animation="pulse" />
+  ${colors.bright}Variants:${colors.reset} solid, outline, duotone, flat
+  ${colors.bright}Sizes:${colors.reset}    xs (12px), sm (16px), md (24px), lg (32px), xl (48px)
+`);
+}
+// Show help
+function showHelp() {
+  console.log(`
+${colors.bright}${colors.cyan}@nice2dev/icons CLI${colors.reset}
+${colors.bright}Usage:${colors.reset} ntd-icons <command> [options]
+${colors.bright}Commands:${colors.reset}
+  ${colors.cyan}preview${colors.reset} [icon]      Open icon preview in browser
+  ${colors.cyan}list${colors.reset}                List all icons and categories
+  ${colors.cyan}search${colors.reset} <query>      Search icons by name
+  ${colors.cyan}export${colors.reset}              Export icons to various formats
+  ${colors.cyan}info${colors.reset} <icon>         Show detailed info about an icon
+${colors.bright}Options:${colors.reset}
+  ${colors.cyan}--category${colors.reset}=<name>   Filter by category (list command)
+  ${colors.cyan}--format${colors.reset}=<type>     Export format: json, ts (export command)
+  ${colors.cyan}--icons${colors.reset}=<names>     Comma-separated icon names (export command)
+  ${colors.cyan}--all${colors.reset}               Export all icons (export command)
+  ${colors.cyan}--output${colors.reset}=<path>     Output directory (export command)
+  ${colors.cyan}--port${colors.reset}=<number>     Server port (preview command, default: 3333)
+  ${colors.cyan}--json${colors.reset}              Output as JSON
+  ${colors.cyan}--help, -h${colors.reset}          Show this help
+${colors.bright}Examples:${colors.reset}
+  ${colors.dim}# Preview all icons${colors.reset}
+  npx @nice2dev/icons preview
+  ${colors.dim}# Preview icons matching "home"${colors.reset}
+  npx @nice2dev/icons preview home
+  ${colors.dim}# List icons in UI category${colors.reset}
+  npx @nice2dev/icons list --category=ui
+  ${colors.dim}# Search for icons${colors.reset}
+  npx @nice2dev/icons search arrow
+  ${colors.dim}# Export specific icons to TypeScript${colors.reset}
+  npx @nice2dev/icons export --format=ts --icons=NtdHome,NtdUser
+  ${colors.dim}# Get info about an icon${colors.reset}
+  npx @nice2dev/icons info NtdHome
+`);
+}
+// Main entry point
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.flags.help || args.flags.h || !args.command) {
+    showHelp();
+    process.exit(args.command ? 0 : 1);
+  }
+  const commands = {
+    preview: cmdPreview,
+    list: cmdList,
+    search: cmdSearch,
+    export: cmdExport,
+    info: cmdInfo,
+  };
+  const handler = commands[args.command];
+  if (!handler) {
+    log.error(`Unknown command: ${args.command}`);
+    showHelp();
+    process.exit(1);
+  }
+  try {
+    await handler(args);
+  } catch (err) {
+    log.error(`Command failed: ${err.message}`);
+    process.exit(1);
+  }
+}
+main();