React

The React plugin generates React components (TSX or JSX) from your SVG icons.

Usage

monicon.config.ts

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

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

Options

`outputPath`

The directory where icon components will be generated.

Type: string | ((icon: Icon) => string | undefined)
Default: "src/components/icons"

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

// Static path
({ : "components/icons" });

// Dynamic path based on icon
({
  : () => {
    if (..("mdi:")) {
      return "components/icons/mdi";
    }
    return "components/icons";
  },
});

`format`

The output format for generated files.

Type: "jsx" | "tsx"
Default: "tsx"

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

// Generate JSX files
({ : "jsx" });

// Generate TSX files (default)
({ : "tsx" });

`componentName`

Customize the component name.

Type: (icon: Icon) => string | undefined
Default: ${icon.name}Icon

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

({
  : () => {
    // Custom naming logic
    return `Custom${.}`;
  },
});

`fileName`

Customize the file name.

Type: (icon: Icon) => string | undefined
Default: Slugified icon name

react({
  fileName: (icon) => {
    // Custom file naming
    return icon.name.toLowerCase().replace(":", "-");
  },
});

`prefix`

Add a prefix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: ""

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

// Static prefix
({ : "Icon" });

// Dynamic prefix
({
  : () => {
    return ..("mdi:") ? "Mdi" : "";
  },
});

`suffix`

Add a suffix to component names.

Type: string | ((icon: Icon) => string | undefined)
Default: "Icon"

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

// Static suffix
({ : "Component" });

// No suffix
({ : "" });

// Dynamic suffix
({
  : () => {
    return ..("outline") ? "Outline" : "Icon";
  },
});

Generated Output

For an icon mdi:home, the plugin generates:

src/components/icons/mdi/home.tsx

const HomeIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
      <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
    </svg>
  );
};

export default HomeIcon;

Usage in Components

src/App.tsx

import HomeIcon from "./components/icons/mdi/home";
import HeartIcon from "./components/icons/lucide/heart";

function App() {
  return (
    <div>
      <HomeIcon className="size-6" />
      <HeartIcon width={24} height={24} color="red" />
    </div>
  );
}

On this page