Flourish studioの ピクトグラム icon

ピクトグラムグラフの表示サンプル

Flourish studioのPictogramがかわいい
けど、アイコン変えたい。

How to use this template には、こう書かれている。

Either a string containing the name of a built-in icon (e.g. "cat", "dog") or an SVG path string (e.g. "M10, 10 l90,0 l0,90 l-90,0 z".

名前で設定できる名前の一覧はここiconの項目にあるが、やっぱ足りない。作らなきゃ。

illustratorでアイコンを作り

アプリけーしょlんillustratorでアイコンを作ってるところ

AVG形式で保存をして、それをテキストエディタで開いてみた
path dの値、M から Z までの文字列、これが「SVG path string」となる

テキストエディタを開いて、必要な部分の文字列を選択しているところ

コピーした文字列をicon テーブルのiconフィールドにペーストし、サイズも調整する

Flourish studio管理画面

プレビューすると、作ったアイコンが表示された

Flourish studio表示プレビュー
作ったアイコンが反映されている

アイコン使えるサービスサイトもありがたい〜

vectorのアイコンをダウンロードできるサービスいろいろあるなかのひとつ、icons8.com
SVGでダウンロードしてエディタを表示したところ