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

為什麼使用monicon？

巨大的圖標庫：從材料設計，羽毛和字體等著名集中獲取超過200,000個圖標。

• 自定義圖標：您可以創建自定義圖標並在項目中使用它們。 Monicon使添加您自己的圖標變得容易。
與現代工具
• 一起工作：Monicon支持Vite，Webpack，crolup等工具，因此可以適合任何項目。 快速有效
：Monicon快速加載圖標，以使您的項目順利運行。沒有閃爍或滯後。
• 易於使用
：與React，Vue，Svelte，Next.js和其他流行的框架一起使用，使圖標集成變得簡單。您可以在ICONES網站上發現圖標。
• ：您可以輕鬆地更改圖標的大小，顏色和其他功能以適合您的設計。
協作
• ：Monicon可幫助您與設計人員的協作加快設計過程並獲得更好的結果。 Iconify Figma插件允許您直接在Figma中使用圖標。
免費和開源
• ：Monicon是免費使用和開源的，因此您可以在任何項目中使用它。
？ monicon docs
• ？ monicon github
1。創建一個新項目
• 在您的終端中運行以下命令以創建一個新的博覽會項目：

NPX create-expo-app my-new-app CD my-new-app

用您首選的項目名稱替換My-New-App。
提示時，選擇一個模板（例如，空白，空白（typescript）或選項卡）。

2。安裝依賴項

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

NPX Expo install @monicon/本機反應 - 新svg

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

3。創建Metro配置

• 創建一個Metro.config.js文件：

4。創建babel配置

創建一個babel.config.js文件：

module.exports =函數（api） api.cache（true）; 返回 { 預設：[“ babel-preset-expo”]， 插件：[[“@monicon/babel-plugin”]，]， }; };

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

5。在項目中添加圖標

將您的自定義圖標添加到資產/圖標文件夾中。

示例圖標

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"),
  },
});

6。更新app/（tabs）/_ layout.tsx

修改_layout.tsx文件如下：

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"),
  },
});

從“@monicon/本機”導入{monicon}; （ ）， }}} /> （ ）， }}} />

7。啟動開發服務器

運行以下命令以啟動開發服務器：

• Expo開始
• 最終的
[2