Universal Build Tool

Learn how to use Monicon in universal build tools projects like Swift, Kotlin, etc.

Monicon can generate SVG icons for any project, regardless of the programming language. This guide shows you how to use Monicon as a build step to generate icon files that can be used in Swift, Kotlin, etc.

Installation

Install the Monicon Core

npm install @monicon/core tsx -g

Usage

Create a generate-icons.js file to generate icons:

generate-icons.js

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

await bootstrap({
  // Loads individual icons by icon name
  icons: ["mdi:home", "feather:activity"],
  // Loads all icons from a collection
  collections: ["lucide"],
  plugins: [
    clean({ patterns: ["assets/icons"] }),
    svg({ outputPath: "assets/icons" }),
  ],
  watch: false,
});

Using a Config File (Optional)

If you prefer to use a separate config file (useful for watch mode), create a monicon.config.js file:

monicon.config.js

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

export default {
  icons: ["mdi:home", "feather:activity"],
  collections: ["lucide"],
  plugins: [
    clean({ patterns: ["assets/icons"] }),
    svg({ outputPath: "assets/icons" }),
  ],
  watch: true,
};

Then your build script can simply call bootstrap():

generate-icons.js

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

bootstrap();

Running the Build

Run the build script to generate SVG files:

tsx generate-icons.js

This will generate SVG files in the configured output path (assets/icons in the example above).

Example Output

After running the build script, you'll have SVG files in your output directory:

assets/icons/
├── mdi/
│   └── home.svg
├── feather/
│   └── activity.svg
└── lucide/
    └── badge-check.svg
    └── cloud-download.svg
    └── ...