Summary
Icon system for Paper — renderless <Icon> component with alias resolution powered by createTokens. Design systems provide their icon set (UnoCSS classes, SVGs, etc.), Paper handles the plumbing.
Approach
- Alias resolution via
createTokens (e.g. { close: 'i-mdi-close', menu: 'i-mdi-menu' })
- Renderless
<Icon> component that resolves alias → value, design system decides rendering
- UnoCSS
presetIcons handles actual icon rendering via CSS classes
- No icon set opinions at this layer — that's the design system's job
Out of Scope
- v0 level: no dedicated
createIcons composable needed (createTokens covers alias mapping)
- Specific icon sets (mdi, fa, etc.) — design system chooses
Related
- v0
createTokens — foundation for alias resolution
- UnoCSS
presetIcons — rendering via i-mdi-* classes
- Vuetify
mdi-unocss icon set (PR #22117) — reference implementation
Summary
Icon system for Paper — renderless
<Icon>component with alias resolution powered bycreateTokens. Design systems provide their icon set (UnoCSS classes, SVGs, etc.), Paper handles the plumbing.Approach
createTokens(e.g.{ close: 'i-mdi-close', menu: 'i-mdi-menu' })<Icon>component that resolves alias → value, design system decides renderingpresetIconshandles actual icon rendering via CSS classesOut of Scope
createIconscomposable needed (createTokens covers alias mapping)Related
createTokens— foundation for alias resolutionpresetIcons— rendering viai-mdi-*classesmdi-unocssicon set (PR #22117) — reference implementation