Plugins
SVG
Export icons as raw SVG files
The SVG plugin exports your icons as raw SVG files, useful when you need standalone SVG files for design tools, documentation, or other purposes.
Usage
import { } from "@monicon/core/plugins";
import { } from "@monicon/core";
export default {
: ["mdi:home", "lucide:heart"],
: [
({
: "public/icons",
}),
],
} satisfies ;Options
outputPath
The directory where SVG files will be saved.
- Type:
string | ((icon: Icon) => string | undefined) - Default:
"src/components/icons"
import { } from "@monicon/core/plugins";
// Static path
({ : "public/icons" })
// Dynamic path based on icon
({
: () => {
if (..("mdi:")) {
return "public/icons/mdi";
}
return "public/icons";
},
})fileName
Customize the file name for each icon.
- Type:
string | ((icon: Icon) => string | undefined) - Default: Slugified icon name
import { svg } from "@monicon/core/plugins";
svg({
fileName: (icon) => {
// Custom file naming
return icon.name.toLowerCase().replace(":", "-");
},
})Generated Output
For an icon mdi:home, the plugin generates:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>Usage in HTML
<!-- Direct usage -->
<img src="/icons/mdi/home.svg" alt="Home" width="24" height="24" />
<!-- As background -->
<style>
.icon-home {
background-image: url("/icons/mdi/home.svg");
width: 24px;
height: 24px;
}
</style>