@kolkrabbi/kol-icons 0.4.0

package/README.md

@@ -0,0 +1,41 @@
+# @kolkrabbi/kol-icons
+
+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-icons   # react / react-dom are peers
+```
+
+## Use
+
+```jsx
+import { Icon, ICONS, ALL_ICONS, hasIcon } from '@kolkrabbi/kol-icons'
+
+<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.
+
+## Bring your own icons
+
+Register an app-local SVG folder so `<Icon name>` resolves icons that never ship in the package — each repo carries only what it needs, and the shared set stays small.
+
+```js
+import { registerIcons } from '@kolkrabbi/kol-icons'
+
+// once, at app boot. Runs in YOUR source: import.meta.glob is compile-time + path-relative.
+registerIcons(import.meta.glob('./icons/**/*.svg', { eager: true, query: '?raw', import: 'default' }))
+```
+
+```jsx
+<Icon name="my-app-icon" size={16} />   // resolved from your folder
+```
+
+Registered icons are keyed by filename (basename), win over the packaged set (add **or** override), and resolve synchronously. Author them with `currentColor` so they theme.

package/bin/kol-icons.mjs

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+/**
+ * kol-icons CLI — `npx kol-icons audit`
+ *
+ * Scans the current repo's `<Icon name>` / `iconLeft` / `icon:` usage and classifies
+ * each name against the shipped sets: in kol-icon-set-v1 (curated ✓), legacy-only
+ * (breaks when legacy is dropped — migrate or registerIcons), or not-in-package
+ * (a locally-registered icon, or a typo). Dependency-free.
+ */
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, dirname, extname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+if (process.argv[2] !== 'audit') {
+  console.log('kol-icons — usage:\n  npx kol-icons audit    scan this repo for icon usage vs kol-icon-set-v1\n')
+  process.exit(0)
+}
+
+const PKG = join(dirname(fileURLToPath(import.meta.url)), '..') // packages/icons (or the installed pkg)
+
+// icon names shipped by the package, per set
+const svgNames = (rel) => {
+  const out = new Set()
+  const walk = (d) => {
+    let ents
+    try { ents = readdirSync(d, { withFileTypes: true }) } catch { return }
+    for (const e of ents) {
+      if (e.isDirectory()) walk(join(d, e.name))
+      else if (e.name.endsWith('.svg')) out.add(e.name.replace(/\.svg$/, ''))
+    }
+  }
+  walk(join(PKG, 'src', rel))
+  return out
+}
+const v1 = svgNames('kol-icon-set-v1')
+const legacy = new Set([...svgNames('stroke'), ...svgNames('solid'), ...svgNames('svg'), ...svgNames('svg-web')])
+
+// scan the consumer repo (cwd) for icon usage
+const SKIP = new Set(['node_modules', 'dist', 'build', 'out', 'coverage', '.git', '.next'])
+const CODE = new Set(['.js', '.jsx', '.ts', '.tsx', '.mjs'])
+const PATTERNS = [
+  /<Icon\b[^>]*\bname=["']([^"']+)["']/g,
+  /\bicon(?:Left|Right)?=["']([^"']+)["']/g,
+  /\bicon:\s*["']([^"']+)["']/g,
+]
+const usage = new Map()
+const scan = (d) => {
+  let ents
+  try { ents = readdirSync(d, { withFileTypes: true }) } catch { return }
+  for (const e of ents) {
+    if (e.name.startsWith('.') || SKIP.has(e.name)) continue
+    const p = join(d, e.name)
+    if (e.isDirectory()) { scan(p); continue }
+    if (!CODE.has(extname(e.name))) continue
+    let txt
+    try { txt = readFileSync(p, 'utf8') } catch { continue }
+    for (const re of PATTERNS) {
+      re.lastIndex = 0
+      let m
+      while ((m = re.exec(txt))) usage.set(m[1], (usage.get(m[1]) || 0) + 1)
+    }
+  }
+}
+const cwd = process.cwd()
+scan(cwd)
+
+// classify
+const inV1 = [], legacyOnly = [], unknown = []
+for (const entry of [...usage].sort((a, b) => b[1] - a[1])) {
+  const name = entry[0]
+  if (v1.has(name)) inV1.push(entry)
+  else if (legacy.has(name)) legacyOnly.push(entry)
+  else unknown.push(entry)
+}
+const uses = (list) => list.reduce((s, [, c]) => s + c, 0)
+const print = (list) => list.forEach(([n, c]) => console.log(`    ${n.padEnd(26)} ${c}×`))
+
+console.log(`\nkol-icons audit — ${cwd}`)
+console.log(`  package: ${v1.size} v1 names · ${legacy.size} legacy names\n`)
+console.log(`  in v1 ✓          ${String(inV1.length).padStart(3)} distinct  (${uses(inV1)} uses)`)
+console.log(`  legacy-only ⚠    ${String(legacyOnly.length).padStart(3)} distinct  (${uses(legacyOnly)} uses) — break when legacy is dropped`)
+console.log(`  not in package   ${String(unknown.length).padStart(3)} distinct  (${uses(unknown)} uses) — locally registered, or typos\n`)
+
+if (legacyOnly.length) { console.log('  LEGACY-ONLY (migrate to a v1 name, or registerIcons locally):'); print(legacyOnly); console.log('') }
+if (unknown.length) { console.log('  NOT IN PACKAGE (registered locally, or check for typos):'); print(unknown); console.log('') }
+
+console.log(legacyOnly.length === 0
+  ? '  → slim-ready ✓ — no legacy-only icons in this repo\n'
+  : `  → ${legacyOnly.length} legacy-only icon(s) to resolve before this repo is slim-ready\n`)

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@kolkrabbi/kol-icons",
+  "version": "0.4.0",
+  "description": "KOL icons — <Icon/>, the curated kol-icon-set-v1 + registerIcons (bring-your-own), and the legacy inventory. Vite-only (import.meta.glob).",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "bin": {
+    "kol-icons": "./bin/kol-icons.mjs"
+  },
+  "files": [
+    "src",
+    "bin",
+    "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/Tor-Grimsson/kol-ds.git",
+    "directory": "packages/icons"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Icon.jsx

@@ -0,0 +1,194 @@
+/**
+ * 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
+ */
+import { useEffect, useState } from 'react'
+
+/* 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.
+ *
+ * The raw SVG strings live in ./iconData.js and are pulled in via a single
+ * dynamic import — that keeps them out of the entry chunk (off the critical first-
+ * paint path) and streams them in their own async chunk. Once loaded the maps are
+ * cached at module scope, so resolution stays synchronous for every render after. */
+let ICONS = null            // { STROKE, SOLID, WEB, LEGACY } once the chunk resolves
+let loadPromise = null
+const subscribers = new Set()
+
+const loadIcons = () => {
+  if (!loadPromise) {
+    loadPromise = import('./iconData.js').then((mod) => {
+      ICONS = mod
+      subscribers.forEach((fn) => fn())
+      return mod
+    })
+  }
+  return loadPromise
+}
+
+// Start fetching the icon chunk the moment this module evaluates, in parallel with
+// the rest of boot — by first paint it's usually already in flight or resolved.
+loadIcons()
+
+const useIconsReady = () => {
+  const [ready, setReady] = useState(() => !!ICONS)
+  useEffect(() => {
+    if (ICONS) return undefined
+    const cb = () => setReady(true)
+    subscribers.add(cb)
+    loadIcons()
+    return () => subscribers.delete(cb)
+  }, [])
+  return ready
+}
+
+/* Consumer-registered icons — a repo brings its OWN svg folder and registers it,
+ * so <Icon name> resolves app-specific icons that never ship in the package. They
+ * win over the packaged set (a repo can also override a shared icon). Resolves
+ * synchronously, so custom icons render without waiting on the packaged chunk. */
+const CUSTOM = Object.create(null)
+
+/**
+ * Register a consumer's own SVGs with <Icon>. Call once at app boot with a Vite
+ * glob of your icon folder — `import.meta.glob` is a compile-time, path-relative
+ * macro, so it must run in YOUR source, not in this package:
+ *
+ *   import { registerIcons } from '@kolkrabbi/kol-icons'
+ *   registerIcons(import.meta.glob('./icons/**\/*.svg',
+ *     { eager: true, query: '?raw', import: 'default' }))
+ *
+ * Keys are the filename (basename, no extension). SVGs should use `currentColor`.
+ */
+export const registerIcons = (globMap) => {
+  for (const [path, svg] of Object.entries(globMap || {})) {
+    const name = (path.split('/').pop() || '').replace('.svg', '')
+    if (name && typeof svg === 'string') CUSTOM[name] = svg
+  }
+}
+
+/* Resolution order: consumer-registered → kol-icon-set-v1 (the curated set) →
+ * legacy stroke/solid/svg/svg-web. Falling through to the legacy set warns once:
+ * that name isn't in v1, so it's on borrowed time — register it locally or migrate
+ * to a v1 name before the legacy set is dropped (a future major). */
+const warnedLegacy = new Set()
+const resolveIcon = (name, variant) => {
+  if (CUSTOM[name]) return CUSTOM[name]
+  if (!ICONS) return undefined
+  if (ICONS.V1[name]) return ICONS.V1[name]
+  const legacy = (variant === 'solid' ? ICONS.SOLID : ICONS.STROKE)[name]
+    ?? (variant === 'solid' ? ICONS.STROKE : ICONS.SOLID)[name]
+    ?? ICONS.LEGACY[name]
+    ?? ICONS.WEB[name]
+  if (legacy && !warnedLegacy.has(name)) {
+    warnedLegacy.add(name)
+    console.warn(`[kol-icons] "${name}" resolved from the legacy set — not in kol-icon-set-v1. registerIcons() it locally or migrate to a v1 name; the legacy set is dropped in a future major.`)
+  }
+  return legacy
+}
+
+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
+}) => {
+  const ready = useIconsReady()
+
+  // 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 dimension = normalizeSize(size)
+
+  // Consumer-registered icons resolve synchronously; the packaged set needs its
+  // chunk. resolveIcon checks CUSTOM first, so custom icons paint on first render.
+  const svgMarkup = resolveIcon(name, variant)
+
+  if (!svgMarkup) {
+    // Not resolved yet. If the packaged chunk is still streaming, hold the layout
+    // box so the icon pops in without shifting. (Custom icons never reach here.)
+    if (!ready) {
+      return (
+        <span
+          aria-hidden="true"
+          className={`inline-flex items-center justify-center ${className}`}
+          style={{ width: dimension, height: dimension, lineHeight: 0, ...style }}
+        />
+      )
+    }
+    console.warn(`Icon "${name}" not found in icon set`)
+    return null
+  }
+
+  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/iconData.js

@@ -0,0 +1,30 @@
+/**
+ * iconData — the raw SVG maps behind <Icon>.
+ *
+ * ~2,000+ SVGs are eager-inlined here as raw strings, but this module is only
+ * ever reached via the dynamic `import()` in Icon.jsx — so the bundler splits
+ * all of it into its own async chunk instead of folding ~1.2 MB of SVG text
+ * into the consumer's entry chunk. (Ported from kol-labs-single's 2026-06-19
+ * entry-chunk fix: entry 509 kB → 204 kB gzip.)
+ */
+// kol-icon-set-v1 — the curated set; resolves FIRST (before the legacy trees below).
+const v1Modules     = import.meta.glob('./kol-icon-set-v1/**/*.svg', { eager: true, query: '?raw', import: 'default' })
+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
+}
+
+export const V1     = byName(v1Modules)
+export const STROKE = byName(strokeModules)
+export const SOLID  = byName(solidModules)
+export const WEB    = byName(webModules)
+export const LEGACY = (() => { const c = byName(legacyModules); Object.assign(c, byName(kolLegacy)); return c })()

package/src/index.js

@@ -0,0 +1,73 @@
+/**
+ * Icons Index
+ *
+ * Export Icon component and icon registry.
+ * Usage: <Icon name="arrow-up" size={16} />
+ */
+
+export { default as Icon, registerIcons } from './Icon.jsx';
+
+/* kol-icon-set-v1 — the curated set, grouped by folder (keys-only, no SVG
+ * content): `{ group: names[] }`. KOL_ICON_SET_V1_NAMES is the flat sorted list
+ * (used by consumers/audits to tell curated names from legacy ones). */
+export const KOL_ICON_SET_V1 = (() => {
+  const idx = {}
+  for (const p of Object.keys(import.meta.glob('./kol-icon-set-v1/**/*.svg'))) {
+    const parts = p.split('/')
+    const name = (parts.pop() || '').replace('.svg', '')
+    const group = parts.pop() || 'misc'
+    ;(idx[group] ||= []).push(name)
+  }
+  for (const g of Object.values(idx)) g.sort()
+  return idx
+})()
+
+export const KOL_ICON_SET_V1_NAMES = Object.values(KOL_ICON_SET_V1).flat().sort()
+
+/* Real, complete inventory — derived from the canonical stroke set on disk
+ * (880 files / 862 unique across 21 folders). ICONS is now an alias of this
+ * (was a hand-maintained 341-name list that drifted). Keys-only glob: paths
+ * resolve at build time without loading any SVG content. */
+export const ICON_ENTRIES = Object.keys(import.meta.glob('./stroke/**/*.svg'))
+  .map((p) => {
+    const parts = p.split('/')
+    const name = (parts.pop() || '').replace('.svg', '')
+    const folder = parts.pop() || 'misc'
+    return { name, folder }
+  })
+  .sort((a, b) => a.folder.localeCompare(b.folder) || a.name.localeCompare(b.name))
+
+/* Solid-cut inventory (keys-only, no SVG content) — lets gallery pages diff
+ * the two cuts (mirror gaps: stroke-only / solid-only) without loading bytes. */
+export const SOLID_ICON_ENTRIES = Object.keys(import.meta.glob('./solid/**/*.svg'))
+  .map((p) => {
+    const parts = p.split('/')
+    const name = (parts.pop() || '').replace('.svg', '')
+    const folder = parts.pop() || 'misc'
+    return { name, folder }
+  })
+  .sort((a, b) => a.folder.localeCompare(b.folder) || a.name.localeCompare(b.name))
+
+export const ICON_INDEX = ICON_ENTRIES.reduce((map, e) => {
+  ;(map[e.folder] ||= []).push(e.name)
+  return map
+}, {})
+
+/* ICONS — canonical grouped registry, now DERIVED from the on-disk stroke set
+ * via ICON_INDEX (was a hand-maintained 341-name list that drifted). */
+export const ICONS = ICON_INDEX;
+// 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/kol-icon-set-v1/add-remove/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12L10 17L20 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/add-remove/minus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/add-remove/plus.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5V19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/add-remove/x.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/arrow/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 13L12 20L19 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/arrow/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 5L4 12L11 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/arrow/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 5L20 12L13 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/arrow/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 11L12 4L19 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-atom.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13.92C13.0604 13.92 13.92 13.0604 13.92 12C13.92 10.9396 13.0604 10.08 12 10.08C10.9396 10.08 10.08 10.9396 10.08 12C10.08 13.0604 10.9396 13.92 12 13.92Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15.84C17.6333 15.84 22.2 14.1207 22.2 12C22.2 9.8792 17.6333 8.15997 12 8.15997C6.36668 8.15997 1.79999 9.8792 1.79999 12C1.79999 14.1207 6.36668 15.84 12 15.84Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.67445 13.92C11.4911 18.7986 15.2633 21.8938 17.1 20.8334C18.9366 19.7731 18.1422 14.9586 15.3255 10.08C12.5089 5.20139 8.73663 2.10613 6.89999 3.16652C5.06334 4.22691 5.8578 9.04139 8.67445 13.92Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3255 13.92C18.1422 9.04141 18.9366 4.22692 17.1 3.16653C15.2634 2.10615 11.4911 5.20141 8.67446 10.08C5.85781 14.9586 5.06336 19.7731 6.9 20.8335C8.73664 21.8938 12.5089 18.7986 15.3255 13.92Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-atomic-01.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8696 12.208C17.1362 12.208 18.9736 10.3706 18.9736 8.104C18.9736 5.83743 17.1362 4 14.8696 4C12.6031 4 10.7656 5.83743 10.7656 8.104C10.7656 10.3706 12.6031 12.208 14.8696 12.208Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M7.48743 17.9524C8.84826 17.9524 9.95144 16.8492 9.95144 15.4884C9.95144 14.1276 8.84826 13.0244 7.48743 13.0244C6.1266 13.0244 5.02344 14.1276 5.02344 15.4884C5.02344 16.8492 6.1266 17.9524 7.48743 17.9524Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M15.6964 20.0003C16.8275 20.0003 17.7444 19.0834 17.7444 17.9523C17.7444 16.8212 16.8275 15.9043 15.6964 15.9043C14.5654 15.9043 13.6484 16.8212 13.6484 17.9523C13.6484 19.0834 14.5654 20.0003 15.6964 20.0003Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-atomic-02.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9.32C13.19 9.32 14.16 8.35 14.16 7.16C14.16 5.97 13.19 5 12 5C10.81 5 9.84 5.97 9.84 7.16C9.84 8.35 10.81 9.32 12 9.32Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.78891 18.9997C7.97891 18.9997 8.94891 18.0297 8.94891 16.8397C8.94891 15.6497 7.97891 14.6797 6.78891 14.6797C5.59891 14.6797 4.62891 15.6497 4.62891 16.8397C4.62891 18.0297 5.58891 18.9997 6.78891 18.9997Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.2108 18.9997C18.4008 18.9997 19.3708 18.0297 19.3708 16.8397C19.3708 15.6497 18.4008 14.6797 17.2108 14.6797C16.0208 14.6797 15.0508 15.6497 15.0508 16.8397C15.0508 18.0297 16.0208 18.9997 17.2108 18.9997Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-molecule-01.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22.0007C17.5228 22.0007 22 17.5236 22 12.0007C22 6.47789 17.5228 2.00073 12 2.00073C6.47715 2.00073 2 6.47789 2 12.0007C2 17.5236 6.47715 22.0007 12 22.0007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.6 10.2007C8.48366 10.2007 9.2 9.48439 9.2 8.60073C9.2 7.71708 8.48366 7.00073 7.6 7.00073C6.71634 7.00073 6 7.71708 6 8.60073C6 9.48439 6.71634 10.2007 7.6 10.2007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6 11.6007C16.7046 11.6007 17.6 10.7053 17.6 9.60071C17.6 8.49614 16.7046 7.60071 15.6 7.60071C14.4954 7.60071 13.6 8.49614 13.6 9.60071C13.6 10.7053 14.4954 11.6007 15.6 11.6007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6 17.6007C11.7046 17.6007 12.6 16.7053 12.6 15.6007C12.6 14.4961 11.7046 13.6007 10.6 13.6007C9.49544 13.6007 8.60001 14.4961 8.60001 15.6007C8.60001 16.7053 9.49544 17.6007 10.6 17.6007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1 16.3007C16.7628 16.3007 17.3 15.7634 17.3 15.1007C17.3 14.438 16.7628 13.9007 16.1 13.9007C15.4373 13.9007 14.9 14.438 14.9 15.1007C14.9 15.7634 15.4373 16.3007 16.1 16.3007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-molecule-02.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.96641 13.4496L15.5232 17.2704M15.5136 6.72962L8.96641 10.5504M20.88 5.28002C20.88 6.8706 19.5906 8.16002 18 8.16002C16.4094 8.16002 15.12 6.8706 15.12 5.28002C15.12 3.68944 16.4094 2.40002 18 2.40002C19.5906 2.40002 20.88 3.68944 20.88 5.28002ZM9.36001 12C9.36001 13.5906 8.07059 14.88 6.48001 14.88C4.88943 14.88 3.60001 13.5906 3.60001 12C3.60001 10.4094 4.88943 9.12002 6.48001 9.12002C8.07059 9.12002 9.36001 10.4094 9.36001 12ZM20.88 18.72C20.88 20.3106 19.5906 21.6 18 21.6C16.4094 21.6 15.12 20.3106 15.12 18.72C15.12 17.1294 16.4094 15.84 18 15.84C19.5906 15.84 20.88 17.1294 20.88 18.72Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-molecule-03.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 8C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12C10.8954 12 10 12.8954 10 14C10 15.1046 10.8954 16 12 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 22C7.10457 22 8 21.1046 8 20C8 18.8954 7.10457 18 6 18C4.89543 18 4 18.8954 4 20C4 21.1046 4.89543 22 6 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 6H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 8L11 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 8L13 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 15.5L7 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-organism-01.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0013 5.69989C21.0013 6.56196 20.594 7.3293 19.9687 7.82191C19.514 8.18189 18.9362 8.39978 18.3014 8.39978C16.8047 8.39978 15.6016 7.19667 15.6016 5.69989C15.6016 5.06518 15.8194 4.49678 16.1794 4.03259H16.1889C16.672 3.40735 17.4394 3 18.3014 3C19.7982 3 21.0013 4.20311 21.0013 5.69989Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.39978 5.69989C8.39978 7.19667 7.19667 8.39978 5.69989 8.39978C5.06518 8.39978 4.49678 8.18189 4.03259 7.82191C3.40735 7.3293 3 6.56196 3 5.69989C3 4.20311 4.20311 3 5.69989 3C6.56196 3 7.3293 3.40735 7.82191 4.03259C8.18189 4.49678 8.39978 5.06518 8.39978 5.69989Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0013 18.2995C21.0013 19.7963 19.7982 20.9994 18.3014 20.9994C17.4394 20.9994 16.672 20.592 16.1889 19.9668H16.1794C15.8194 19.5121 15.6016 18.9342 15.6016 18.2995C15.6016 16.8027 16.8047 15.5996 18.3014 15.5996C18.9362 15.5996 19.5046 15.8175 19.9687 16.1775V16.187C20.594 16.6701 21.0013 17.4374 21.0013 18.2995Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.39978 18.2995C8.39978 18.9342 8.18189 19.5026 7.82191 19.9668C7.3293 20.6015 6.56196 20.9994 5.69989 20.9994C4.20311 20.9994 3 19.7963 3 18.2995C3 17.4374 3.40735 16.6701 4.03259 16.187V16.1775C4.48731 15.8175 5.06518 15.5996 5.69989 15.5996C7.19667 15.5996 8.39978 16.8027 8.39978 18.2995Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9667 16.1773C20.6298 14.9269 20.9993 13.5154 20.9993 11.9996C20.9993 10.4934 20.6298 9.07238 19.9667 7.82191M16.1774 19.9667C14.9269 20.6298 13.5154 20.9993 11.9996 20.9993C10.4934 20.9993 9.07238 20.6298 7.82191 19.9667M4.03259 16.1773C3.36946 14.9269 3 13.5154 3 11.9996C3 10.4934 3.36946 9.07238 4.03259 7.82191M7.82191 4.03259C9.07238 3.36946 10.4934 3 11.9996 3C13.5154 3 14.9269 3.36946 16.1774 4.03259" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-organism-02.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1969 7.4548V16.5448C19.0529 16.5178 18.8999 16.4998 18.7469 16.4998C17.5049 16.4998 16.4969 17.5078 16.4969 18.7498C16.4969 18.9028 16.5149 19.0558 16.5419 19.1998H7.45187C7.47887 19.0558 7.49687 18.9028 7.49687 18.7498C7.49687 17.5078 6.48887 16.4998 5.24687 16.4998C5.09387 16.4998 4.94087 16.5178 4.79688 16.5448V7.4548C4.94087 7.4818 5.09387 7.4998 5.24687 7.4998C6.48887 7.4998 7.49687 6.4918 7.49687 5.2498C7.49687 5.0968 7.47887 4.9438 7.45187 4.7998H16.5419C16.5149 4.9438 16.4969 5.0968 16.4969 5.2498C16.4969 6.4918 17.5049 7.4998 18.7469 7.4998C18.8999 7.4998 19.0529 7.4818 19.1969 7.4548Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 5.25C7.5 6.492 6.492 7.5 5.25 7.5C5.097 7.5 4.944 7.482 4.8 7.455C3.774 7.248 3 6.339 3 5.25C3 4.008 4.008 3 5.25 3C6.339 3 7.248 3.774 7.455 4.8C7.482 4.944 7.5 5.097 7.5 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 5.25C21 6.339 20.226 7.248 19.2 7.455C19.056 7.482 18.903 7.5 18.75 7.5C17.508 7.5 16.5 6.492 16.5 5.25C16.5 5.097 16.518 4.944 16.545 4.8C16.752 3.774 17.661 3 18.75 3C19.992 3 21 4.008 21 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 18.75C7.5 18.903 7.482 19.056 7.455 19.2C7.248 20.226 6.339 21 5.25 21C4.008 21 3 19.992 3 18.75C3 17.661 3.774 16.752 4.8 16.545C4.944 16.518 5.097 16.5 5.25 16.5C6.492 16.5 7.5 17.508 7.5 18.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 18.75C21 19.992 19.992 21 18.75 21C17.661 21 16.752 20.226 16.545 19.2C16.518 19.056 16.5 18.903 16.5 18.75C16.5 17.508 17.508 16.5 18.75 16.5C18.903 16.5 19.056 16.518 19.2 16.545C20.226 16.752 21 17.661 21 18.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-organism-03.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7.5C13.2426 7.5 14.25 6.49264 14.25 5.25C14.25 4.00736 13.2426 3 12 3C10.7574 3 9.75 4.00736 9.75 5.25C9.75 6.49264 10.7574 7.5 12 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 19.3125C6.49264 19.3125 7.5 18.3051 7.5 17.0625C7.5 15.8199 6.49264 14.8125 5.25 14.8125C4.00736 14.8125 3 15.8199 3 17.0625C3 18.3051 4.00736 19.3125 5.25 19.3125Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.75 19.3125C19.9926 19.3125 21 18.3051 21 17.0625C21 15.8199 19.9926 14.8125 18.75 14.8125C17.5074 14.8125 16.5 15.8199 16.5 17.0625C16.5 18.3051 17.5074 19.3125 18.75 19.3125Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.125 13.125C4.125 11.7426 4.48887 10.3847 5.18005 9.1875C5.87123 7.99035 6.86535 6.99622 8.0625 6.30505" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9375 6.30505C17.1346 6.99622 18.1288 7.99035 18.8199 9.1875C19.5111 10.3846 19.875 11.7426 19.875 13.125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9375 19.9449C14.7403 20.6361 13.3824 21 12 21C10.6176 21 9.25965 20.6361 8.0625 19.9449" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/atomic/atomic-organism-04.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0795 3.11133H16.8471C16.4009 3.11133 16.0391 3.47312 16.0391 3.91941V7.15173C16.0391 7.59802 16.4009 7.95981 16.8471 7.95981H20.0795C20.5258 7.95981 20.8875 7.59802 20.8875 7.15173V3.91941C20.8875 3.47312 20.5258 3.11133 20.0795 3.11133Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.14978 3.11133H3.91746C3.47117 3.11133 3.10938 3.47312 3.10938 3.91941V7.15173C3.10938 7.59802 3.47117 7.95981 3.91746 7.95981H7.14978C7.59607 7.95981 7.95786 7.59802 7.95786 7.15173V3.91941C7.95786 3.47312 7.59607 3.11133 7.14978 3.11133Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.0795 16.041H16.8471C16.4009 16.041 16.0391 16.4028 16.0391 16.8491V20.0814C16.0391 20.5277 16.4009 20.8895 16.8471 20.8895H20.0795C20.5258 20.8895 20.8875 20.5277 20.8875 20.0814V16.8491C20.8875 16.4028 20.5258 16.041 20.0795 16.041Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.14978 16.041H3.91746C3.47117 16.041 3.10938 16.4028 3.10938 16.8491V20.0814C3.10938 20.5277 3.47117 20.8895 3.91746 20.8895H7.14978C7.59607 20.8895 7.95786 20.5277 7.95786 20.0814V16.8491C7.95786 16.4028 7.59607 16.041 7.14978 16.041Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.53516 16.0408V7.95996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.0378 18.4648H7.95703" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4648 7.95996V16.0408" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.95703 5.53613H16.0378" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/kol-icon-set-v1/caret/caret-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6198 16.57C11.819 16.7976 12.1732 16.7976 12.3724 16.57L18.2705 9.82925C18.5534 9.50596 18.3238 9 17.8942 9H6.09798C5.6684 9 5.43881 9.50596 5.72169 9.82925L11.6198 16.57Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/src/kol-icon-set-v1/caret/caret-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1707 18.2744C14.494 18.5573 15 18.3277 15 17.8981V6.10188C15 5.6723 14.494 5.44272 14.1707 5.7256L7.43004 11.6237C7.20238 11.8229 7.20238 12.1771 7.43004 12.3763L14.1707 18.2744Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/src/kol-icon-set-v1/caret/caret-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 17.8981C9 18.3277 9.50596 18.5573 9.82925 18.2744L16.57 12.3763C16.7976 12.1771 16.7976 11.8229 16.57 11.6237L9.82925 5.72559C9.50596 5.44271 9 5.6723 9 6.10188V17.8981Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
+</svg>