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

Monicon 為這些挑戰(zhàn)提供了現(xiàn)代化的解決方案，提供了靈活且高效的方式來管理專案中的圖示。 Monicon 支援 React、React Native、Next.js、Vue、Nuxt、Svelte 等流行框架，簡化了整合自訂圖示的流程。透過存取 Material Design、Feather 和 Font Awesome 等知名庫中的超過 200,000 個(gè)圖標(biāo)，Monicon 確保您擁有實(shí)現(xiàn)無縫且強(qiáng)大的圖標(biāo)管理體驗(yàn)所需的所有工具。

為什麼要用 Monicon？

• 巨大的圖標(biāo)庫：訪問來自 Material Design、Feather 和 Font Awesome 等著名圖標(biāo)集的超過 200,000 個(gè)圖標(biāo)。
• 自訂圖示：您可以建立自訂圖示並在專案中使用它們。 Monicon 讓您可以輕鬆新增自己的圖示。
• 與現(xiàn)代工具搭配使用：Monicon 支援 Vite、Webpack、Rollup 等工具，因此它可以用於任何專案。
• 快速且有效率：Monicon 快速載入圖標(biāo)，讓您的專案順利運(yùn)作。無閃爍或滯後。
• 易於使用：可與 React、Vue、Svelte、Next.js 和其他流行框架配合使用，使圖示整合變得簡單。您可以在 Icones 網(wǎng)站上找到圖示。
• 可自訂：您可以輕鬆更改圖示的大小、顏色和其他功能以適合您的設(shè)計(jì)。
• 協(xié)作：Monicon 幫助您與設(shè)計(jì)師協(xié)作，加快設(shè)計(jì)流程並獲得更好的結(jié)果。 Iconify Figma 外掛程式可讓您直接在 Figma 中使用圖示。
• 免費(fèi)開源：Monicon 是免費(fèi)使用且開源的，因此您可以不受限制地在任何專案中使用它。

？ Monicon 文件
？ Monicon GitHub

1. 建立一個(gè)新項(xiàng)目

在終端機(jī)中執(zhí)行以下指令來建立一個(gè)新的 Expo 專案：

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

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

2.安裝依賴項(xiàng)

執(zhí)行以下命令安裝必要的依賴項(xiàng)：

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

3. 建立Metro配置

建立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. 建立 Babel 配置

建立 babel.config.js 檔案：

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

5. 將圖示加入項(xiàng)目中

將自訂圖示新增至 asset/icons 資料夾。

範(fàn)例圖示

• 指南針.svg
• 房子.svg

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

修改_layout.tsx檔案如下：

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

7. 啟動(dòng)開發(fā)伺服器

執(zhí)行以下命令來啟動(dòng)您的開發(fā)伺服器：

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

最終的

以上是5 如何在React Native中新增自訂圖標(biāo)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！