@wentools/iconic 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wentools
+
+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

@@ -0,0 +1,118 @@
+# @wentools/iconic
+
+Svelte 5 icon component with animations and a resolver factory for Lucide icons.
+
+## Installation
+
+```bash
+pnpm add @wentools/iconic
+```
+
+## Usage
+
+### Direct component usage
+
+```svelte
+<script>
+  import { Icon } from '@wentools/iconic'
+  import { Search } from '@lucide/svelte'
+</script>
+
+<Icon icon={Search} />
+<Icon icon={Search} animation="spin" />
+<Icon icon={Search} size={24} color="red" />
+```
+
+### String-based resolution
+
+Set up a project-specific icon registry:
+
+```typescript
+// src/lib/icons/index.ts
+import { createIconResolver } from '@wentools/iconic'
+import { Search, Home, Plus } from '@lucide/svelte'
+
+export const iconResolver = createIconResolver({
+  search: Search,
+  home: Home,
+  plus: Plus,
+})
+
+export type IconVariant = keyof typeof iconResolver.map
+```
+
+Wire the resolver in your root layout:
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { setIconResolver } from '@wentools/iconic'
+  import { iconResolver } from '$lib/icons'
+
+  setIconResolver(iconResolver)
+</script>
+```
+
+Then use string variants anywhere:
+
+```svelte
+<Icon icon="search" animation="pulse" />
+```
+
+### Animations
+
+Five built-in animations with `prefers-reduced-motion` support:
+
+- `spin` — continuous rotation
+- `pulse` — opacity fade
+- `bounce` — vertical bounce
+- `shake` — horizontal shake
+- `ping` — scale + fade out
+
+```svelte
+<Icon icon={Search} animation="spin" />
+<Icon icon={Search} animation="bounce" animationDuration={2} />
+<Icon icon={Search} animation="pulse" animationIterations={3} />
+```
+
+### IconAction type
+
+For components with interactive icons:
+
+```typescript
+import type { IconAction } from '@wentools/iconic'
+
+interface Props {
+  actions: IconAction<MyIconVariant>[]
+}
+```
+
+## API
+
+### `Icon` component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `Component \| string` | required | Lucide component or string variant |
+| `size` | `string \| number` | `'var(--icon-size, 1rem)'` | Icon size |
+| `color` | `string` | `'currentColor'` | Icon color |
+| `strokeWidth` | `number` | `2` | Stroke width |
+| `absoluteStrokeWidth` | `boolean` | `false` | Use absolute stroke width |
+| `animation` | `IconAnimation` | — | Animation type |
+| `animationDuration` | `number` | varies | Duration in seconds |
+| `animationEasing` | `string` | varies | CSS easing function |
+| `animationIterations` | `number \| 'infinite'` | `'infinite'` | Iteration count |
+
+### `createIconResolver(map)`
+
+Creates a typed resolver from a `{ variant: Component }` map.
+
+Returns `{ resolveToComponent, isIconVariant, iconVariants, map }`.
+
+### `setIconResolver(resolver)` / `getIconResolver()`
+
+Svelte context helpers for app-wide string resolution.
+
+## License
+
+MIT

package/dist/icon/Icon.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import type { Component } from 'svelte'
+	import type { IconAnimation } from '../types'
+	import type { IconResolver } from '../resolver/create_icon_resolver'
+	import { ICON_RESOLVER_KEY } from '../resolver/context'
+	import { getContext } from 'svelte'
+
+	interface Props {
+		icon: Component | string
+		size?: string | number
+		color?: string
+		strokeWidth?: number
+		absoluteStrokeWidth?: boolean
+		animation?: IconAnimation
+		animationDuration?: number
+		animationEasing?: string
+		animationIterations?: number | 'infinite'
+	}
+
+	let {
+		icon,
+		size = 'var(--icon-size, 1rem)',
+		color = 'currentColor',
+		strokeWidth = 2,
+		absoluteStrokeWidth = false,
+		animation,
+		animationDuration,
+		animationEasing,
+		animationIterations,
+	}: Props = $props()
+
+	// Get resolver at component init time (top-level), not inside $derived
+	const resolver = getContext<IconResolver | undefined>(ICON_RESOLVER_KEY)
+
+	// Resolve icon variant to component if needed
+	const Icon = $derived.by(() => {
+		if (typeof icon !== 'string') return icon
+		if (!resolver) {
+			throw new Error(
+				'Icon received a string variant but no icon resolver is set. ' +
+					'Call setIconResolver() in a parent component (e.g. root layout).',
+			)
+		}
+		return resolver.resolveToComponent(icon)
+	})
+
+	// Convert size to appropriate format for Lucide icons
+	const lucideSize = $derived(typeof size === 'number' ? size : '100%')
+	const wrapperSize = $derived(typeof size === 'number' ? `${size}px` : size)
+
+	// Use the animation prop directly
+	const activeAnimation = $derived(animation ?? null)
+
+	// Build animation CSS custom properties
+	const animationCustomProps = $derived.by(() => {
+		if (!activeAnimation) return {}
+
+		const defaultDurations: Record<IconAnimation, number> = {
+			spin: 1,
+			pulse: 2,
+			bounce: 1.2,
+			shake: 0.5,
+			ping: 1,
+		}
+
+		const defaultEasings: Record<IconAnimation, string> = {
+			spin: 'linear',
+			pulse: 'ease-in-out',
+			bounce: 'ease-in-out',
+			shake: 'ease-in-out',
+			ping: 'cubic-bezier(0, 0, 0.2, 1)',
+		}
+
+		return {
+			'--animation-duration': `${animationDuration ?? defaultDurations[activeAnimation]}s`,
+			'--animation-easing': animationEasing ?? defaultEasings[activeAnimation],
+			'--animation-iterations': animationIterations ?? 'infinite',
+		}
+	})
+
+	// Build style string from custom properties
+	const animationStyle = $derived.by(() => {
+		const props = animationCustomProps
+		return Object.entries(props)
+			.map(([key, value]) => `${key}: ${value}`)
+			.join('; ')
+	})
+
+	// Build class string
+	const animationClass = $derived(activeAnimation ? `animate-${activeAnimation}` : '')
+</script>
+
+<div class={animationClass} style:--size={wrapperSize} style:--color={color} style={animationStyle}>
+	<Icon {color} size={lucideSize} {strokeWidth} {absoluteStrokeWidth} />
+</div>
+
+<style>
+	div {
+		--shake-distance: calc(var(--icon-size, 1rem) * 0.1);
+
+		height: var(--size);
+		width: var(--size);
+		color: var(--color);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition: color 200ms ease;
+	}
+
+	/* Animation keyframes */
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	@keyframes bounce {
+		0%,
+		20%,
+		50%,
+		80%,
+		100% {
+			transform: translateY(0);
+			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+		}
+		40% {
+			transform: translateY(-30%);
+			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		}
+		60% {
+			transform: translateY(-15%);
+			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		}
+	}
+
+	@keyframes shake {
+		0%,
+		100% {
+			transform: translateX(0);
+		}
+		10%,
+		30%,
+		50%,
+		70%,
+		90% {
+			transform: translateX(calc(var(--shake-distance) * -1));
+		}
+		20%,
+		40%,
+		60%,
+		80% {
+			transform: translateX(var(--shake-distance));
+		}
+	}
+
+	@keyframes ping {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		75%,
+		100% {
+			transform: scale(1.2);
+			opacity: 0;
+		}
+	}
+
+	/* Animation classes */
+	.animate-spin {
+		animation: spin var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	.animate-pulse {
+		animation: pulse var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	.animate-bounce {
+		animation: bounce var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	.animate-shake {
+		animation: shake var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	.animate-ping {
+		animation: ping var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.animate-spin,
+		.animate-pulse,
+		.animate-bounce,
+		.animate-shake,
+		.animate-ping {
+			animation: none;
+		}
+	}
+</style>

package/dist/icon/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+import type { IconAnimation } from '../types';
+interface Props {
+    icon: Component | string;
+    size?: string | number;
+    color?: string;
+    strokeWidth?: number;
+    absoluteStrokeWidth?: boolean;
+    animation?: IconAnimation;
+    animationDuration?: number;
+    animationEasing?: string;
+    animationIterations?: number | 'infinite';
+}
+declare const Icon: Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/icon/index.d.ts

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

package/dist/icon/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon } from './icon/index';
+export type { IconAnimation, IconAction } from './types';
+export { createIconResolver, setIconResolver, getIconResolver } from './resolver/index';
+export type { IconResolver } from './resolver/index';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Icon } from './icon/index';
+export { createIconResolver, setIconResolver, getIconResolver } from './resolver/index';

package/dist/resolver/context.d.ts

@@ -0,0 +1,5 @@
+import type { IconResolver } from './create_icon_resolver';
+declare const ICON_RESOLVER_KEY: unique symbol;
+declare function setIconResolver(resolver: IconResolver): void;
+declare function getIconResolver(): IconResolver | undefined;
+export { ICON_RESOLVER_KEY, setIconResolver, getIconResolver };

package/dist/resolver/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const ICON_RESOLVER_KEY = Symbol('icon-resolver');
+function setIconResolver(resolver) {
+    setContext(ICON_RESOLVER_KEY, resolver);
+}
+function getIconResolver() {
+    return getContext(ICON_RESOLVER_KEY);
+}
+export { ICON_RESOLVER_KEY, setIconResolver, getIconResolver };

package/dist/resolver/create_icon_resolver.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+interface IconResolver {
+    resolveToComponent: (variant: string) => Component;
+    isIconVariant: (value: string) => boolean;
+    iconVariants: readonly string[];
+}
+declare function createIconResolver<const T extends Record<string, Component>>(map: T): {
+    resolveToComponent: (variant: keyof T & string) => Component;
+    isIconVariant: (value: string) => value is keyof T & string;
+    iconVariants: readonly (keyof T & string)[];
+    map: T;
+};
+export { createIconResolver };
+export type { IconResolver };

package/dist/resolver/create_icon_resolver.js

@@ -0,0 +1,20 @@
+function createIconResolver(map) {
+    const variants = Object.keys(map);
+    const resolveToComponent = (variant) => {
+        const component = map[variant];
+        if (!component) {
+            throw new Error(`Unknown icon variant: "${variant}"`);
+        }
+        return component;
+    };
+    const isIconVariant = (value) => {
+        return value in map;
+    };
+    return {
+        resolveToComponent,
+        isIconVariant,
+        iconVariants: variants,
+        map,
+    };
+}
+export { createIconResolver };

package/dist/resolver/index.d.ts

@@ -0,0 +1,3 @@
+export { createIconResolver } from './create_icon_resolver';
+export type { IconResolver } from './create_icon_resolver';
+export { setIconResolver, getIconResolver } from './context';

package/dist/resolver/index.js

@@ -0,0 +1,2 @@
+export { createIconResolver } from './create_icon_resolver';
+export { setIconResolver, getIconResolver } from './context';

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+type IconAnimation = 'spin' | 'pulse' | 'bounce' | 'shake' | 'ping';
+/**
+ * Shared type for icon actions used in form inputs, tags, badges, etc.
+ * Generic over the icon variant string type so projects can narrow it.
+ */
+interface IconAction<V extends string = string> {
+    icon: Component | V;
+    action?: () => void;
+    label?: string;
+    title?: string;
+    animation?: IconAnimation;
+    animationDuration?: number;
+    animationEasing?: string;
+    animationIterations?: number | 'infinite';
+}
+export type { IconAnimation, IconAction };

package/dist/types.js

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

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@wentools/iconic",
+	"version": "0.1.0",
+	"description": "Svelte 5 icon component with animations and resolver factory for Lucide icons",
+	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "svelte-kit sync && svelte-package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://gitlab.com/wentools/iconic"
+	},
+	"keywords": [
+		"svelte",
+		"icons",
+		"lucide",
+		"animation",
+		"component"
+	]
+}