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フォルダーに追加します。
例アイコン
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
ファイナル