Bagaimana untuk menambah ikon tersuai dalam React Native dalam 5

Mengurus ikon tersuai dalam React Native boleh menjadi mencabar, terutamanya dengan alatan tradisional seperti Fontello atau Icomoon. Alat ini selalunya tidak mempunyai penyepaduan dinamik dengan rangka kerja moden, menjadikan proses menambah atau mengemas kini ikon menyusahkan dan memakan masa.

Monicon menawarkan penyelesaian moden untuk cabaran ini, menyediakan cara yang fleksibel dan cekap untuk mengurus ikon dalam projek anda. Menyokong rangka kerja popular seperti React, React Native, Next.js, Vue, Nuxt, Svelte dan banyak lagi, Monicon memudahkan proses penyepaduan ikon tersuai. Dengan akses kepada lebih 200,000 ikon daripada perpustakaan terkenal seperti Material Design, Feather dan Font Awesome, Monicon memastikan anda mempunyai semua alatan yang anda perlukan untuk pengalaman pengurusan ikon yang lancar dan berkuasa.

Mengapa Gunakan Monicon?

• Perpustakaan Ikon Besar: Dapatkan akses kepada lebih 200,000 ikon daripada set terkenal seperti Reka Bentuk Bahan, Bulu dan Font Hebat.
• Ikon Tersuai: Anda boleh mencipta ikon tersuai dan menggunakannya dalam projek anda. Monicon memudahkan untuk menambah ikon anda sendiri.
• Berfungsi dengan Alat Moden: Monicon menyokong alatan seperti Vite, Webpack, Rollup dan lain-lain, jadi ia sedia untuk sebarang projek.
• Pantas dan Cekap: Monicon memuatkan ikon dengan cepat untuk memastikan projek anda berjalan lancar. Tiada kelipan atau ketinggalan.
• Mudah Digunakan: Berfungsi dengan React, Vue, Svelte, Next.js dan rangka kerja popular lain, menjadikan penyepaduan ikon mudah. Anda boleh menemui ikon di tapak web Icones.
• Boleh disesuaikan: Anda boleh menukar saiz, warna dan ciri ikon lain dengan mudah agar sesuai dengan reka bentuk anda.
• Kerjasama: Monicon membantu anda bekerjasama dengan pereka bentuk untuk mempercepatkan proses reka bentuk dan mendapatkan hasil yang lebih baik. Iconify Figma Plugin membolehkan anda menggunakan ikon terus dalam Figma.
• Percuma dan Sumber Terbuka: Monicon adalah percuma untuk digunakan dan sumber terbuka, jadi anda boleh menggunakannya dalam mana-mana projek tanpa sekatan.

? Dokumen Monicon
? Monicon GitHub

1. Buat Projek Baharu

Jalankan arahan berikut dalam terminal anda untuk mencipta projek Ekspo baharu:

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

• Gantikan apl baharu saya dengan nama projek pilihan anda.
• Apabila digesa, pilih templat (cth., kosong, kosong (TypeScript) atau tab).

2. Pasang Ketergantungan

Jalankan arahan berikut untuk memasang kebergantungan yang diperlukan:

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

3. Cipta Metro Config

Buat fail 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. Cipta Babel Config

Buat fail babel.config.js:

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

5. Tambah Ikon pada Projek

Tambahkan ikon tersuai anda pada folder aset/ikon.

Contoh Ikon

• compass.svg
• house.svg

6. Kemas kini apl/(tab)/_layout.tsx

Ubah suai fail _layout.tsx seperti berikut:

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

7. Mulakan Pelayan Pembangunan

Jalankan arahan berikut untuk memulakan pelayan pembangunan anda:

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

Akhir

Atas ialah kandungan terperinci Bagaimana untuk menambah ikon tersuai dalam React Native dalam 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!