Custom Loader

Custom loaders in Monicon allow you to define your own logic for providing SVG icons. This is especially useful when you want to generate icons dynamically, transform existing icons, or load them from a non-standard source.

Creating a Custom Loader

A custom loader is a function that returns an async function which returns an object mapping icon names to SVG strings:

loaders/custom.ts

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

export const : <void> = () => async () => {
  // your custom logic here
  return {
    :
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
  };
};

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

Usage

After configuration, Monicon will generate components for your custom icons:

src/App.tsx

import StarIcon from "./components/icons/custom/star";
import HeartIcon from "./components/icons/custom/heart";

function App() {
  return (
    <main>
      <StarIcon className="size-6" />
      <HeartIcon className="size-6" />
    </main>
  );
}

export default App;

Creating a Custom Loader

Usage

On this page