How to add custom icons in React Native in 5

Managing custom icons in React Native can be challenging, especially with traditional tools like Fontello or Icomoon. These tools often lack dynamic integration with modern frameworks, making the process of adding or updating icons cumbersome and time-consuming.

Monicon offers a modern solution to these challenges, providing a flexible and efficient way to manage icons in your projects. Supporting popular frameworks like React, React Native, Next.js, Vue, Nuxt, Svelte, and more, Monicon simplifies the process of integrating custom icons. With access to over 200,000 icons from renowned libraries such as Material Design, Feather, and Font Awesome, Monicon ensures you have all the tools you need for a seamless and powerful icon management experience.

Why Use Monicon?

• Huge Icon Library: Get access to over 200,000 icons from famous sets like Material Design, Feather, and Font Awesome.
• Custom Icons: You can create custom icons and use them in your projects. Monicon makes it easy to add your own icons.
• Works with Modern Tools: Monicon supports tools like Vite, Webpack, Rollup, and others, so it's ready for any project.
• Fast and Efficient: Monicon loads icons quickly to keep your project running smoothly. No flickering or lagging.
• Easy to Use: Works with React, Vue, Svelte, Next.js, and other popular frameworks, making icon integration simple. You can discover icons on the Icones website.
• Customizable: You can easily change the size, color, and other features of the icons to fit your design.
• Collaboration: Monicon helps you collaborate with designers to speed up the design process and get better results. Iconify Figma Plugin allows you to use icons directly in Figma.
• Free and Open Source: Monicon is free to use and open source, so you can use it in any project without restrictions.

? Monicon Docs
? Monicon GitHub

1. Create a New Project

Run the following command in your terminal to create a new Expo project:

npx create-expo-app my-new-app
cd my-new-app

• Replace my-new-app with your preferred project name.
• When prompted, choose a template (e.g., blank, blank (TypeScript), or tabs).

2. Install Dependencies

Run the following command to install necessary dependencies:

npm i -D @monicon/metro @monicon/babel-plugin @monicon/loader
npx expo install @monicon/native  react-native-svg

3. Create Metro Config

Create a metro.config.js file:

const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
const { loadLocalCollection } = require("@monicon/loader");

const config = getDefaultConfig(__dirname);

module.exports = withMonicon(config, {
  customCollections: {
    "my-app": loadLocalCollection("assets/icons"),
  },
});

4. Create Babel Config

Create a babel.config.js file:

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

5. Add Icons to the Project

Add your custom icons to the assets/icons folder.

Example Icons

• compass.svg
• house.svg

6. Update app/(tabs)/_layout.tsx

Modify the _layout.tsx file as follows:

npx create-expo-app my-new-app
cd my-new-app

7. Start the Development Server

Run the following command to start your development server:

npm i -D @monicon/metro @monicon/babel-plugin @monicon/loader
npx expo install @monicon/native  react-native-svg

Final

The above is the detailed content of How to add custom icons in React Native in 5. For more information, please follow other related articles on the PHP Chinese website!