5 如何在React Native中新增自訂圖標

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

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

為什麼要用 Monicon？

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

？ Monicon 文件
？ Monicon GitHub

1. 建立一個新項目

在終端機中執行以下指令來建立一個新的 Expo 專案：

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

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

2.安裝依賴項

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

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. 將圖示加入項目中

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

範例圖示

• 指南針.svg
• 房子.svg

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

修改_layout.tsx檔案如下：

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

7. 啟動開發伺服器

執行以下命令來啟動您的開發伺服器：

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

最終的

以上是5 如何在React Native中新增自訂圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！