Skip to content

feat(paper): add PaperIcon component and createIconPlugin for alias resolution#375

Closed
sridhar-3009 wants to merge 3 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/paper-icon-system-107
Closed

feat(paper): add PaperIcon component and createIconPlugin for alias resolution#375
sridhar-3009 wants to merge 3 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/paper-icon-system-107

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Closes #107

What

Implements the Paper icon system described in #107: a renderless <PaperIcon> component backed by createTokens alias resolution, with a createIconPlugin helper for registration.

API

createIconPlugin(icons) — design system setup

import { createIconPlugin } from '@vuetify/paper'

const icons = createIconPlugin({
  close: 'i-mdi-close',
  menu:  'i-mdi-menu',
  check: 'i-mdi-check',
})

// In root component's setup():
icons.provideIcons()

<PaperIcon> — renderless component

<!-- Default: renders <span class="i-mdi-close" aria-hidden="true" /> -->
<PaperIcon icon="close" />

<!-- With label: exposes role="img" + aria-label for meaningful icons -->
<PaperIcon icon="close" label="Close dialog" />

<!-- Renderless: design system controls the element -->
<PaperIcon icon="close" renderless>
  <template #default="{ icon, attrs }">
    <span v-bind="attrs" />
  </template>
</PaperIcon>

Unregistered icon names pass through as-is (e.g. icon="i-mdi-close" works without registration).

useIconTokens() — direct token access

const tokens = useIconTokens()
const resolved = tokens.resolve('close') // 'i-mdi-close'

Architecture

  • createIconPlugin calls createTokens(icons) to build a full token context with alias resolution, then uses provideIconContext (from createTokensContext) to provide it to descendants
  • PaperIcon calls useIconTokens() with a try/catch so it works without a plugin (passes icon name through)
  • Accessible by default: aria-hidden="true" on decorative icons; set label prop for meaningful icons

Checklist

  • pnpm typecheck — clean (paper + v0 + genesis)
  • pnpm test:run — 6247 tests pass
  • pnpm lint:fix — clean
  • pnpm repo:check — clean

@pkg-pr-new

pkg-pr-new Bot commented Jun 25, 2026

Copy link
Copy Markdown

Open in StackBlitz

commit: 0264e35

@johnleider johnleider marked this pull request as draft June 25, 2026 19:08
@johnleider

Copy link
Copy Markdown
Member

Paper is currently locked down. Can revisit this later.

@sridhar-3009 sridhar-3009 force-pushed the feat/paper-icon-system-107 branch from ae3207d to 0264e35 Compare June 30, 2026 05:45
@sridhar-3009

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback! Closing for now since Paper is locked down — happy to reopen when the time is right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants