Installation
React Native
Learn how to install and use Monicon in your React Native project
Installation
Install Monicon and its Metro plugin in your React Native project:
npm install @monicon/core @monicon/metro react-native-svgreact-native-svg is required for rendering SVG icons in React Native.
Configuration
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;
* - components/icons
* - src/components/icons
*/
({ : ["components/icons"] }),
({ : "components/icons" }),
],
} satisfies ;2. Configure Metro
Update your metro.config.js to use the Monicon Metro plugin:
const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
const config = getDefaultConfig(__dirname);
const configWithMonicon = withMonicon(config);
module.exports = configWithMonicon;Usage
After configuration, Monicon will automatically generate React Native components for your icons. You can import and use them in your components:
import { StyleSheet, View } from "react-native";
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 default function HomeScreen() {
return (
<View style={styles.container}>
<BadgeCheckIcon color="aqua" width={32} height={32} />
<CloudDownloadIcon color="aqua" width={32} height={32} />
<ActivityIcon color="aqua" width={32} height={32} />
<HomeIcon color="aqua" width={32} height={32} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
},
});