Svelte

The Svelte plugin generates Svelte components from your SVG icons.

Usage

monicon.config.ts

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

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

Options

`outputPath`

The directory where icon components will be generated.

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

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

// Static path
({ : "src/lib/components/icons" });

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

`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/lib/components/icons/mdi/home.svelte

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

Usage in Components

src/routes/+page.svelte

<script>
  import HomeIcon from "$lib/components/icons/mdi/home.svelte";
  import HeartIcon from "$lib/components/icons/lucide/heart.svelte";
</script>

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

On this page