Installation
Remix
Learn how to install and use Monicon in your Remix project
Installation
Install Monicon and its Vite plugin in your Remix project:
npm install @monicon/core @monicon/viteConfiguration
1. Create Monicon Config
Create a monicon.config.ts file in your project root:
import { , } from "@monicon/core/plugins";
import { } from "@monicon/core";
export default {
// Loads individual icons by icon name
: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
: ["lucide"],
: [
/**
* change the output path to your project config for example;
* - app/components/icons
* - src/components/icons
*/
({ : ["app/components/icons"] }),
({ : "app/components/icons" }),
],
} satisfies ;2. Configure Vite
Add the Monicon plugin to your vite.config.ts:
import { } from "vite";
import from "@monicon/vite";
export default ({
: [
// ... other plugins
(),
],
});Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your routes and components:
import type { MetaFunction } from "@remix-run/node";
import BadgeCheckIcon from "~/components/icons/lucide/badge-check";
import CloudDownloadIcon from "~/components/icons/lucide/cloud-download";
import HomeIcon from "~/components/icons/mdi/home";
import ActivityIcon from "~/components/icons/feather/activity";
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
<div className="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon className="size-10" />
<HomeIcon className="size-10" />
{/* if you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} color="blue" />
</div>
);
}