※備忘録的にまとめ、生成AIで文章化し内容を確認してから掲載しています。
はじめに
Flutterでは標準でMaterial IconsやCupertino Iconsが利用できますが、プロジェクトによってはこれだけでは不足することがあります。そんなときに便利なのが「FlutterIcon」というサイトです。
FlutterIconの使い方
FlutterIconは、手持ちのSVGファイルをアップロードすることで、カスタムアイコンを使用するためのフォントファイル(.ttf)と、それとIconを組み合わせて定義するDartファイル(.dart)をダウンロードすることができます。
FlutterIconの公式サイトはこちら:
手順
- FlutterIconのサイトにアクセスします。
- 手持ちのSVGファイルをアップロードし、名前を編集する。
- カスタムアイコンを生成し、ダウンロードします。
- ダウンロードされるファイルには、フォントファイル(.ttf)とDartファイル(.dart)が含まれます。
これらのファイルをFlutterプロジェクトに組み込むことで、カスタムアイコンを使用することができます。
詳しい使い方については、以下の記事を参考にしてください(2024年5月時点でも同じ手順で利用可能でした):
商用利用可能なSVGアイコンサイト
ネット上には、商用利用可能なアイコンデータをSVG形式でダウンロードできるサイトがいくつかあります。これらのサイトを活用してカスタムアイコンを作成できます。ただし、利用規約を必ず確認してください。
デザイン上の注意点
Material Iconsと併せて他のデザインのアイコンを使う場合、デザイン的に問題が発生する可能性があります。見た目も含めて慎重に検討してから使用することをお勧めします。
まとめ
FlutterIconを使うことで、簡単にカスタムアイコンをFlutterプロジェクトに組み込むことができます。商用利用可能なSVGアイコンを活用し、自分のプロジェクトに最適なアイコンを見つけてください。
この記事が皆さんの参考になれば幸いです。