Vue

@dev.icons/vue exports every icon as a Vue 3 component. Works with <script setup>, the Options API, Nuxt, and Vite SSR.

Install

npm install @dev.icons/vue

Usage

<script setup lang="ts">
import { VueIcon } from "@dev.icons/vue";
</script>

<template>
  <VueIcon :size="48" />
</template>

Monochrome variants

Import from the /mono subpath:

<script setup lang="ts">
import { VueIcon } from "@dev.icons/vue/mono";
</script>

<template>
  <VueIcon :size="48" />
</template>

Monochrome icons use currentColor, so they inherit the parent’s text color.

Props

Prop	Type	Default	Description
size	Number | String	24	Shortcut for width and height
title	String	undefined	Adds an SVG <title> for accessibility
color	String	currentColor	Fill override

Nuxt

Auto-import icons across your Nuxt app:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@dev.icons/vue/nuxt"],
});

Tree-shaking

Named imports are ESM-first and fully tree-shakeable.

import { VueIcon } from "@dev.icons/vue";