Overview

@mingcute/svelte provides typed Svelte components for the public Mingcute Core Regular and Core Filled styles.

Canonical icon geometry comes from @mingcute/icons. The adapter focuses on Svelte rendering, accessibility, prop precedence, refs, framework lifecycle behavior, and stable SVG resource identifiers.

Highlights

• 3,326 styled definitions: 1,663 icons in Core Regular and Core Filled.
• Typed Svelte components: generated declarations and framework-native props.
• Tree-shakeable imports: style entry points and direct icon subpaths.
• Accessible defaults: unlabeled icons remain decorative.
• Scoped SVG resources: repeated icons avoid gradient, mask, and clip-path collisions.
• Shared geometry: the adapter does not duplicate the icon catalogue.

Installation

Compatibility: Svelte 5.20 or newer.

# npm
npm install @mingcute/svelte

# pnpm
pnpm add @mingcute/svelte

# Yarn
yarn add @mingcute/svelte

# Bun
bun add @mingcute/svelte

Quick Start

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

<Home1Regular size={24} title="Home" />

Imports

Style entry points

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

Direct icon imports

import Home1Regular from '@mingcute/svelte/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 | Type | Default | Purpose | |---|---|---|---| | size | number \| string | 24 | Sets both width and height unless either is provided | | width | Svelte SVG value | size | Overrides the rendered width | | height | Svelte SVG value | size | Overrides the rendered height | | color | string | currentColor | Sets inherited SVG paint | | title | string | none | Adds an accessible <title> | | titleId | string | generated | Overrides the title association ID | | class, className, style | Svelte SVG values | none | Styles the rendered SVG | | ref | SVGSVGElement | none | Supports bind:ref | | Other props | Svelte SVG attributes | none | Forwards SVG, event, and ARIA props |

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

Provide a title or platform-appropriate accessibility label when an icon communicates meaning by itself.

Decorative icons

Keep icons decorative when nearby text already labels the action.

Icon-only controls

Put the accessible name on the interactive control and keep the icon itself decorative.

Server Rendering

Components use $props.id() for title and SVG resource identifiers.

Svelte 5.20 or newer is required. Keep server and client package versions aligned for stable hydration.

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 side-effect free.
• Prefer direct icon subpaths in shared libraries and bundle-sensitive entry points.
• Keep framework and Mingcute package versions aligned across server and client environments where applicable.
• Use framework components or standalone SVG when gradients, masks, patterns, or original colors must be preserved exactly.
• Use bind:ref only when direct SVG access is required.

Integration with Definitions

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

@mingcute/svelte owns:

• Svelte component rendering;
• prop and attribute handling;
• accessibility behavior;
• resource ID scoping; and
• framework-specific refs and lifecycle behavior.

This separation 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 or the kebab-case direct icon path.

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.

$props.id() or rune errors appear

Upgrade the consuming application to Svelte 5.20 or newer.

An SSR hydration warning appears

Confirm identical server and client trees and Mingcute package versions.

Development

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

pnpm --filter @mingcute/svelte check

License

Licensed under the Apache License 2.0.

Links

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