Generic

The Generic plugin is a flexible base plugin that allows you to create custom file outputs from your icons. You can control the file path, name, extension, and content, making it perfect for custom integrations or specialized icon formats.

Usage

monicon.config.ts

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

export default {
  : ["mdi:home", "lucide:heart"],
  : [
    ({
      : "custom-plugin",
      : "public/icons",
      : "txt",
      : () => `Icon: ${.}\nSVG: ${.}`,
    }),
  ],
} satisfies ;

Options

`name`

The name of your custom plugin instance (useful for debugging and logging).

Type: string
Default: "monicon-generic-plugin"

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

({
  : "my-custom-icon-plugin",
  : () => .,
});

`outputPath`

The directory where 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 (e.g., mdi:home becomes mdi/home)

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

({
  : () => {
    // Custom file naming
    return ..().(":", "-");
  },
  : () => .,
});

`extension`

Set the file extension for the generated files.

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

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

// Static extension
({
  : "txt",
  : () => .,
});

// Dynamic extension based on icon
({
  : () => {
    return ..("mdi:") ? "xml" : "txt";
  },
  : () => .,
});

`content`

The content to write to each file. This is a required option.

Type: string | ((icon: Icon) => string)
Required: false

[!NOTE] If no content is provided, the plugin will log a warning and skip the icon.

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

// Static content
({
  : "Hello World",
});

// Dynamic content based on icon
({
  : () => {
    return `Name: ${.}\nSVG: ${.}`;
  },
});

Examples

Create JSON Metadata Files

Generate JSON files with icon metadata:

monicon.config.ts

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

export default {
  : ["mdi:home", "lucide:heart"],
  : [
    ({
      : "icon-metadata",
      : "public/icons/metadata",
      : "json",
      : () => {
        return .(, null, 2);
      },
    }),
  ],
} satisfies ;

Use Cases

The Generic plugin is perfect for:

Custom file formats - Generate icons in formats not supported by other plugins
Metadata generation - Create companion files with icon information
Documentation - Generate documentation or reference files from icons
Testing - Create test fixtures or sample data
Integration - Build custom outputs for specific tools or frameworks
Logging - Create text files that log icon information after processing

Advanced Usage

You can use the Generic plugin to build your own specialized plugins:

my-plugin.ts

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

type  = <{ ?: string }>;

export const : <> = () =>
  ({
    : "my-custom-plugin",
    () {
      .("afterGenerate", );
    },
  });

({ : "bar" });

On this page