IconProvider handbook

v1.0.0 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Replace SnowUI’s built-in functional icons across an application or local subtree. Unconfigured icons keep their component defaults.

When to use it

Use IconProvider to share icon configuration with descendants. It renders no visible icon; Icon or an icon resource component still renders the actual graphic.

icons maps names to components; resolver resolves an icon by name.
It affects icon resolution only in its descendant subtree and renders children unchanged. It adds no visible graphic or layout wrapper.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { ColorSchemeButton, CopyButton, IconProvider } from '@snowui-design-system/components';	import { createSnowUIComponentIconResolver } from '@snowui-design-system/resource-svelte';	const resolver = createSnowUIComponentIconResolver({ collection: 'phosphor', fallbackCollections: ['snowui'] });</script> <IconProvider resolver={resolver}><div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-4) var(--gap-3); max-width: 100%;">    <CopyButton text="pnpm add @snowui-design-system/components">Copy install command</CopyButton>    <ColorSchemeButton applyToDocument={false} ariaLabel="Preview theme" /></div></IconProvider>

API

Keyword	Type	Default	Description
icons	`ComponentIconMap`	`{}`	Maps stable semantic names to external Svelte icon components.
resolver	`ComponentIconResolver`	—	Resolves an icon from `{ name, weight }`; takes precedence over `icons` at the same provider level.
children	`Snippet`	—	The child subtree, rendered unchanged.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Overview and selection boundaries

IconProvider is a nonvisual context provider. Without one, components use the default functional icons bundled with the Components package. With icons or resolver, built-in icons in the subtree use the configured external icon library unless an instance Snippet or named role explicitly replaces them.

It does not replace <Icon> elements, resource icons, or ordinary children explicitly supplied by the caller. Use a component’s public Icon Snippet or named role to replace one instance; use IconProvider to switch the icon library for an entire application subtree.

Import

<script lang="ts">    import { IconProvider } from "@snowui-design-system/components";</script>

API

At one provider level, resolution tries resolver before icons. On a miss it checks the next outer provider, then falls back to the component’s built-in default icon. Changing the resolver or icons Prop updates the current subtree. External icon components receive standardized rendering parameters including size, color, weight, class, data-as, and ARIA attributes.

Examples

<script lang="ts">    import { IconProvider, CopyButton } from "@snowui-design-system/components";    import { Copy, Check } from "my-icon-library";     const appIcons = { copy: Copy, check: Check };</script> <IconProvider icons={appIcons}>    <CopyButton text="SnowUI" /></IconProvider>

Accessibility and composition boundaries

IconProvider creates no DOM node. The component that owns an action remains responsible for its functional name, a Button’s aria-label, hit area, and state. External icons replace graphics only; they do not take over events or accessible names.

IconProvider style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

This component source does not directly consume a registered component-specific override. Style composed children through public parts or an explicit child; do not guess variable names.

Design guide · Tokens · Composition boundaries

IconProvider types and states

Required Props: no named required Props.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inherited declaration: none. Consult the relevant base component’s public documentation for any capabilities it exposes; omitted fields cannot be used as if they were inherited.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.