vuetify-icons

Name: vuetify-icons
Availability: InStock
Author: e-xode

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

Ready to run

npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-icons

💬 Prompt for ChatGPT / Claude Chat▼

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.