---
title: IconMuse for Vue, Nuxt, Svelte, Angular, Solid and Astro
description: Add IconMuse music icons to Vue, Nuxt, Svelte, Angular, Solid or Astro with one command that writes a native component.
---

# IconMuse for Vue, Nuxt, Svelte, Angular, Solid and Astro

## Option A: a native component (recommended)

In your project folder:

```bash
npx iconmuse generate                          # all icons
npx iconmuse generate --icons play,pause,vinyl # only these
```

It detects your framework and writes a typed component in that framework's own style:

| Framework | What it writes | Use |
| --- | --- | --- |
| Vue 3 | `src/components/iconmuse/IconMuse.vue` | `<IconMuse name="play" :size="24" />` |
| Nuxt 3/4 | `components/IconMuse.vue` (auto-imported) | `<IconMuse name="play" />` |
| Svelte / SvelteKit | `src/lib/iconmuse/IconMuse.svelte` | `<IconMuse name="play" size={24} />` |
| Angular | `src/app/iconmuse/iconmuse.component.ts` | `<icon-muse name="play" [size]="24" />` |
| SolidJS | `src/components/iconmuse/IconMuse.tsx` | `<IconMuse name="play" />` |
| Astro | `src/components/iconmuse/IconMuse.astro` | `<IconMuse name="play" />` (zero JavaScript) |

The command prints the exact import line for your project. To update, run it again; it only replaces its own files.

### Line thickness (stroke)

Every generated component has a stroke setting, using a value between 0.5 and 3 (default 1.5):

| Framework | Example |
| --- | --- |
| Vue / Nuxt | `<IconMuse name="play" :stroke-width="2" />` |
| Svelte | `<IconMuse name="play" strokeWidth={2} />` |
| Angular | `<icon-muse name="play" [strokeWidth]="2" />` |
| Solid / Astro | `<IconMuse name="play" strokeWidth={2} />` |

To change the default for every icon, generate with `npx iconmuse generate --stroke 2`.

## Option B: the Web Component from npm

```bash
npm i iconmuse
```

```js
import 'iconmuse/element';
```

```html
<icon-muse name="play" size="24"></icon-muse>
<icon-muse name="play" size="24" stroke-width="2"></icon-muse>   <!-- bolder line -->
```

Framework settings for custom elements:

- **Vue / Nuxt:** `compilerOptions.isCustomElement = (tag) => tag === 'icon-muse'`
- **Angular:** add `CUSTOM_ELEMENTS_SCHEMA` to the component's `schemas`
- **Svelte, Solid, Astro:** works as-is