0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FlutterでSVGカスタムアイコンを使う

Last updated at Posted at 2024-05-21

※備忘録的にまとめ、生成AIで文章化し内容を確認してから掲載しています。

はじめに

Flutterでは標準でMaterial IconsやCupertino Iconsが利用できますが、プロジェクトによってはこれだけでは不足することがあります。そんなときに便利なのが「FlutterIcon」というサイトです。

FlutterIconの使い方

FlutterIconは、手持ちのSVGファイルをアップロードすることで、カスタムアイコンを使用するためのフォントファイル(.ttf)と、それとIconを組み合わせて定義するDartファイル(.dart)をダウンロードすることができます。

FlutterIconの公式サイトはこちら:

手順

  1. FlutterIconのサイトにアクセスします。
  2. 手持ちのSVGファイルをアップロードし、名前を編集する。
  3. カスタムアイコンを生成し、ダウンロードします。
    • ダウンロードされるファイルには、フォントファイル(.ttf)とDartファイル(.dart)が含まれます。

IMG_0420.jpeg

これらのファイルをFlutterプロジェクトに組み込むことで、カスタムアイコンを使用することができます。

詳しい使い方については、以下の記事を参考にしてください(2024年5月時点でも同じ手順で利用可能でした):

商用利用可能なSVGアイコンサイト

ネット上には、商用利用可能なアイコンデータをSVG形式でダウンロードできるサイトがいくつかあります。これらのサイトを活用してカスタムアイコンを作成できます。ただし、利用規約を必ず確認してください。

デザイン上の注意点

Material Iconsと併せて他のデザインのアイコンを使う場合、デザイン的に問題が発生する可能性があります。見た目も含めて慎重に検討してから使用することをお勧めします。

まとめ

FlutterIconを使うことで、簡単にカスタムアイコンをFlutterプロジェクトに組み込むことができます。商用利用可能なSVGアイコンを活用し、自分のプロジェクトに最適なアイコンを見つけてください。


この記事が皆さんの参考になれば幸いです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?