From c0f9b9a2136bdb0640a22571109a0b47e66d28a1 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Mar 2026 13:29:07 +0000 Subject: [PATCH 1/3] feat: Adding global icon mapping for Alert and Notice components Introduces setAlertIcons() to allow consumers to override the default Lucide icons with their own SVG components globally, without needing to pass a custom icon prop on every instance. https://claude.ai/code/session_01Am2tu2GzwFut2SBD25he1E --- .../sveltekit-helper/src/components/index.ts | 11 ++++- .../src/components/notifications/Alert.svelte | 4 +- .../components/notifications/Notice.svelte | 4 +- .../components/notifications/alertIcons.ts | 48 +++++++++++++++---- .../src/components/notifications/index.ts | 2 + 5 files changed, 53 insertions(+), 16 deletions(-) diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts index 4d10128a..d21d8101 100644 --- a/packages/sveltekit-helper/src/components/index.ts +++ b/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'; diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte index cbcc9965..5bd6235e 100644 --- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte +++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte @@ -19,7 +19,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 +32,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') diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte index 76b6a114..b737cdef 100644 --- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte +++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte @@ -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') diff --git a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts index 0ee817b7..8c23a819 100644 --- a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts +++ b/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 = { +const defaultAlertIcons: Record = { 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>(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>): void { + alertIconStore.update((current) => ({ ...current, ...overrides })); +} diff --git a/packages/sveltekit-helper/src/components/notifications/index.ts b/packages/sveltekit-helper/src/components/notifications/index.ts index e841ddda..305d0dd0 100644 --- a/packages/sveltekit-helper/src/components/notifications/index.ts +++ b/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'; From ed563755d1dd75dc62218b885169ba6b5cea14e3 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Mar 2026 13:31:03 +0000 Subject: [PATCH 2/3] chore: Adding changeset for global icon mapping feature https://claude.ai/code/session_01Am2tu2GzwFut2SBD25he1E --- .changeset/global-alert-icon-mapping.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/global-alert-icon-mapping.md diff --git a/.changeset/global-alert-icon-mapping.md b/.changeset/global-alert-icon-mapping.md new file mode 100644 index 00000000..3ab76e68 --- /dev/null +++ b/.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()`. From 9f4f755d2995f0f516e226550610873328623c65 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Mar 2026 13:34:05 +0000 Subject: [PATCH 3/3] fix: Aligning icon prop type to Component in Alert and Notice Replaces Lucide-specific typeof IconType with Svelte's Component type to match IconDetail, resolving the type mismatch when consumers pass custom SVG components via the icon prop. https://claude.ai/code/session_01Am2tu2GzwFut2SBD25he1E --- .../src/components/notifications/Alert.svelte | 5 ++--- .../src/components/notifications/Notice.svelte | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte index 5bd6235e..b41c4652 100644 --- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte +++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte @@ -1,6 +1,5 @@ diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte index b737cdef..190f5d86 100644 --- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte +++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte @@ -1,5 +1,5 @@