Die Verwaltung benutzerdefinierter Symbole in React Native kann eine Herausforderung sein, insbesondere bei herkömmlichen Werkzeugen wie Fontello oder Icomoon. In diesen Tools fehlt häufig eine dynamische Integration mit modernen Frameworks, wodurch sich die Symbole für umständliche und zeitaufwändige Symbole hinzufügen oder aktualisieren.

Monicon bietet eine moderne Lösung für diese Herausforderungen und bietet eine flexible und effiziente Möglichkeit, Symbole in Ihren Projekten zu verwalten. Monicon unterstützt beliebte Frameworks wie React, React Native, Next.js, VUE, NUXT, SETVELTE und More und vereinfacht den Prozess der Integration von benutzerdefinierten Symbolen. Mit Zugang zu über 200.000 Symbolen aus renommierten Bibliotheken wie Materialdesign, Feder und Schriftart stellt Monicon sicher, dass Sie alle Tools haben, die Sie für eine nahtlose und leistungsstarke Icon -Management -Erfahrung benötigen.

Warum Monicon verwenden?

• riesige Symbolbibliothek : Zugriff auf über 200.000 Symbole aus berühmten Sets wie Material Design, Feather und Schriftart.
• benutzerdefinierte icons : Sie können benutzerdefinierte Symbole erstellen und in Ihren Projekten verwenden. Monicon erleichtert es einfach, Ihre eigenen Symbole hinzuzufügen.
• arbeitet mit modernen Tools : Monicon unterstützt Tools wie Vite, Webpack, Rollup und andere, also ist es für jedes Projekt bereit.
• schnell und effizient : Monicon lädt schnell Symbole, um Ihr Projekt reibungslos zu halten. Kein Flackern oder Nachlagern.
• Einfach zu verwenden : Arbeitet mit React, Vue, Sufle, Next.js und anderen beliebten Frameworks, wodurch die Icon -Integration einfach ist. Sie können Symbole auf der Icones -Website entdecken.
• anpassbar : Sie können die Größe, Farbe und andere Funktionen der Symbole einfach ändern, um Ihr Design anzupassen.
• collaboration : Monicon hilft Ihnen, mit Designer zusammenzuarbeiten, um den Designprozess zu beschleunigen und bessere Ergebnisse zu erzielen. Iconify Figma Plugin ermöglicht es Ihnen, Symbole direkt in Figma zu verwenden.
• Free und Open Source : Monicon kann kostenlos und open Source verwendet, sodass Sie es in jedem Projekt ohne Einschränkungen verwenden können.

? Monicon docs
? Monicon Github

1. Erstellen Sie ein neues Projekt

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um ein neues Expo -Projekt zu erstellen:

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

• Ersetzen Sie My-New-App durch Ihren bevorzugten Projektnamen.
• Wenn Sie aufgefordert werden, wählen Sie eine Vorlage (z. B. leer, leer (Typscript) oder Registerkarten).

2. Installieren Sie Abhängigkeiten

Führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:

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

3. Erstellen Sie die Metro -Konfiguration

Erstellen Sie eine metro.config.js Datei:

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. Erstellen Sie Babel -Konfiguration

erstellen Sie eine babel.config.js Datei:

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

5. Icons zum Projekt hinzufügen

Fügen Sie Ihre benutzerdefinierten Symbole dem Ordner assets/icons hinzu.

Beispiel icons

• compass.svg
• House.svg

6. App/(Registerkarten)/_ layout.tsx aktualisieren

Ändern Sie die Datei _layout.tsx wie folgt:

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

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

7. Starten Sie den Entwicklungsserver

Führen Sie den folgenden Befehl aus, um Ihren Entwicklungsserver zu starten:

expo start

Finale