5 の React Native にカスタム アイコンを追加する方法

React Native でのカスタム アイコンの管理は、特に Fontello や Icomoon などの従来のツールを使用する場合、困難な場合があります。これらのツールには最新のフレームワークとの動的な統合が欠けていることが多く、アイコンの追加または更新のプロセスが面倒で時間がかかります。

Monicon はこれらの課題に対する最新のソリューションを提供し、プロジェクト内のアイコンを柔軟かつ効率的に管理する方法を提供します。 React、React Native、Next.js、Vue、Nuxt、Svelte などの一般的なフレームワークをサポートする Monicon は、カスタム アイコンの統合プロセスを簡素化します。マテリアル デザイン、フェザー、Font Awesome などの有名なライブラリから 200,000 個を超えるアイコンにアクセスできる Monicon は、シームレスで強力なアイコン管理エクスペリエンスに必要なツールをすべて備えています。

モニコンを使用する理由

• 巨大なアイコン ライブラリ: マテリアル デザイン、フェザー、Font Awesome などの有名なセットから 200,000 個を超えるアイコンにアクセスできます。
• カスタム アイコン: カスタム アイコンを作成し、プロジェクトで使用できます。 Monicon を使用すると、独自のアイコンを簡単に追加できます。
• 最新のツールと連携: Monicon は Vite、Webpack、Rollup などのツールをサポートしているため、あらゆるプロジェクトに対応できます。
• 高速かつ効率的: Monicon はアイコンを迅速にロードして、プロジェクトをスムーズに実行し続けます。ちらつきや遅延はありません。
• 使いやすい: React、Vue、Svelte、Next.js、その他の一般的なフレームワークで動作し、アイコンの統合が簡単になります。アイコンは Icones の Web サイトで見つけることができます。
• カスタマイズ可能: デザインに合わせてアイコンのサイズ、色、その他の機能を簡単に変更できます。
• コラボレーション: Monicon は、デザイナーとのコラボレーションを支援して、デザイン プロセスをスピードアップし、より良い結果を得ることができます。 Iconify Figma プラグインを使用すると、Figma で直接アイコンを使用できるようになります。
• 無料およびオープンソース: 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. プロジェクトにアイコンを追加する

カスタム アイコンをアセット/アイコン フォルダーに追加します。

アイコンの例

• コンパス.svg
• house.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 中国語 Web サイトの他の関連記事を参照してください。