[FileMaker]続・SVG形式の自作アイコン管理

以前、Qiitaの方で、SVGアイコンに関する記事をひっそりと投稿しておりました。
最近は、公式に提供されているIconnectorを使ってアイコン管理するようになったので、続編としてひっそりと紹介します。

まずは下ごしらえから...

Iconnectorをダウンロードしてファイルを開く

レイアウトの管理メニューを表示（ショートカット：Command + Shift + L）
Card フォルダ下の「Card » svg」レイアウトを開く
レイアウトモードに切り替える（ショートカット：Command + L）
画面外にEditボタンが用意されているので、移動させてレイアウトを保存

（ちなみに私はレコードの新規作成「Add」ボタンも追加しています）

Editボタンを押すと、表示されていたSVGアイコンの編集画面に切り替わる

内容を変更し保存する場合は確定ボタン、元に戻す場合はキャンセルボタンを押して
元のレイアウトに戻ることができる。

SVGアイコンを追加する

「Card » svg」レイアウトでレコード新規作成
Editボタンで編集画面へ

他のアイコンと同じように値を埋めていきます。

pathフィールドにsvgファイルのコードをコピペ
svg形式のファイルをテキストエディタで開くとXMLのコードが表示されるので、一旦それを全コピぺしてみます。

Name、Category、Tag を適宜設定する
確定ボタンを押して「Card » svg」レイアウトに戻り、アイコンが表示されていればまずはOK。

ちなみにこの画面ではWEBビューアでのプレビュー表示になるので、実際のボタンアイコンに登録して確認してます。
WEBビューアでは表示されてたけど、ボタンアイコンに設定すると色や大きさが変わらない、とかがありました?

なんかうまく表示されないときは...
pathの始めの方にある、width、height、viewBoxの値を調整してやるとうまく表示されることが多いです。

デフォルトで入っているアイコンのpathを参考にすると良いかと思います。

使ってみようIconnector

タグで共通のキーワードを入れておくと検索で絞り込めて便利ですよー

名前やカテゴリーでも自分好みにカスタマイズもできるので、アイコン素材の管理に重宝してます！
もちろんそのままでもとっても便利なので、Iconnectorダウンロードして使ってみましょー