Skills
.Work. You
Rest

vuetify-icons

Official

Use tree-shakeable MDI SVG icons safely.

Design & Creative#accessibility#icons#svg#tree-shaking#vue 3#vuetify#mdi
Authore-xode
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: vuetify-icons
Download link: https://github.com/e-xode/vue-ssr/archive/main.zip#vuetify-icons

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.