在 React Native 中管理自定義圖標可能具有挑戰(zhàn)性，尤其是使用 Fontello 或 Icomoon 等傳統(tǒng)工具時。這些工具通常缺乏與現(xiàn)代框架的動態(tài)集成，使得添加或更新圖標的過程變得繁瑣且耗時。

Monicon 為這些挑戰(zhàn)提供了現(xiàn)代化的解決方案，提供了靈活高效的方式來管理項目中的圖標。 Monicon 支持 React、React Native、Next.js、Vue、Nuxt、Svelte 等流行框架，簡化了集成自定義圖標的過程。通過訪問 Material Design、Feather 和 Font Awesome 等知名庫中的超過 200,000 個圖標，Monicon 確保您擁有實現(xiàn)無縫且強大的圖標管理體驗所需的所有工具。

為什么使用 Monicon？

• 巨大的圖標庫：訪問來自 Material Design、Feather 和 Font Awesome 等著名圖標集的超過 200,000 個圖標。
• 自定義圖標：您可以創(chuàng)建自定義圖標并在項目中使用它們。 Monicon 讓您可以輕松添加自己的圖標。
• 與現(xiàn)代工具配合使用：Monicon 支持 Vite、Webpack、Rollup 等工具，因此它可以用于任何項目。
• 快速高效：Monicon 快速加載圖標，讓您的項目順利運行。無閃爍或滯后。
• 易于使用：可與 React、Vue、Svelte、Next.js 和其他流行框架配合使用，使圖標集成變得簡單。您可以在 Icones 網(wǎng)站上找到圖標。
• 可定制：您可以輕松更改圖標的大小、顏色和其他功能以適合您的設計。
• 協(xié)作：Monicon 幫助您與設計師協(xié)作，加快設計流程并獲得更好的結果。 Iconify Figma 插件允許您直接在 Figma 中使用圖標。
• 免費開源：Monicon 是免費使用且開源的，因此您可以不受限制地在任何項目中使用它。

？ Monicon 文檔
？ Monicon GitHub

1. 創(chuàng)建一個新項目

在終端中運行以下命令來創(chuàng)建一個新的 Expo 項目：

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

• 將 my-new-app 替換為您喜歡的項目名稱。
• 出現(xiàn)提示時，選擇一個模板（例如，空白、空白 (TypeScript) 或選項卡）。

2.安裝依賴項

運行以下命令安裝必要的依賴項：

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

3. 創(chuàng)建Metro配置

創(chuàng)建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. 創(chuàng)建 Babel 配置

創(chuàng)建 babel.config.js 文件：

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

5. 將圖標添加到項目中

將自定義圖標添加到 asset/icons 文件夾中。

示例圖標

• 指南針.svg
• 房子.svg

6.更新app/(tabs)/_layout.tsx

修改_layout.tsx文件如下：

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

7. 啟動開發(fā)服務器

運行以下命令來啟動您的開發(fā)服務器：

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

最終的

以上是5 如何在React Native中添加自定義圖標的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！