Overview

@mingcute/vue provides typed Vue components for the public Mingcute Core Regular and Core Filled icon styles.

The package focuses on Vue rendering, accessibility, prop precedence, attribute forwarding, and server-rendered hydration. Canonical icon geometry comes from @mingcute/icons, so the Vue adapter does not duplicate the icon catalogue.

Highlights

• 3,326 styled definitions: 1,663 icons in Core Regular and Core Filled.
• Typed Vue components: generated TypeScript declarations and SVG-compatible props.
• Tree-shakeable imports: style entry points and direct icon subpaths.
• Accessible defaults: icons remain decorative unless given an accessible title or label.
• SSR-safe resources: instance-scoped IDs prevent collisions in gradients, masks, and clip paths.
• Shared geometry: all icon data comes from @mingcute/icons.

Installation

Vue 3.5 or newer is required.

# npm
npm install @mingcute/vue

# pnpm
pnpm add @mingcute/vue

# Yarn
yarn add @mingcute/vue

# Bun
bun add @mingcute/vue

Quick Start

<script setup lang="ts">
import {
  Home1Regular,
  MenuRegular,
} from '@mingcute/vue/core-regular';
</script>

<template>
  <Home1Regular :size="24" color="currentColor" title="Home" />
</template>

Imports

Style entry points

Use a style entry point for convenient named imports:

import {
  Home1Regular,
  Search2Regular,
} from '@mingcute/vue/core-regular';

Direct icon imports

Use a direct icon subpath for the smallest module graph:

import Home1Regular from '@mingcute/vue/core-regular/home-1';

The package root exports the shared Icon utility and public types. It does not re-export the complete icon catalogue.

API Reference

| Prop or attribute | Type | Default | Purpose | |---|---|---|---| | size | number \| string | 24 | Sets both width and height unless either dimension is provided | | width | SVG attribute | size | Overrides the rendered width | | height | SVG attribute | size | Overrides the rendered height | | color | string | currentColor | Sets the inherited SVG paint color | | title | string | none | Adds an accessible <title> | | titleId | string | generated | Overrides the generated title association ID | | Other attributes | Vue SVGAttributes | none | Forwards classes, styles, listeners, ARIA, and SVG attributes |

Explicit width or height values take precedence over size.

Accessibility

Icons without a title or explicit accessible name are hidden from assistive technology.

Meaningful icons

Use title, aria-label, or aria-labelledby when the icon communicates meaning by itself:

<Home1Regular :size="24" title="Home" />

Decorative icons

Keep an icon decorative when nearby text already labels the control:

<button type="button">
  <Home1Regular :size="20" aria-hidden="true" />
  <span>Home</span>
</button>

Icon-only controls

Place the accessible name on the control and keep the icon decorative:

<button type="button" aria-label="Open navigation">
  <MenuRegular :size="20" aria-hidden="true" />
</button>

Server Rendering

The renderer uses stable Vue IDs to scope SVG resources and title associations.

For reliable hydration:

• use the same Mingcute package version on the server and client;
• render the same component tree on both sides;
• avoid changing icon order during hydration; and
• preserve stable keys when rendering icon lists.

Available Styles

| Import subpath | Style | Icons | |---|---|---:| | core-regular | Core Regular | 1,663 | | core-filled | Core Filled | 1,663 | | Total | All public styles | 3,326 |

Additional Core, Cute, and Sharp styles are available in Mingcute Pro.

Production Guidance

• The package is ESM-only and declares sideEffects: false.
• Prefer direct icon imports in shared libraries and bundle-sensitive entry points.
• Vue attributes and listeners are forwarded to the rendered <svg>.
• Explicit dimensions override size.
• Use framework components or standalone SVG when gradients, masks, or patterns must be preserved exactly.

Integration with Definitions

@mingcute/icons owns icon names, normalized geometry, layers, resources, and metadata.

@mingcute/vue owns:

• Vue component rendering;
• prop and attribute handling;
• accessibility behavior;
• resource ID scoping; and
• SSR hydration behavior.

Keeping those responsibilities separate prevents duplicate icon data and keeps every framework adapter visually consistent.

Troubleshooting

A component import cannot be resolved

Use a PascalCase named export from a style entry point:

import { Home1Regular } from '@mingcute/vue/core-regular';

Or use the kebab-case direct path:

import Home1Regular from '@mingcute/vue/core-regular/home-1';

Attributes do not appear on the SVG

Pass attributes to the icon component itself. Supported Vue SVG attributes, classes, styles, listeners, and ARIA attributes are forwarded.

An SSR hydration warning appears

Confirm that the server and client use the same Mingcute version and render the same icon tree in the same order.

The production bundle is larger than expected

Use direct icon subpaths and confirm that the bundler tree-shakes ESM. Avoid namespace imports of complete style entry points.

Development

This package is generated from canonical SVG sources. Do not edit generated output by hand.

pnpm --filter @mingcute/vue check

License

Licensed under the Apache License 2.0.

Links

• Mingcute website
• Package changelog
• Mingcute Icons packages
• Repository