「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > 反応ネイティブカスタムアイコンを追加する5つのステップ

反応ネイティブカスタムアイコンを追加する5つのステップ

2025-04-17に投稿されました
ブラウズ:425

Reactネイティブのカスタムアイコンの管理は、特にFontelloやIcomoonなどの従来のツールで挑戦的です。これらのツールには、最新のフレームワークとの動的な統合が欠けていることが多く、アイコンを面倒で時間のかかるアイコンを追加または更新するプロセスを実現します。

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

なぜモニコンを使用するのか? を使用する理由

  • 巨大なアイコンライブラリ:マテリアルデザイン、フェザー、フォントのような有名なセットから200,000を超えるアイコンにアクセスしてください。
  • カスタムアイコン:カスタムアイコンを作成してプロジェクトで使用できます。モニコンにより、独自のアイコンを簡単に追加できます。
  • は最新のツールで動作します:MoniconはVite、Webpack、Rollupなどのツールをサポートしているため、プロジェクトの準備が整います。
  • 高速で効率的:モニコンはアイコンを迅速にロードして、プロジェクトをスムーズに実行し続けます。ちらつきや遅れはありません。
  • 使いやすい:React、Vue、Svelte、next.js、およびその他の一般的なフレームワークで動作し、アイコン統合をシンプルにします。 IconesのWebサイトでアイコンを見つけることができます。
  • カスタマイズ可能:デザインに合わせてアイコンのサイズ、色、その他の機能を簡単に変更できます。
  • Collaboration :Moniconは、デザイナーと協力して設計プロセスをスピードアップし、より良い結果を得るのに役立ちます。 ICONIFY FIGMAプラグインを使用すると、ICONをFigmaで直接使用できます。
  • 無料およびオープンソース:モニコンは無料でオープンソースであるため、制限なしにどのプロジェクトでも使用できます。

?モニコンドキュメント
?モニコンgithub

1.新しいプロジェクトを作成します

端末で次のコマンドを実行して、新しいエキスポプロジェクトを作成します。


npx create-expo-app my-new-app CD my-new-app
npx create-expo-app my-new-app
cd my-new-app
    my-new-appをお好みのプロジェクト名に置き換えます。
  • プロンプトが表示されたら、テンプレート(たとえば、空白、空白(タイプスクリプト)、またはタブ)を選択します。
2。依存関係をインストールします

次のコマンドを実行して、必要な依存関係をインストールします。


npm i -d @monicon/metro @monicon/babel -plugin @monicon/loader npx expoインストール @モニコン/ネイティブReact-native-svg
npx create-expo-app my-new-app
cd my-new-app
3。メトロ構成を作成します

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」)、 }、 });
npx create-expo-app my-new-app
cd my-new-app
4。Babel Configを作成します

babel.config.jsファイルを作成:


module.exports = function(api){ api.cache(true); 戻る { プリセット:["babel-preset-expo"]、 プラグイン:[["@Monicon/Babel-Plugin"]]、 }; };
npx create-expo-app my-new-app
cd my-new-app
5.プロジェクトにアイコンを追加します

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

例アイコン

    compass.svg
  • house.svg
6。アプリ/(タブ)/_ layout.tsxを更新します

_layout.tsxファイルを次のように変更します:


"@Monicon/Native"から{Monicon}をimport; ( )、、 }} /> ( )、、 }} />
npx create-expo-app my-new-app
cd my-new-app
7.開発サーバーを起動します

次のコマンドを実行して開発サーバーを起動します。


expo Start
npx create-expo-app my-new-app
cd my-new-app
ファイナル

How to add custom icons in React Native in 5

リリースステートメント この記事は、https://dev.to/oktaysenkan/how-to-add-custom-icons-in-the-custom-icons-in-2025-1g4b?1に転載されています。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3