@kolkrabbi/kol-loader 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# @kolkrabbi/kol-loader
+
+The KOL icon loader — `<Icon/>` plus the 341-icon registry and raw SVG entries.
+
+> **Vite-only.** Uses `import.meta.glob` to load the SVG set, so it requires a Vite-based build.
+
+## Install
+
+```sh
+npm i @kolkrabbi/kol-loader   # react / react-dom are peers
+```
+
+## Use
+
+```jsx
+import { Icon, ICONS, ALL_ICONS, hasIcon } from '@kolkrabbi/kol-loader'
+
+<Icon name="arrow-right" size={16} />
+```
+
+- `ICONS` — registry grouped by category (`rack`, `navigation`, `actions`, …).
+- `ALL_ICONS` — flat array of every icon name.
+- `hasIcon(name)` / `getCategory(name)` — lookup helpers.
+- `SVG_ENTRIES` — raw SVG strings for building icon galleries.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kolkrabbi/kol-loader",
+  "version": "0.1.0",
+  "description": "KOL icon loader — <Icon/> plus the 341-icon registry and raw SVG entries. Vite-only (uses import.meta.glob).",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "icons",
+    "react"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kolkrabbi/kol-design-system.git",
+    "directory": "packages/loader"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Icon.jsx

@@ -0,0 +1,122 @@
+/**
+ * Icon Component
+ *
+ * Dynamically loads and renders SVG icons from the svg/ directory (including subdirectories)
+ *
+ * @param {Object} props
+ * @param {string} props.name - Icon name (matches SVG filename without extension)
+ * @param {number|string} props.size - Icon size (default: 16)
+ * @param {string} props.className - Additional classes
+ * @param {Object} props.style - Inline styles
+ * @param {ReactNode} props.children - Optional: Direct SVG path content for custom icons
+ */
+/* Unified icon home. Canonical mirrored set (stroke + solid) + legacy loader set
+ * + web's app-specific set (chess/dashboard/docs), all folded into this package so
+ * a name always resolves across web + brand. `variant` picks stroke vs solid. */
+const strokeModules = import.meta.glob('./stroke/**/*.svg',  { eager: true, query: '?raw', import: 'default' })
+const solidModules  = import.meta.glob('./solid/**/*.svg',   { eager: true, query: '?raw', import: 'default' })
+const legacyModules = import.meta.glob('./svg/**/*.svg',     { eager: true, query: '?raw', import: 'default' })
+const kolLegacy     = import.meta.glob('./svg/00-kol/*.svg', { eager: true, query: '?raw', import: 'default' })
+const webModules    = import.meta.glob('./svg-web/**/*.svg', { eager: true, query: '?raw', import: 'default' })
+
+const byName = (mods) => {
+  const c = {}
+  for (const [path, svg] of Object.entries(mods)) {
+    c[(path.split('/').pop() || '').replace('.svg', '')] = svg
+  }
+  return c
+}
+const STROKE = byName(strokeModules)
+const SOLID  = byName(solidModules)
+const WEB    = byName(webModules)
+const LEGACY = (() => { const c = byName(legacyModules); Object.assign(c, byName(kolLegacy)); return c })()
+
+/* Canonical staging variant wins (kills drift); then the other variant, then the
+ * legacy loader set, then web's app-specific icons. */
+const resolveIcon = (name, variant) =>
+  (variant === 'solid' ? SOLID : STROKE)[name]
+  ?? (variant === 'solid' ? STROKE : SOLID)[name]
+  ?? LEGACY[name]
+  ?? WEB[name]
+
+const normalizeSize = (value) => {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  return '16px'
+}
+
+const applySizeToMarkup = (markup, sizeValue) => {
+  let updated = markup
+
+  if (/width="/i.test(updated)) {
+    updated = updated.replace(/width="[^"]*"/i, `width="${sizeValue}"`)
+  } else {
+    updated = updated.replace('<svg', `<svg width="${sizeValue}"`)
+  }
+
+  if (/height="/i.test(updated)) {
+    updated = updated.replace(/height="[^"]*"/i, `height="${sizeValue}"`)
+  } else {
+    updated = updated.replace('<svg', `<svg height="${sizeValue}"`)
+  }
+
+  return updated
+}
+
+const Icon = ({
+  name,
+  size = 16,
+  variant = 'stroke',
+  className = '',
+  style = {},
+  children
+}) => {
+  // If children are provided, render directly (for custom icons)
+  if (children) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        className={`inline-block ${className}`}
+        style={{
+          verticalAlign: 'middle',
+          ...style
+        }}
+      >
+        {children}
+      </svg>
+    )
+  }
+
+  const svgMarkup = resolveIcon(name, variant)
+
+  if (!svgMarkup) {
+    console.warn(`Icon "${name}" not found in icon set`)
+    return null
+  }
+
+  const dimension = normalizeSize(size)
+  const sizedMarkup = applySizeToMarkup(svgMarkup, dimension)
+
+  return (
+    <span
+      className={`inline-flex items-center justify-center ${className}`}
+      style={{
+        width: dimension,
+        height: dimension,
+        lineHeight: 0,
+        ...style
+      }}
+      dangerouslySetInnerHTML={{ __html: sizedMarkup }}
+    />
+  )
+}
+
+export default Icon

package/src/index.js

@@ -0,0 +1,452 @@
+/**
+ * Icons Index
+ *
+ * Export Icon component and icon registry.
+ * Usage: <Icon name="arrow-up" size={16} />
+ */
+
+export { default as Icon } from './Icon.jsx';
+
+/* Raw SVG entries — the glob done inside the package (relative to ./svg) so
+ * consumers (icon-gallery pages) can enumerate every icon without their own
+ * cross-package glob. Each entry: { id: 'folder/name', name, folder, svg }. */
+const svgModules = import.meta.glob('./svg/**/*.svg', { eager: true, query: '?raw', import: 'default' })
+export const SVG_ENTRIES = Object.entries(svgModules).map(([path, svg]) => {
+  const parts = path.split('/')
+  const folder = parts[parts.length - 2]
+  const name = (parts[parts.length - 1] || '').replace(/\.svg$/, '')
+  return { id: `${folder}/${name}`, name, folder, svg }
+})
+
+// Icon Registry - Complete list of all 341 icons
+export const ICONS = {
+  // Rack (113)
+  rack: [
+    'ascii-back',
+    'ascii-block',
+    'ascii-dash',
+    'ascii-dot',
+    'ascii-equal',
+    'ascii-hash',
+    'ascii-pipe',
+    'ascii-plus',
+    'ascii-slash',
+    'ascii-x',
+    'cable-lock',
+    'cable-off',
+    'cable-on',
+    'cable-trans',
+    'cable-unlock',
+    'cap-butt',
+    'cap-round',
+    'cap-square',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clr-anl',
+    'clr-comp',
+    'clr-mono',
+    'clr-tri',
+    'curve-exp',
+    'curve-log',
+    'dith-cross',
+    'dith-crt',
+    'dith-diamond',
+    'dith-flow',
+    'dith-flower',
+    'dith-gear',
+    'dith-glitch',
+    'dith-grid',
+    'dith-hex',
+    'dith-htone',
+    'dith-melt',
+    'dith-radial',
+    'dith-xhatch',
+    'filter-bp',
+    'filter-hp',
+    'filter-lp',
+    'filter-notch',
+    'gen-color',
+    'gen-gradient',
+    'gen-pattern',
+    'gen-wave',
+    'grad-con',
+    'grad-lin',
+    'grad-rad',
+    'line-circle',
+    'line-grid',
+    'line-line',
+    'line-lissa',
+    'line-spiral',
+    'logic-and',
+    'logic-nand',
+    'logic-nor',
+    'logic-not',
+    'logic-or',
+    'logic-xor',
+    'nav-create',
+    'nav-home',
+    'nav-library',
+    'nav-rack',
+    'nav-settings',
+    'ptrn-checker',
+    'ptrn-dot',
+    'ptrn-stripe',
+    'radial-circle',
+    'radial-default',
+    'radial-hex',
+    'radial-random',
+    'radial-rect',
+    'radial-star',
+    'radial-triangle',
+    'ramp-down',
+    'ramp-tri',
+    'ramp-up',
+    'seq-a',
+    'seq-b',
+    'seq-c',
+    'seq-d',
+    'shape-cube',
+    'shape-cyl',
+    'shape-ico',
+    'shape-octa',
+    'shape-sphere',
+    'shape-tetra',
+    'shape-torus',
+    'shaper-clip',
+    'shaper-exp',
+    'shaper-fold',
+    'shaper-log',
+    'shaper-scurve',
+    'shaper-sine',
+    'shaper-step',
+    'shaper-wrap',
+    'tr-carets',
+    'tr-fwd',
+    'tr-inf',
+    'tr-left',
+    'tr-pause',
+    'tr-rew',
+    'tr-right',
+    'tr-skip',
+    'wave-rnd',
+    'wave-saw',
+    'wave-sin',
+    'wave-sqr',
+    'wave-tri',
+  ],
+
+  // Navigation (21)
+  navigation: [
+    'arrow-cross',
+    'arrow-down',
+    'arrow-downright',
+    'arrow-expand',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'caret-down',
+    'caret-left',
+    'caret-right',
+    'caret-up',
+    'chevron-down',
+    'chevron-right',
+    'chevron-up',
+    'control-arrow-back',
+    'control-arrow-end',
+    'control-arrow-forward',
+    'control-arrow-start',
+    'external-link',
+    'menu',
+    'x',
+  ],
+
+  // Actions & Controls (28)
+  actions: [
+    'check',
+    'copy',
+    'cross',
+    'download',
+    'edit',
+    'filter',
+    'maximize',
+    'minimize',
+    'minus',
+    'move',
+    'plus',
+    'redo',
+    'refresh',
+    'rotate',
+    'rotate-left',
+    'rotate-right',
+    'save',
+    'search',
+    'search-line',
+    'settings-01',
+    'settings-02',
+    'share',
+    'snap',
+    'trash',
+    'undo',
+    'upload',
+    'zoom-in',
+    'zoom-out',
+  ],
+
+  // Files & Documents (16)
+  files: [
+    'add-file',
+    'attachment',
+    'book-open',
+    'bookmark',
+    'clipboard-1',
+    'clipboard-2',
+    'file',
+    'file-image',
+    'file-text',
+    'file-video',
+    'folder-01',
+    'folder-02',
+    'folder-open',
+    'journal',
+    'manual-empty',
+    'page',
+  ],
+
+  // Communication (9)
+  communication: [
+    'alarm-bell',
+    'dual-opponent',
+    'in-going',
+    'interactive',
+    'mail',
+    'message-circle',
+    'message-square',
+    'phone',
+    'send',
+  ],
+
+  // User & Authentication (16)
+  user: [
+    'flag',
+    'heart-1',
+    'heart-2',
+    'key',
+    'lock',
+    'log-in',
+    'log-out',
+    'shield',
+    'social-facebook',
+    'social-linkedin',
+    'social-twitter',
+    'star',
+    'unlock',
+    'user',
+    'user-plus',
+    'users',
+  ],
+
+  // Status & Feedback (9)
+  status: [
+    'alert-circle',
+    'alert-triangle',
+    'check-circle',
+    'eye-off',
+    'eye-on',
+    'help-circle',
+    'info',
+    'loader',
+    'x-circle',
+  ],
+
+  // Media (22)
+  media: [
+    'camera',
+    'camera-off',
+    'control-pause',
+    'control-play',
+    'control-stop',
+    'fast-forward',
+    'image',
+    'mic',
+    'mic-off',
+    'repeat',
+    'repeat-1',
+    'rewind',
+    'shuffle',
+    'skip-back',
+    'skip-forward',
+    'stop',
+    'video',
+    'video-off',
+    'volume',
+    'volume-1',
+    'volume-2',
+    'volume-x',
+  ],
+
+  // Time & Calendar (9)
+  time: [
+    'calendar',
+    'calendar-check',
+    'calendar-days',
+    'clock',
+    'clock-alert',
+    'clock-rotate-left',
+    'history',
+    'stopwatch',
+    'timer',
+  ],
+
+  // Layout & UI (21)
+  layout: [
+    'columns',
+    'component',
+    'grid-01',
+    'grid-02',
+    'grid-03',
+    'grid-04',
+    'grid-05',
+    'grid-06',
+    'layers',
+    'layout',
+    'layout-01',
+    'layout-02',
+    'layout-03',
+    'list-01',
+    'list-02',
+    'more-horizontal',
+    'more-vertical',
+    'panel-left',
+    'panel-right',
+    'row',
+    'sidebar',
+  ],
+
+  // Editing & Content (18)
+  editing: [
+    'align-center',
+    'align-left',
+    'align-right',
+    'bold',
+    'brush',
+    'color',
+    'flip-y',
+    'italic',
+    'list-ordered',
+    'list-unordered',
+    'pen',
+    'pencil',
+    'text-01',
+    'text-02',
+    'type-01',
+    'type-02',
+    'type-03',
+    'underline',
+  ],
+
+  // System & Tools (15)
+  system: [
+    'atomic-atom',
+    'atomic-lifeform',
+    'atomic-molecule',
+    'atomic-organism',
+    'battery',
+    'code',
+    'database',
+    'frequency',
+    'library',
+    'power',
+    'roadmap',
+    'server',
+    'terminal',
+    'wifi',
+    'wifi-off',
+  ],
+
+  // Theme & Display (5)
+  theme: [
+    'contrast',
+    'monitor',
+    'moon',
+    'sun',
+    'theme-toggle',
+  ],
+
+  // E-commerce & Shopping (8)
+  ecommerce: [
+    'credit-card',
+    'dollar-sign',
+    'gift',
+    'package',
+    'receipt',
+    'shopping-bag',
+    'shopping-cart',
+    'tag',
+  ],
+
+  // Stats & Data Visualization (15)
+  stats: [
+    'stat-abacus',
+    'stat-chart-a',
+    'stat-chart-b',
+    'stat-chart-c',
+    'stat-crown',
+    'stat-cycle',
+    'stat-donut',
+    'stat-medalion',
+    'stat-pie',
+    'stat-pie-c',
+    'stat-rocket',
+    'stat-stat',
+    'stat-winner',
+    'trending-down',
+    'trending-up',
+  ],
+
+  // Shapes & Geometric (6)
+  shapes: [
+    'circle',
+    'cone',
+    'diamond',
+    'triangle',
+    'wave',
+    'wheel',
+  ],
+
+  // Miscellaneous (10)
+  misc: [
+    'align-auto',
+    'bolt',
+    'bucket',
+    'foundation',
+    'home-1',
+    'home-2',
+    'instance',
+    'location',
+    'pills',
+    'rabbit',
+  ],
+
+  // Brand iconography (1)
+  kolkrabbi: [
+    'signature-thick',
+  ],
+};
+
+// Flat array of all icon names
+export const ALL_ICONS = Object.values(ICONS).flat();
+
+// Helper to check if an icon exists
+export const hasIcon = (name) => ALL_ICONS.includes(name);
+
+// Get category for an icon
+export const getCategory = (name) => {
+  for (const [category, icons] of Object.entries(ICONS)) {
+    if (icons.includes(name)) {
+      return category;
+    }
+  }
+  return null;
+};

package/src/solid/actions/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M20.5 6.5 L9.5 17.5 L3.5 11.5 L5 10 L9.5 14.5 L19 5 Z" /></svg>

package/src/solid/actions/clipboard-check.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="ko-actions-clipboard-check" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="white"/><rect x="9" y="3" width="6" height="3" rx="0.5" fill="black" stroke="black" /><path d="M9 13 L11 15 L15 11" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round" /></mask><g mask="url(#ko-actions-clipboard-check)" fill="currentColor"><rect x="6" y="4" width="12" height="17" rx="1" /></g></svg>

package/src/solid/actions/cloud-upload.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="ko-actions-cloud-upload" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="white"/><path d="M9 14 L12 11 L15 14 M12 11 V18" stroke="black" stroke-width="1.5" fill="none" /></mask><g mask="url(#ko-actions-cloud-upload)" fill="currentColor"><path d="M7 18 H17 C19.2 18 21 16.2 21 14 C21 12.1 19.7 10.6 18 10.1 C18 9.4 17.7 8.7 17.3 8.1 C16.5 7 15.3 6.3 14 6.1 C13.6 4.9 12.4 4 11 4 C9.3 4 8 5.3 8 7 C8 7.3 8 7.6 8.1 7.9 C5.7 8.2 4 10.3 4 12.7 C4 15.4 6.1 18 7 18 Z" /></g></svg>

package/src/solid/actions/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><rect x="8" y="3" width="13" height="13" rx="2" /><path d="M3 8 V20 a1 1 0 0 0 1 1 H16 V18 H6 V8 Z" /></svg>

package/src/solid/actions/cross-alt.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="ko-actions-cross-alt" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="white"/><path d="M9 9 L15 15 M15 9 L9 15" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" /></mask><g mask="url(#ko-actions-cross-alt)" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3" /></g></svg>

package/src/solid/actions/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M6.5 5 L12 10.5 L17.5 5 L19 6.5 L13.5 12 L19 17.5 L17.5 19 L12 13.5 L6.5 19 L5 17.5 L10.5 12 L5 6.5 Z" /></svg>

package/src/solid/actions/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M11 3 H13 V12 H17 L12 17.5 L7 12 H11 Z" /><rect x="4" y="19" width="16" height="2" rx="1" /></svg>

package/src/solid/actions/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M14.5 4.5 L19.5 9.5 L8 21 H3 V16 Z M16 3 L21 8" /></svg>

package/src/solid/actions/enter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M14 4 H20 V20 H14 V18 H17 a1 1 0 0 0 1 -1 V7 a1 1 0 0 0 -1 -1 H14 Z" /><path d="M3 11 H10.3 L7.7 8.4 L9.1 7 L13.4 11.3 a1 1 0 0 1 0 1.4 L9.1 17 L7.7 15.6 L10.3 13 H3 Z" /></svg>

package/src/solid/actions/exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M4 4 H10 V6 H7 a1 1 0 0 0 -1 1 V17 a1 1 0 0 0 1 1 H10 V20 H4 Z" /><path d="M10.3 11 H17.6 L15 8.4 L16.4 7 L20.7 11.3 a1 1 0 0 1 0 1.4 L16.4 17 L15 15.6 L17.6 13 H10.3 Z" /></svg>

package/src/solid/actions/filter-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 5 H21 L14 13 V20 L10 18 V13 Z" /></svg>

package/src/solid/actions/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 4 H21 L14 13 V21 L10 19 V13 Z" /></svg>

package/src/solid/actions/maximize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 3 H10 V5 H5 V10 H3 Z" /><path d="M14 3 H21 V10 H19 V5 H14 Z" /><path d="M3 14 H5 V19 H10 V21 H3 Z" /><path d="M19 14 H21 V21 H14 V19 H19 Z" /></svg>

package/src/solid/actions/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 8 H8 V3 H10 V10 H3 Z" /><path d="M14 3 H16 V8 H21 V10 H14 Z" /><path d="M3 14 H10 V21 H8 V16 H3 Z" /><path d="M14 14 H21 V16 H16 V21 H14 Z" /></svg>

package/src/solid/actions/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><rect x="4" y="11" width="16" height="2" rx="1" /></svg>

package/src/solid/actions/move.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M11 3 L13 3 V7 V11 H17 V8 L21 12 L17 16 V13 H13 V17 V21 H11 V17 V13 H7 V16 L3 12 L7 8 V11 H11 V7 Z" /></svg>