【Flutter】オリジナルの画像をアイコンとして使用したい

Question

BottomNavigationBarに設定するアイコンに自前の画像を使用したいと思い
下記の記事を参考にやってみました。
参考記事

うまく表示がされせん。
icon generatorで

If image looks not as expected please convert to compound path manually.

とでるので、これが原因かもしれません。
しかし、変換はできていて、tffファイルもみた感じ問題なさそうでした。
![イ(68ba0c0379f60f20215c39abe08e2979.png)

/// Flutter icons SettingIcon
/// Copyright (C) 2020 by original authors @ fluttericon.com, fontello.com
/// This font was generated by FlutterIcon.com, which is derived from Fontello.
///
/// To use this font, place it in your fonts/ directory and include the
/// following in your pubspec.yaml
///
/// flutter:
///   fonts:
///    - family:  SettingIcon
///      fonts:
///       - asset: fonts/SettingIcon.ttf
///
/// 
/// * Linearicons Free, Copyright (C) Linearicons.com
///         Author:    Perxis
///         License:   CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
///         Homepage:  https://linearicons.com
///
import 'package:flutter/widgets.dart';

class SettingIcon {
  SettingIcon._();

  static const _kFontFam = 'SettingIcon';
  static const _kFontPkg = null;

  static const IconData setting_icon = IconData(0xe810, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

  fonts:
    - family: Schyler
      fonts:
      #   # - asset: fonts/Schyler-Regular.ttf
      #   # - asset: fonts/Schyler-Italic.ttf
        - asset: fonts/present.ttf
        - asset: fonts/setting.ttf
          # style: italic
  #   - family: Trajan Pro
  #     fonts:

Answer 1

変換前のSVGファイルをメモ帳などのテキストエディタで開いて、中身を確認してみて下さい。

もし、

• <path>属性が複数ある
• fillが設定されている

などの場合、それが原因の可能性が高いです。例えば以下のような感じです。

<svg xmlns="" viewBox="">
  <path fill="blue" d="xxxxxxxxxxxxxxxxxxxxxxxxx"/>
  <path fill="red" d="xxxxxxxxxxxxxxxxxxxxxxxxx"/>
  <path fill="yellow" d="xxxxxxxxxxxxxxxxxxxxxxxxx"/>
</svg>

この場合、Adobe Illustratorなどのベクター編集ソフトを使って、
以下のような、fill無し+複合パスの状態にする必要があると思います。

<svg xmlns="" viewBox="">
  <path d="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
</svg>

参考:

• https://stackoverflow.com/questions/62232602/custom-icon-for-flutter-app-show-this-error-of-convert-to-compound-path-manually

• https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images

---

追記 :

一応手元で試してみたところ、質問と同じエラーメッセージが出ていても、変換は成功しているケースが結構ありました。
なので、上記の回答は、表示崩れが起きた場合のみ参考にして下さい。

今回のように、「?」が表示されるのは、ttfファイルの配置や、pubspec.yamlの記述が間違っていると思うので、参考にしたというサイトを元に、もう一度確認し直してみて下さい。

もし直らない場合は、質問にttfファイルの配置場所とpubspec.yamlの中身などを追記して下さい。

Comments

[smilax]

変換には成功してると思うのですが、やはり読み込んでくれません。
コードを追加しました
tffファイルはルート直下のfont/に配置しています

[satokei]

fonts/ ではないでしょうか？

[smilax]

すみません、誤字です。fonts/に配置しています

[nskhei]

- family: Schyler
の部分を
- family: SettingIcon
に変えると、どうなりますか?

[smilax]

特に変わりはないです

[nskhei]

その状態で、
- asset: fonts/present.ttf
の部分をコメントアウトしてみてもダメでしょうか?

あと、この辺も試してみて下さい。
・ttfファイル名がsetting.ttfで間違いないことを確認
・flutter clean を実行してみる