feat: Make alert icons customizable via setAlertIcons function

.changeset/global-alert-icon-mapping.md

@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": minor
+---
+
+Adding global icon mapping for Alert and Notice components via `setAlertIcons()`.

packages/sveltekit-helper/src/components/index.ts

@@ -2,7 +2,14 @@ export { default as Modal } from './Modal.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as Hamburger } from './Hamburger.svelte';
 export { default as TableOfContents } from './TableOfContents.svelte';
-export { Alert, Notice } from './notifications';
+export { Alert, Notice, setAlertIcons } from './notifications';
 export type { ModalProps, TransitionFn } from './Modal.svelte';
-export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications';
+export type {
+	AlertProps,
+	AlertType,
+	NoticeProps,
+	NoticeType,
+	IconDetail,
+	NotificationType,
+} from './notifications';
 export type { TableOfContentsProps, TOCItem } from './TableOfContents.svelte';

packages/sveltekit-helper/src/components/notifications/Alert.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
-import type { Icon as IconType } from '@lucide/svelte';
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 
 export type AlertType = 'info' | 'warning' | 'success' | 'error';
 
@@ -10,7 +9,7 @@ export type AlertProps = {
 	children?: Snippet;
 	visible?: boolean;
 	dismiss?: boolean;
-	icon?: typeof IconType;
+	icon?: Component;
 	hideIcon?: boolean;
 };
 </script>
@@ -19,7 +18,7 @@ export type AlertProps = {
 	import { X } from '@lucide/svelte'
 	import { fade } from 'svelte/transition'
 
-	import { alertIcons } from './alertIcons.js'
+	import { alertIconStore } from './alertIcons.js'
 
 	let {
 		type = 'info',
@@ -32,7 +31,7 @@ export type AlertProps = {
 		...restProps
 	}: AlertProps = $props()
 
-	const iconDetail = $derived(alertIcons[type])
+	const iconDetail = $derived($alertIconStore[type])
 	const Icon = $derived(customIcon || iconDetail.icon)
 	const hide = () => (visible = false)
 	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')

packages/sveltekit-helper/src/components/notifications/Notice.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-import type { Icon as IconType } from '@lucide/svelte';
+import type { Component } from 'svelte';
 
 export type NoticeType = 'info' | 'warning' | 'success' | 'error';
 
@@ -8,7 +8,7 @@ export type NoticeProps = {
 	title: string;
 	visible?: boolean;
 	dismiss?: boolean;
-	icon?: typeof IconType;
+	icon?: Component;
 	hideIcon?: boolean;
 };
 </script>
@@ -17,7 +17,7 @@ export type NoticeProps = {
 	import { X } from '@lucide/svelte'
 	import { fade } from 'svelte/transition'
 
-	import { alertIcons } from './alertIcons'
+	import { alertIconStore } from './alertIcons'
 
 	let {
 		type = 'info',
@@ -29,7 +29,7 @@ export type NoticeProps = {
 		...restProps
 	}: NoticeProps = $props()
 
-	const iconDetail = $derived(alertIcons[type])
+	const iconDetail = $derived($alertIconStore[type])
 	const Icon = $derived(customIcon || iconDetail.icon)
 	const hide = () => (visible = false)
 	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')

packages/sveltekit-helper/src/components/notifications/alertIcons.ts

@@ -1,24 +1,52 @@
-import { CircleCheck, CircleX, type Icon as IconType, Info, TriangleAlert } from '@lucide/svelte';
+import { CircleCheck, CircleX, Info, TriangleAlert } from '@lucide/svelte';
+import type { Component } from 'svelte';
+import { writable } from 'svelte/store';
 
 /**
- * Notification type variants
+ * Notification type variants.
  */
-type NotificationType = 'info' | 'warning' | 'success' | 'error';
+export type NotificationType = 'info' | 'warning' | 'success' | 'error';
 
 /**
- * Icon configuration for notification types
+ * Icon configuration for a notification type.
  */
-type IconDetail = {
-	icon: typeof IconType;
+export type IconDetail = {
+	icon: Component;
 	colour: string;
 };
 
-/**
- * Icon mapping for notification types
- */
-export const alertIcons: Record<NotificationType, IconDetail> = {
+const defaultAlertIcons: Record<NotificationType, IconDetail> = {
 	info: { icon: Info, colour: 'var(--colour-semantic-info)' },
 	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },
 	warning: { icon: TriangleAlert, colour: 'var(--colour-semantic-warning)' },
 	error: { icon: CircleX, colour: 'var(--colour-semantic-error)' },
 };
+
+/**
+ * Writable store holding the active icon map for all Alert and Notice components.
+ * Consumers can override individual or all entries via setAlertIcons().
+ */
+export const alertIconStore = writable<Record<NotificationType, IconDetail>>(defaultAlertIcons);
+
+/**
+ * Globally overrides icons for Alert and Notice components.
+ * Call this once in your root layout (e.g. +layout.svelte) to supply
+ * your own SVG components instead of the default Lucide icons.
+ *
+ * @example
+ * ```ts
+ * import { setAlertIcons } from '@ainsleydev/sveltekit-helper';
+ * import InfoIcon from '$lib/icons/Info.svelte';
+ * import SuccessIcon from '$lib/icons/Success.svelte';
+ *
+ * setAlertIcons({
+ *   info:    { icon: InfoIcon,    colour: 'var(--colour-info)' },
+ *   success: { icon: SuccessIcon, colour: 'var(--colour-success)' },
+ * });
+ * ```
+ *
+ * @param overrides - Partial map of notification types to icon configurations.
+ */
+export function setAlertIcons(overrides: Partial<Record<NotificationType, IconDetail>>): void {
+	alertIconStore.update((current) => ({ ...current, ...overrides }));
+}

packages/sveltekit-helper/src/components/notifications/index.ts

@@ -2,3 +2,5 @@ export { default as Alert } from './Alert.svelte';
 export { default as Notice } from './Notice.svelte';
 export type { AlertProps, AlertType } from './Alert.svelte';
 export type { NoticeProps, NoticeType } from './Notice.svelte';
+export { setAlertIcons } from './alertIcons.js';
+export type { IconDetail, NotificationType } from './alertIcons.js';