Comment ajouter des icônes personnalisées dans React Native en 5

Gérer des 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 les frameworks modernes, ce qui rend le processus d'ajout ou de mise à jour d'icônes fastidieux et chronophage.

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

Pourquoi utiliser Monicon ?

• Énorme bibliothèque d'icônes : accédez à plus de 200 000 icônes provenant d'ensembles célèbres tels que Material Design, Feather et Font Awesome.
• 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 tels que Vite, Webpack, Rollup et autres, il est donc prêt pour n'importe quel projet.
• Rapide et efficace : Monicon charge les icônes rapidement pour assurer le bon déroulement de votre projet. Pas de scintillement ni de retard.
• Facile à utiliser : fonctionne avec React, Vue, Svelte, Next.js et d'autres frameworks populaires, ce qui simplifie l'intégration des icônes. Vous pouvez découvrir des icônes sur le site Icones.
• Personnalisable : vous pouvez facilement modifier la taille, la couleur et d'autres caractéristiques des icônes pour les 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. Iconify Figma Plugin vous permet d'utiliser des icônes directement dans Figma.
• Gratuit et Open Source : Monicon est gratuit et open source, vous pouvez donc l'utiliser dans n'importe quel projet sans restrictions.

? Documents Monicon
? Monicon GitHub

1. Créer 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 my-new-app par le nom de votre projet préféré.
• Lorsque vous y êtes invité, choisissez un modèle (par exemple, vide, vide (TypeScript) ou onglets).

2. Installer 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 Metro

Créez 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 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/icons.

Exemples d'icônes

• boussole.svg
• maison.svg

6. Mettre à jour app/(tabs)/_layout.tsx

Modifiez le fichier _layout.tsx comme suit :

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

7. Démarrez le serveur de développement

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

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

Final

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!