在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