@dynamic-icon/svelte 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dynamic-icon contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,15 @@
-# Temporary Holding Version
+# @dynamic-icon/svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Renders icons from database records. Knows nothing about any icon library: sources are registered with
+[`@dynamic-icon/svelte-config`](../svelte-config) (a peer dependency, so there is exactly one registry).
+
+```svelte
+<DynamicIcon {...record.icon} size={24} class="text-primary" />
+```
+
+Props: `webType`, `webRef`, `color`, `media`, `scale`, `size` (px or CSS length), `strokeWidth`, `class`, `fallback` (snippet).
+
+- `color` is a CSS colour (`#fff`, `rgb()`, `var()`, `red`) applied via `style`, or otherwise a utility class.
+- `scale` multiplies a numeric `size` and rounds it; string sizes are used as-is.
+- Only `image` and `markup` icons get a wrapper `<span>` (they need a sized box); everything else renders one element.
+- Install both packages; the host app calls `configureIcons()` once. See the config package.

package/dist/DynamicIcon.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	/**
+	 * @component DynamicIcon
+	 * Renders a database-driven icon record. Sources, fallback and defaults come from `configureIcons()`.
+	 *
+	 *   <DynamicIcon {...record.icon} size={24} class="text-primary" />
+	 *
+	 * Resolution order by `webType`: `image` | `emoji` | `markup` | font type | configured source.
+	 * `class` and `color` land on the rendered element; `image`/`markup` get a sized wrapper to carry them.
+	 */
+	import type { IconProps } from './types.js';
+	import { getIconConfig, resolveIcon } from '@dynamic-icon/svelte-config';
+	import { boxSize, boxStyle, classes, colorStyle, textStyle } from './utils.js';
+
+	const config = getIconConfig();
+	const Fallback = config.fallback;
+
+	let {
+		webType,
+		webRef,
+		color,
+		media,
+		scale,
+		size = config.size,
+		strokeWidth = config.strokeWidth,
+		fallback,
+		class: className
+	}: IconProps = $props();
+
+	// The only per-instance derived value: caching it keeps the component from re-mounting
+	// when unrelated props (size, color, class) change.
+	const Comp = $derived(resolveIcon(webType, webRef));
+</script>
+
+{#if Comp}
+	<Comp
+		size={boxSize(size, scale)}
+		{strokeWidth}
+		class={classes(color, className)}
+		style={colorStyle(color)}
+	/>
+{:else if webType === 'image' && media?.link}
+	<span
+		class={classes(color, className, 'u-icon')}
+		style={boxStyle(boxSize(size, scale), color)}
+		role="presentation"
+	>
+		<img src={media.link} alt={media.caption ?? ''} loading="lazy" decoding="async" />
+	</span>
+{:else if webType === 'markup' && webRef && config.sanitize}
+	<span
+		class={classes(color, className, 'u-icon u-markup')}
+		style={boxStyle(boxSize(size, scale), color)}
+		role="presentation"
+	>
+		{@html config.sanitize(webRef)}
+	</span>
+{:else if webType === 'emoji' && webRef}
+	<span class={classes(color, className)} style={textStyle(boxSize(size, scale), color)}>{webRef}</span>
+{:else if webType && webRef && config.fontTypes.has(webType)}
+	<i class={classes(color, className, webRef)} style={textStyle(boxSize(size, scale), color)}></i>
+{:else if fallback}
+	{@render fallback()}
+{:else if Fallback}
+	<Fallback
+		size={boxSize(size, scale)}
+		{strokeWidth}
+		class={classes(color, className)}
+		style={colorStyle(color)}
+	/>
+{/if}
+
+<style>
+	/* Scoped CSS instead of Tailwind utilities: Tailwind does not scan node_modules by default,
+	   so utility classes used inside a package would silently not exist in the consumer's build. */
+	.u-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+		user-select: none;
+	}
+
+	.u-icon > img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	/* Injected SVG fills the box; root <svg> without an explicit fill inherits `color`. */
+	.u-markup :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.u-markup :global(svg:not([fill])) {
+		fill: currentColor;
+	}
+</style>

package/dist/DynamicIcon.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+     * @component DynamicIcon
+     * Renders a database-driven icon record. Sources, fallback and defaults come from `configureIcons()`.
+     *
+     *   <DynamicIcon {...record.icon} size={24} class="text-primary" />
+     *
+     * Resolution order by `webType`: `image` | `emoji` | `markup` | font type | configured source.
+     * `class` and `color` land on the rendered element; `image`/`markup` get a sized wrapper to carry them.
+     */
+import type { IconProps } from './types.js';
+declare const DynamicIcon: import("svelte").Component<IconProps<string>, {}, "">;
+type DynamicIcon = ReturnType<typeof DynamicIcon>;
+export default DynamicIcon;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DynamicIcon } from "./DynamicIcon.svelte";
+export type { IconEntry, IconMedia, IconProps } from "./types.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { default as DynamicIcon } from "./DynamicIcon.svelte";

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+/** Media attached to an `image` icon. Structurally compatible with CMS file objects. */
+export interface IconMedia {
+    link: string;
+    caption?: string;
+}
+/** Icon record as served by the CMS/DB. Narrow `T` to your own `webType`s if you like. */
+export interface IconEntry<T extends string = string> {
+    /** Unique identifier key (e.g. 'nav_home'). Not used for rendering. */
+    name?: string;
+    /** Which source/renderer handles this icon. */
+    webType?: T;
+    /** Identifier within the source ('car-front'), icon-font classes, emoji, or raw markup. */
+    webRef?: string;
+    /** A Tailwind/utility class (`text-primary`) or a CSS colour (`#fff`, `rgb()`, `var()`, `red`). */
+    color?: string;
+    /** Image for the `image` type. */
+    media?: IconMedia;
+    /** Per-source size normalisation factor; the result is rounded to whole pixels. Numeric `size` only. */
+    scale?: number;
+}
+export interface IconProps<T extends string = string> extends IconEntry<T> {
+    /** Visual size: px when a number, any CSS length when a string. */
+    size?: number | string;
+    class?: string;
+    strokeWidth?: number;
+    /** Rendered when the icon cannot be resolved. Overrides `IconConfig.fallback`. */
+    fallback?: Snippet;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const isCssColor: (color: string | undefined) => color is string;
+/** Applies the per-source `scale` to numeric sizes, rounded to avoid blurry sub-pixel rendering. */
+export declare const boxSize: (size: number | string, scale: number | undefined) => number | string;
+/** `style` for icon components: only a CSS colour needs it. */
+export declare const colorStyle: (color: string | undefined) => string | undefined;
+/** `style` for the sized box around `image` / `markup` icons. */
+export declare const boxStyle: (size: number | string, color: string | undefined) => string;
+/** `style` for text-like icons (emoji, icon fonts). */
+export declare const textStyle: (size: number | string, color: string | undefined) => string;
+/** Utility-class colour first, then the consumer's class. Plain concatenation, no conflict resolution. */
+export declare const classes: (color: string | undefined, extra: string | undefined, base?: string) => string | undefined;

package/dist/utils.js

@@ -0,0 +1,29 @@
+/**
+ * A CSS colour value: hex, a keyword (`red`, `currentColor`) or a colour function (`rgb()`, `oklch()`, `var()`...).
+ * Anything else (`text-primary`, `text-red-500 dark:text-red-300`, `text-(--brand)`) is a utility class.
+ * Strict on purpose: the value ends up in a `style` attribute, so `;`, braces and quotes never qualify.
+ */
+const CSS_COLOR = /^(?:#[\da-f]{3,8}|[a-z]+|[a-z]+(?:-[a-z]+)*\([^;{}"'<>]*\))$/i;
+export const isCssColor = (color) => color !== undefined && CSS_COLOR.test(color);
+/** Applies the per-source `scale` to numeric sizes, rounded to avoid blurry sub-pixel rendering. */
+export const boxSize = (size, scale) => typeof size === "number" && scale ? Math.round(size * scale) : size;
+const cssLength = (size) => (typeof size === "number" ? `${size}px` : size);
+const colorDecl = (color) => (isCssColor(color) ? `;color:${color}` : "");
+/** `style` for icon components: only a CSS colour needs it. */
+export const colorStyle = (color) => isCssColor(color) ? `color:${color}` : undefined;
+/** `style` for the sized box around `image` / `markup` icons. */
+export const boxStyle = (size, color) => {
+    const length = cssLength(size);
+    return `width:${length};height:${length}${colorDecl(color)}`;
+};
+/** `style` for text-like icons (emoji, icon fonts). */
+export const textStyle = (size, color) => `font-size:${cssLength(size)}${colorDecl(color)}`;
+/** Utility-class colour first, then the consumer's class. Plain concatenation, no conflict resolution. */
+export const classes = (color, extra, base) => {
+    let out = base;
+    if (color && !isCssColor(color))
+        out = out ? `${out} ${color}` : color;
+    if (extra)
+        out = out ? `${out} ${extra}` : extra;
+    return out;
+};

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@dynamic-icon/svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Tiny Svelte 5 component that renders database-driven icons. Sources are plugged in via @dynamic-icon/svelte-config.",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "icons",
+    "dynamic-icon"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@dynamic-icon/svelte-config": "^0.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "jsdom": "^25.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.0",
+    "@dynamic-icon/svelte-config": "0.1.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "typecheck:test": "svelte-check --tsconfig ./tsconfig.test.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }