InstallationReact Native

Install Monicon with React Native

Setting up Monicon with React Native is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React Native project.

Install

To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.

npm i @monicon/native @monicon/metro @monicon/babel-plugin
 
# if you want react-native-web support
npm i @monicon/webpack

Now you should install the development dependency @iconify/json for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.

npm i -D @iconify/json
 
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather

Configure Metro

Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.

metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
 
const config = getDefaultConfig(__dirname);
 
const configWithMonicon = withMonicon(config, {
  icons: [
    "mdi:home",
    "feather:activity",
    "logos:active-campaign",
    "lucide:badge-check",
  ],
  // Load all icons from the listed collections
  collections: ["radix-icons"],
});
 
module.exports = configWithMonicon;
💡

The icons array in the monicon plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.

For a complete list of available icon sets, refer to the Icones website.

Configure Babel

Now you’ll need to configure Babel.

babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [["@monicon/babel-plugin"]],
  };
};

Configure Webpack (Optional)

If you are using Expo Router, skip this step.

If you want to use Monicon with React Native Web, you’ll need to configure Webpack.

webpack.config.js
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { MoniconPlugin } = require("@monicon/webpack");
 
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
 
  config.plugins.push(
    new MoniconPlugin({
      icons: [
        "mdi:home",
        "feather:activity",
        "logos:active-campaign",
        "lucide:badge-check",
      ],
      // Load all icons from the listed collections
      collections: ["radix-icons"],
    })
  );
 
  return config;
};

For bare React Native projects, you can use the @monicon/webpack plugin to configure Webpack.

webpack.config.js
module.exports = {
  plugins: [
    new MoniconPlugin({
      icons: [
        "mdi:home",
        "feather:activity",
        "logos:active-campaign",
        "lucide:badge-check",
      ],
      // Load all icons from the listed collections
      collections: ["radix-icons"],
    }),
  ],
};

Usage

You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.

src/App.tsx
import { View } from "react-native";
import { Monicon } from "@monicon/native";
 
function App() {
  return (
    <View>
      <Monicon name="mdi:home" />
      <Monicon name="logos:active-campaign" size={30} />
      <Monicon name="feather:activity" color="red" />
      <Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
    </View>
  );
}
 
export default App;

Next Steps

You’ve successfully set up Monicon with React Native! You can now explore more icon sets and customize your usage further.

QwikVue