React Native

The React Native plugin generates React Native components using react-native-svg from your SVG icons.

Usage

monicon.config.ts

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

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

Make sure you have react-native-svg installed in your project.

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";

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

`fileName`

Customize the file name.

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

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

({
  : () => {
    return ..().(":", "-");
  },
});

`prefix`

Add a prefix to component names.

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

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

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

`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
({ : "" });

Generated Output

For an icon mdi:home, the plugin generates:

components/icons/mdi/home.tsx

import React from "react";
import { SvgXml, type SvgProps } from "react-native-svg";

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

  return <SvgXml xml={xml} {...props} />;
};

export default HomeIcon;

Usage in Components

app/(tabs)/index.tsx

import { View, StyleSheet } from "react-native";
import HomeIcon from "@/components/icons/mdi/home";
import HeartIcon from "@/components/icons/lucide/heart";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <HomeIcon width={32} height={32} color="blue" />
      <HeartIcon width={32} height={32} color="red" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
  },
});

On this page