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!