@iconmarvel/vue

@iconmarvel/vue

Use IconMarvel icons in Vue 3 / Nuxt after copying from iconmarvel.com.

No search. No copy buttons. Discover on the site, install npm, paste snippet.

📚 Official documentation

Install

npm install @iconmarvel/vue @iconmarvel/client

Peer: Vue 3.3+.

Usage

1. On iconmarvel.com

Search → open icon → under preview tap Vue → Copied!

2. In your app

<script setup lang="ts">
// once per app (main.ts or root component)
import { IconMarvel, IconMarvelIcon } from '@iconmarvel/vue'

IconMarvel.init()
</script>

<template>
  <!-- pasted from the website -->
  <IconMarvelIcon
    icon="shopping-cart-a1b2c3"
    src="https://cdn.iconmarvel.com/icons/shopping-cart-a1b2c3.svg"
    :size="24"
  />
</template>

Named component (recommended):

export const CartIcon = IconMarvel.createIcon('shopping-cart-a1b2c3', {
  src: 'https://cdn.iconmarvel.com/icons/shopping-cart-a1b2c3.svg',
})

API

Nuxt / SSR

import { getIcon } from '@iconmarvel/client'

const icon = await getIcon('home-solid')
// <IconMarvelIcon :icon="icon.slug" :src="icon.cdnUrl" :size="32" />