So fügen Sie benutzerdefinierte Symbole in React Native in 5 hinzu

Die Verwaltung benutzerdefinierter Symbole in React Native kann eine Herausforderung sein, insbesondere mit herkömmlichen Tools wie Fontello oder Icomoon. Diesen Tools fehlt häufig die dynamische Integration in moderne Frameworks, was das Hinzufügen oder Aktualisieren von Symbolen umständlich und zeitaufwändig macht.

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, Svelte und mehr und vereinfacht den Prozess der Integration benutzerdefinierter Symbole. Mit Zugriff auf über 200.000 Symbole aus renommierten Bibliotheken wie Material Design, Feather und Font Awesome stellt Monicon sicher, dass Sie über alle Tools verfügen, die Sie für eine nahtlose und leistungsstarke Symbolverwaltung benötigen.

Warum Monicon verwenden?

• Riesige Icon-Bibliothek: Erhalten Sie Zugriff auf über 200.000 Icons aus berühmten Sets wie Material Design, Feather und Font Awesome.
• Benutzerdefinierte Symbole: Sie können benutzerdefinierte Symbole erstellen und diese in Ihren Projekten verwenden. Mit Monicon können Sie ganz einfach Ihre eigenen Symbole hinzufügen.
• Funktioniert mit modernen Tools: Monicon unterstützt Tools wie Vite, Webpack, Rollup und andere und ist daher für jedes Projekt bereit.
• Schnell und effizient: Monicon lädt Symbole schnell, damit Ihr Projekt reibungslos läuft. Kein Flackern oder Verzögerungen.
• Einfach zu verwenden: Funktioniert mit React, Vue, Svelte, Next.js und anderen beliebten Frameworks und vereinfacht die Symbolintegration. Sie können Icons auf der Icones-Website entdecken.
• Anpassbar: Sie können die Größe, Farbe und andere Funktionen der Symbole ganz einfach ändern, um sie an Ihr Design anzupassen.
• Zusammenarbeit: Monicon hilft Ihnen bei der Zusammenarbeit mit Designern, um den Designprozess zu beschleunigen und bessere Ergebnisse zu erzielen. Mit dem Iconify Figma Plugin können Sie Symbole direkt in Figma verwenden.
• Kostenlos und Open Source: Monicon ist kostenlos und Open Source, sodass Sie es ohne Einschränkungen in jedem Projekt 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 meine-neue-App durch Ihren bevorzugten Projektnamen.
• Wenn Sie dazu aufgefordert werden, wählen Sie eine Vorlage (z. B. leer, leer (TypeScript) oder Tabulatoren).

2. Abhängigkeiten installieren

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 eine 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 die 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. Fügen Sie dem Projekt Symbole hinzu

Fügen Sie Ihre benutzerdefinierten Symbole zum Ordner „assets/icons“ hinzu.

Beispielsymbole

• compass.svg
• house.svg

6. Aktualisieren Sie app/(tabs)/_layout.tsx

Ändern Sie die Datei _layout.tsx wie folgt:

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

7. Starten Sie den Entwicklungsserver

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

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

Finale

Das obige ist der detaillierte Inhalt vonSo fügen Sie benutzerdefinierte Symbole in React Native in 5 hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!