Gérer les icônes personnalisées dans React Native peut être difficile, en particulier avec des outils traditionnels comme Fontello ou IComoon. Ces outils manquent souvent d'intégration dynamique avec des cadres modernes, ce qui rend le processus d'ajout ou de mise à jour des icônes lourdes et longues.

Monicon offre une solution moderne à ces défis, offrant un moyen flexible et efficace de gérer les icônes dans vos projets. Prise en charge des cadres populaires comme React, React Native, Next.js, Vue, Nuxt, Svelte, etc., Monicon simplifie le processus d'intégration des icônes personnalisées. Avec accès à plus de 200 000 icônes de bibliothèques renommées telles que Material Design, Feather et Font Awesome, Monicon vous assure que vous avez tous les outils dont vous avez besoin pour une expérience de gestion des icônes sans couture et puissante.

Pourquoi utiliser monicon?

• Énorme bibliothèque d'icônes : accéder à plus de 200 000 icônes à partir d'ensembles célèbres comme la conception de matériaux, la plume et la police géniale.
• Icônes personnalisées : vous pouvez créer des icônes personnalisées et les utiliser dans vos projets. Monicon facilite l'ajout de vos propres icônes.
• fonctionne avec les outils modernes : Monicon prend en charge des outils comme Vite, WebPack, Rollup et autres, donc il est prêt pour tout projet.
• rapide et efficace : Monicon charge rapidement les icônes pour maintenir votre projet en douceur. Pas de scintillement ou de retard.
• facile à utiliser : fonctionne avec react, vue, svelte, next.js et autres frameworks populaires, ce qui rend l'intégration d'icône simple. Vous pouvez découvrir des icônes sur le site Web Icones.
• personnalisable : vous pouvez facilement modifier la taille, la couleur et les autres fonctionnalités des icônes pour s'adapter à votre conception.
• collaboration : Monicon vous aide à collaborer avec les concepteurs pour accélérer le processus de conception et obtenir de meilleurs résultats. Le plugin iconify Figma vous permet d'utiliser des icônes directement sur Figma.
• gratuit et open source : Monicon est gratuit à utiliser et open source, vous pouvez donc l'utiliser dans n'importe quel projet sans restrictions.

? Monicon Docs
? Monicon github

1. Créez un nouveau projet

Exécutez la commande suivante dans votre terminal pour créer un nouveau projet Expo:

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

• Remplacez ma nouvelle application par votre nom de projet préféré.
• Lorsque vous êtes invité, choisissez un modèle (par exemple, vierge, vierge (TypeScript), ou onglets).

2. Installez les dépendances

Exécutez la commande suivante pour installer les dépendances nécessaires:

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

3. Créer une configuration de métro

Créer un fichier metro.config.js:

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. Créer une configuration de babel

Créez un fichier babel.config.js:

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

5. Ajouter des icônes au projet

Ajoutez vos icônes personnalisées au dossier Assets / icônes.

Exemples icônes

• compass.svg
• house.svg

6. Mettre à jour l'application / (onglets) / _ Layout.tsx

Modifiez le fichier _layout.tsx comme suit:

import { Monicon } from "@monicon/native";

 (
      
    ),
  }}
/>
 (
      
    ),
  }}
/>

7. Démarrez le serveur de développement

Exécutez la commande suivante pour démarrer votre serveur de développement:

expo start

Final