2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【パッケージ紹介】FlutterのアイコンはIconifyも使える

Last updated at Posted at 2024-11-09

スクリーンショット 2024-11-09 111937.png

今回紹介するパッケージ

install

flutter pub add iconify_flutter

yaml

dependencies:
  iconify_flutter: ^0.0.7

Iconifyとは

Iconifyは、以下のような特徴を持つアイコンセットフレームワーク
Figmaにプラグインがあるので、知っている人もいるのではないでしょうか?

  • 多様なアイコンセットがある
  • 膨大なアイコンセットを混在させて使用できる
  • 150,000個以上のオープンソースベクターアイコンが利用可能
  • 必要なアイコンのみをロードするため、リソースを節約できる
  • Figmaの便利なプラグインが提供されている
  • アイコンの検索や選択が容易で、複数のライブラリから横断的に探すことが可能

使い方

下記サイトから使いたいアイコンを見つける

今回はmdiLightのemailアイコンを使ってみます

スクリーンショット 2024-11-09 110613.png

パッケージをインポートする

import 'package:iconify_flutter/iconify_flutter.dart'; // Iconifyウィジェットを使うためにインポート

使う

  • アイコンをクリックするとインポート方法が記載されているのでそのままコピペしましょう
  • IconifyはWidget型のクラスで、引数にColor? colorや、double? sizeを取れます
import 'package:iconify_flutter/iconify_flutter.dart';
import 'package:iconify_flutter/icons/mdi_light.dart';

      Iconify(
        MdiLight.email,
        color: Colors.blueAccent, // Color?型
        size: 40, // double?型
      )

スクリーンショット 2024-11-09 111213.png
こんな感じで表示されます!

注意

アイコンによっては、表示されないものもあります。
パッケージの開発者さん的にはもっとパッケージが有名になってほしいようなので
repositoryにissue立ててあげるといいかもしれません

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?