Heim > Web-Frontend > js-Tutorial > So fügen Sie benutzerdefinierte Symbole in React Native in 5 hinzu

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

Barbara Streisand
Freigeben: 2024-11-30 01:58:12
Original
185 Leute haben es durchsucht

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
Nach dem Login kopieren
Nach dem Login kopieren
  • 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
Nach dem Login kopieren
Nach dem Login kopieren

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"),
  },
});
Nach dem Login kopieren

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"]],
  };
};
Nach dem Login kopieren

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
Nach dem Login kopieren
Nach dem Login kopieren

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
Nach dem Login kopieren
Nach dem Login kopieren

Finale

How to add custom icons in React Native in 5

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage