skills.rest
e-xode
e-xodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vuetify-icons

Standardize Vue SSR component icons with @mdi/js SVG paths.

3|Updated Jan 14, 2023
Search Tags:#accessibility#icons#svg#tree-shaking#vue 3#vuetify#mdi
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify-icons
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-icons
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents bulky icon-font usage and inconsistent icon implementations by standardizing how Vue components import and render Vuetify 4 icons with @mdi/js.

Core Features & Use Cases

  • Tree-shakeable SVG icons with @mdi/js: Import only the named MDI icon paths you need and render them via Vuetify props.
  • Consistent icon prop binding across components: Supports v-icon, v-btn, v-text-field, v-list-item, v-chip, and v-tab icon use cases.
  • Guardrails against incorrect icon fonts: Explicitly forbids using mdi-*-style icon font CSS classes and string icon names, which would require the full icon font.

Quick Start

Ask the AI to show you how to add a search icon to a text field and a plus icon to a button while importing the required MDI icons from @mdi/js and wiring them through the correct Vuetify icon props.

Frequently Asked Questions about vuetify-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use tree-shakeable SVG icons in Vue 3 Vuetify components?▼

Tree-shakeable MDI SVG icons in Vuetify prevent bulky icon-font usage by importing only necessary named paths from @mdi/js, reducing bundle size and ensuring consistent icon rendering across SSR components.

Why should I use @mdi/js imports instead of mdi- CSS classes for Vuetify icons?▼

Using @mdi/js imports instead of mdi- CSS classes avoids loading the full icon font package. String class names like mdi-account require the entire font, while named path imports enable tree-shaking and improve performance.

How do I add a search icon to a Vuetify v-text-field using @mdi/js?▼

Add a search icon to a v-text-field by importing the mdiMagnify path from @mdi/js and binding it to the :prepend-inner-icon or :append-inner-icon prop, ensuring the SVG renders without needing the icon font.

Can I bind @mdi/js SVG paths to v-list-item and v-chip icon props?▼

Yes, you can bind @mdi/js SVG paths to v-list-item and v-chip components by importing the named paths and passing them to the :prepend-icon or :icon props to render tree-shakeable SVGs consistently.

Does Vuetify 4 support tree-shaking MDI SVG paths for v-btn and v-tab components?▼

Vuetify 4 supports tree-shaking MDI SVG paths for v-btn and v-tab by requiring named imports from @mdi/js bound through the :icon prop, explicitly avoiding string icon names to prevent loading unnecessary icon fonts.

Related Skills

Explore More Design & Creative Skills→
e-xodee-xode
3

vuetify-theming

Configure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.

Official
Intermediate
jiaiyanjiaiyan
21

el-icon

Create reusable SVG icon components for Element Plus with size and color props.

Community
Basic
christophevgchristophevg

vuetify-v3

Migrate Vuetify 2 components to Vuetify 3 APIs, props, events, and slots.

Community
Intermediate
cfardevcfardev

react-icons

Render SVG icons in React/Next.js by importing from react-icons.

Community
Basic