Skip to content

[Feature] Paper icon system — renderless Icon component + alias resolution via createTokens #107

@johnleider

Description

@johnleider

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions