Vue

The Vue plugin generates Vue 3 Single File Components (SFC) from your SVG icons.

Usage

monicon.config.ts

import {  } from "@monicon/core/plugins";
import {  } from "@monicon/core";

export default {
  : ["mdi:home", "lucide:heart"],
  : [
    ({
      : "src/components/icons",
      : "ts",
      : "Icon",
    }),
  ],
} satisfies ;

Options

`outputPath`

The directory where icon components will be generated.

Type: string | ((icon: Icon) => string | undefined)
Default: "src/components/icons"

import {  } from "@monicon/core/plugins";

// Static path
({ : "components/icons" })

// Dynamic path based on icon
({
  : () => {
    if (..("mdi:")) {
      return "components/icons/mdi";
    }
    return "components/icons";
  },
})

`template`

The script template type for generated components.

Type: "js" | "ts"
Default: "ts"

import {  } from "@monicon/core/plugins";

// TypeScript setup (default)
({ : "ts" })

// JavaScript setup
({ : "js" })

`componentName`

Customize the component name.

Type: (icon: Icon) => string | undefined
Default: ${icon.name}Icon

import {  } from "@monicon/core/plugins";

({
  : () => {
    return `Custom${.}`;
  },
})

`fileName`

Customize the file name.

Type: (icon: Icon) => string | undefined
Default: Slugified icon name

import {  } from "@monicon/core/plugins";

({
  : () => {
    return ..().(":", "-");
  },
})

`prefix`

Add a prefix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: ""

import {  } from "@monicon/core/plugins";

// Static prefix
({ : "Icon" })

// Dynamic prefix
({
  : () => {
    return ..("mdi:") ? "Mdi" : "";
  },
})

`suffix`

Add a suffix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: "Icon"

import {  } from "@monicon/core/plugins";

// Static suffix
({ : "Component" })

// No suffix
({ : "" })

Generated Output

For an icon mdi:home, the plugin generates:

src/components/icons/mdi/home.vue

<script setup lang="ts">
const props = defineProps();
</script>

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" v-bind="props">
    <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
  </svg>
</template>

<script lang="ts">
export default { name: "HomeIcon" };
</script>

Usage in Components

src/App.vue

<script setup lang="ts">
import HomeIcon from "./components/icons/mdi/home.vue";
import HeartIcon from "./components/icons/lucide/heart.vue";
</script>

<template>
  <div>
    <HomeIcon class="size-6" />
    <HeartIcon width="24" height="24" color="red" />
  </div>
</template>

On this page