ui · Primitive
IconContext
@devalok/shilp-sutra/ui (barrel export)View in Storybook Hand-curated previews ship in rolling waves. See it live in Storybook →
Reference
Exports
IconContext — React.Context<IconContextValue>
IconProvider — Provider component (props: size?, stroke?, children)
useIconContext() — Hook returning { size?, stroke? }
IconSize — Type: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
IconStroke — Type: "light" | "regular" | "bold"
IconProvider Props
size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
stroke: "light" | "regular" | "bold"
children: ReactNode (REQUIRED)
Example
import { IconProvider, useIconContext } from '@devalok/shilp-sutra/ui'
<IconProvider size="sm" stroke="bold">
<MyCustomIconComponent />
</IconProvider>
// Inside MyCustomIconComponent:
const { size, stroke } = useIconContext()
Composability
- Low-level context primitive — rarely used directly. Most consumers want IconGroup (which wraps IconProvider + layout) or just nest Icons inside Button/Input/Badge (which provide their own IconProvider).
- When to reach for IconProvider manually: Building a custom container that hosts many Icons (a dashboard tile row, a custom toolbar, a nav rail) and you want consistent icon sizing without repeating props. IconProvider is the escape hatch for that.
- Consumer contract:
useIconContext()returns{}(empty) when no provider is present — your consumer code MUST handle that (fall back to a default size/stroke). Don't assume a provider exists. - Memoization: The provider memoizes its value, so consumers don't re-render unless size or stroke actually change. Safe to use in tight loops / frequently-re-rendering trees.
- Composes down: IconProvider nests — inner providers override outer ones. A
<Button size="lg"><IconProvider size="xs">...</IconProvider></Button>overrides the button's icon sizing.
Gotchas
- Used internally by IconGroup and Button to propagate icon sizing to children
- If no provider is present,
useIconContext()returns{}(empty object) — consumers should fall back to defaults - Value is memoized — safe for frequent re-renders
Changes
v0.29.0
- Added Initial release — React context for propagating icon size and stroke weight