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 or load them from a non-standard source. Below is an example of how to write and use a custom loader.

import { Loader } from "@monicon/loader";
 
export const fooLoader: Loader<void> = () => async () => {
  return {
    bar: '<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" class="lucide lucide-flask-conical"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>',
  };
};

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
 
export default defineConfig({
  plugins: [
    react(),
    monicon({
      customCollections: {
        foo: fooLoader(),
      },
    }),
  ],
});

Usage

Once your custom loader is set up, you can use the icons it provides in your React components:

src/App.tsx

import { Monicon } from "@monicon/react";
 
function App() {
  return (
    <main>
      <Monicon name="foo:bar" size={24} />
    </main>
  );
}
 
export default App;

Remote Collections Monorepo