Library

Monicon can be used programmatically as a library, giving you full control over icon generation in your build scripts, custom tooling, or any other project.

Installation

Install @monicon/core globally:

npm install @monicon/core -g

Basic Usage

Import the bootstrap function from @monicon/core and call it with your configuration:

scripts/generate-icons.ts

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

await ({
  // Loads individual icons by icon name
  : ["mdi:home", "feather:activity"],
  // Loads all icons from a collection
  : ["lucide"],
  : [
    ({ : ["src/components/icons"] }),
    ({ : "src/components/icons" }),
  ],
  : false, // Set to true for watch mode
});

Configuration

The bootstrap function accepts a configuration object with the following options:

Type Definition

import {  } from "@monicon/core";

Configuration Options

Option	Type	Default	Description
`icons`	`string[]`	`[]`	Array of individual icon names to load (e.g., `["mdi:home", "feather:activity"]`)
`collections`	`string[]`	`[]`	Array of complete icon collections to load (e.g., `["lucide", "heroicons"]`)
`plugins`	`MoniconPlugin[]`	`[]`	Array of plugins to process icons
`loaders`	`Record<string, ReturnType<Loader>>`	`{}`	Custom loaders for loading icons from different sources
`watch`	`boolean`	`false`	Enable watch mode to automatically regenerate icons on config changes

Using with Config File

The bootstrap function automatically loads your monicon.config.ts file if it exists, and merges it with any options you pass:

scripts/generate-icons.ts

import {  } from "@monicon/core";

// This will load monicon.config.ts and merge with the provided options
await ({
  : false, // Override watch mode
});

monicon.config.ts

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

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

Integration Examples

Custom Build Script

Create a custom build script that generates icons before building your app:

scripts/build.ts

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

async function () {
  .("Generating icons...");

  await ({
    : ["mdi:home", "feather:activity"],
    : [({ : "src/components/icons" })],
    : false,
  });

  .("Building application...");
  ("npm run build:app", { : "inherit" });
}

().(.);

package.json

{
  "scripts": {
    "build": "tsx scripts/build.ts"
  }
}

Pre-build Hook

Use Monicon in a pre-build hook:

package.json

{
  "scripts": {
    "prebuild": "tsx scripts/generate-icons.ts",
    "build": "vite build"
  }
}

scripts/generate-icons.ts

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

await ({
  : ["mdi:home", "feather:activity", "lucide:star"],
  : [({ : "src/components/icons" })],
  : false,
});

Watch Mode for Development

Use watch mode during development:

scripts/dev.ts

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

// Generate icons with watch mode
await ({
  : ["mdi:home", "feather:activity"],
  : [({ : "src/components/icons" })],
  : true,
});

.("Icon generator running in watch mode...");

On this page