runeforge 0.0.56 → 0.0.57

package/README.md

@@ -1011,7 +1011,7 @@ Individual form primitives styled with DaisyUI:
 - `Avatar` — user avatar display
 - `Modal` — DaisyUI modal wrapper. Size it with Tailwind utility classes via `class` (e.g. `class="max-w-4xl"`), or with explicit `width`/`maxWidth`/`height`/`maxHeight` CSS lengths, which are applied as inline styles and take priority over `class`
 - `Breadcrumbs` — navigation breadcrumb trail
-- `IconRenderer` — renders icons from the active icon set
+- `IconRenderer` — renders a named SVG file fetched from `setIconAssetsPath` (see [Icon System](#icon-system))
 
 ---
 
@@ -1152,7 +1152,16 @@ export const userMeta = {
 
 ### Example: icon column
 
-A simpler case — render a Bootstrap icon by name stored as a plain string:
+A simpler case — render an SVG file by name, stored as a plain string (e.g. `bar-chart.svg`). Drop the curated set of icons your app actually uses under `static/icons/` (or any path), point `IconRenderer`/`IconCell` at it once with `setIconAssetsPath`, and the field just stores the filename:
+
+```ts
+<!-- routes/+layout.svelte -->
+<script lang="ts">
+  import { setIconAssetsPath } from 'runeforge';
+
+  setIconAssetsPath('/icons');
+</script>
+```
 
 ```ts
 <!-- components/IconCell.svelte -->
@@ -1174,6 +1183,8 @@ icon: {
 },
 ```
 
+Only the SVG files a row actually references are ever fetched — nothing is bundled or preloaded up front, unlike importing an entire icon package to look up a component by name.
+
 > [!TIP]
 > Both `AvatarCell` and `IconCell` are included in the package and ready to use — you don't need to build them from scratch:
 >
@@ -1274,18 +1285,20 @@ All UI strings default to **Spanish** (Argentina). To switch to another language
 
 ## Icon System
 
-Runeforge ships with a default icon set. To use Bootstrap Icons instead:
+Runeforge ships with a default icon set for the fixed set of CRUD action icons (sort, filter, create, edit, delete, ...). To use Bootstrap Icons instead:
 
 ```ts
 <script>
-  import { setIconSet, bootstrapIcons } from 'runeforge';
+  import { setIconSet, bootstrapIconSet } from 'runeforge';
 
-  setIconSet(bootstrapIcons);
+  setIconSet(bootstrapIconSet);
 </script>
 ```
 
 You can also provide a fully custom icon set by passing an object that satisfies the icon set interface.
 
+For per-row/per-entity icons chosen dynamically by name (e.g. a "pick an icon" field on a model), don't use `CRUDIconSet` — see [Example: icon column](#example-icon-column) for `IconRenderer`/`setIconAssetsPath` instead. That path fetches one SVG file per name from a static folder in your app, rather than importing an entire icon package to resolve a component by name.
+
 ---
 
 ## Running Tests

package/dist/components/IconRenderer.svelte

@@ -1,22 +1,73 @@
+<script lang="ts" module>
+  // Module-scoped so every IconRenderer instance shares one fetch/cache per
+  // URL instead of re-requesting the same SVG file.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const cache = new Map<string, Promise<string | null>>();
+
+  async function loadSvg(url: string): Promise<string | null> {
+    let pending = cache.get(url);
+    if (!pending) {
+      pending = fetch(url)
+        .then((res) => (res.ok ? res.text() : null))
+        .catch(() => null);
+      cache.set(url, pending);
+    }
+    const svg = await pending;
+    if (svg === null) cache.delete(url);
+    return svg;
+  }
+
+  /** Stamps `class`/width/height onto the fetched markup's root `<svg>` tag
+   * so Tailwind sizing and `currentColor` theming apply the same way they
+   * would to a hand-written inline SVG. */
+  function styleSvg(svg: string, className: string, size: string): string {
+    return svg.replace(
+      '<svg',
+      `<svg class="${className}" width="${size}" height="${size}"`
+    );
+  }
+</script>
+
 <script lang="ts">
-  import { getIconSet } from '../icons/context.js';
+  import { getIconAssetsPath } from '../icons/context.js';
 
   let {
     name,
+    basePath,
     size = '1em',
     class: className = '',
   }: {
     name: string;
+    /** Overrides the `setIconAssetsPath` context value for this instance. */
+    basePath?: string;
     size?: string | number;
     class?: string;
   } = $props();
 
-  const icons = $derived(getIconSet());
-  const IconComponent = $derived(icons?.getByName?.(name) ?? null);
+  const resolvedBasePath = $derived(basePath ?? getIconAssetsPath());
+  const dimension = $derived(typeof size === 'number' ? `${size}px` : size);
+  const src = $derived(name ? `${resolvedBasePath}/${name}` : null);
+
+  let markup = $state<string | null>(null);
+
+  $effect(() => {
+    if (!src) {
+      markup = null;
+      return;
+    }
+    let cancelled = false;
+    loadSvg(src).then((svg) => {
+      if (!cancelled) markup = svg;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
 </script>
 
-{#if IconComponent}
-  <IconComponent {size} class={className} />
+{#if markup}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html styleSvg(markup, className, dimension)}
 {:else}
   <span class={className} title={name}></span>
 {/if}

package/dist/components/IconRenderer.svelte.d.ts

@@ -1,5 +1,7 @@
 type $$ComponentProps = {
     name: string;
+    /** Overrides the `setIconAssetsPath` context value for this instance. */
+    basePath?: string;
     size?: string | number;
     class?: string;
 };

package/dist/icons/context.d.ts

@@ -1,3 +1,8 @@
 import type { CRUDIconSet } from './types.js';
 export declare function setIconSet(icons: Partial<CRUDIconSet>): void;
 export declare function getIconSet(): CRUDIconSet | undefined;
+/** Base path `IconRenderer`/`IconCell` fetch named SVG files from, e.g.
+ * `setIconAssetsPath('/icons/chapters')` for files served out of
+ * `static/icons/chapters/*.svg`. Defaults to `/icons`. */
+export declare function setIconAssetsPath(path: string): void;
+export declare function getIconAssetsPath(): string;

package/dist/icons/context.js

@@ -1,5 +1,6 @@
 import { getContext, setContext } from 'svelte';
 const KEY = Symbol('runeforge-icons');
+const ASSETS_KEY = Symbol('runeforge-icon-assets-path');
 export function setIconSet(icons) {
     const existing = getContext(KEY);
     setContext(KEY, { ...existing, ...icons });
@@ -7,3 +8,12 @@ export function setIconSet(icons) {
 export function getIconSet() {
     return getContext(KEY);
 }
+/** Base path `IconRenderer`/`IconCell` fetch named SVG files from, e.g.
+ * `setIconAssetsPath('/icons/chapters')` for files served out of
+ * `static/icons/chapters/*.svg`. Defaults to `/icons`. */
+export function setIconAssetsPath(path) {
+    setContext(ASSETS_KEY, path);
+}
+export function getIconAssetsPath() {
+    return getContext(ASSETS_KEY) ?? '/icons';
+}

package/dist/icons/sets/bootstrap.js

@@ -9,8 +9,7 @@
  *   import { bootstrapIconSet } from 'runeforge/icons/sets/bootstrap';
  *   setIconSet(bootstrapIconSet);
  */
-import * as Icons from 'svelte-bootstrap-icons';
-const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, Download, GripVertical, } = Icons;
+import { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, Download, GripVertical, } from 'svelte-bootstrap-icons';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function asIcon(c) { return c; }
 export const bootstrapIconSet = {
@@ -30,6 +29,4 @@ export const bootstrapIconSet = {
     passwordHide: asIcon(EyeSlash),
     download: asIcon(Download),
     grip: asIcon(GripVertical),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getByName: (name) => asIcon(Icons[name]) ?? null,
 };

package/dist/icons/types.d.ts

@@ -22,5 +22,4 @@ export interface CRUDIconSet {
     /** Drag handle shown at the start of each row when list reordering is
      * enabled. Optional so existing custom icon sets keep compiling. */
     grip?: IconComponent;
-    getByName?: (name: string) => IconComponent | null;
 }

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomActi
 export type { RuneforgeConfig } from './config/context.js';
 export { setConfig, getConfig } from './config/context.js';
 export type { CRUDIconSet, IconComponent } from './icons/types.js';
-export { setIconSet, getIconSet } from './icons/context.js';
+export { setIconSet, getIconSet, setIconAssetsPath, getIconAssetsPath } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';
 export { bootstrapIconSet } from './icons/sets/bootstrap.js';
 export type { RuneforgeStrings } from './i18n/types.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 export { AttributeType } from './types/attribute.js';
 export { setConfig, getConfig } from './config/context.js';
-export { setIconSet, getIconSet } from './icons/context.js';
+export { setIconSet, getIconSet, setIconAssetsPath, getIconAssetsPath } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';
 export { bootstrapIconSet } from './icons/sets/bootstrap.js';
 export { setStrings, getStrings } from './i18n/context.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",