実験：ツールバーにアイコンを追加

[sevenc-nanashi]

内容

ツールバーにアイコンを足してみるテストです。
アイコン周りはスマホ版から持ってきました。

関連 Issue

（なし）

スクリーンショット・動画など

その他

（なし）

[voicevox-preview-pages]

🚀 プレビュー用ページを作成しました 🚀

• 📝 エディタ
• 📖 Storybook

更新時点でのコミットハッシュ：5fd0311

[Hiroshiba]

おー！！　実装する方針で考えたいですね！！

ちょっとジャストアイデアですがコメントまで 🙏

• svgはアイコンごとに保存しておいたほうが管理しやすいかも
• ちなみにアイコンの種類って今VOICEVOXが使ってるのと一緒でしょうか
  • 違ってると雰囲気崩れる気もするので
  • matexでアイコンの種類も選べると非常に最高かも
  • いろんなアイコンセットが扱えるiconifyなるものもあるらしいです
    • @romot-co さんがおっしゃるMaterialSymbolsが含まれてるかぱっとわからなかった

[sevenc-nanashi]

svgはアイコンごとに保存しておいたほうが管理しやすいかも

（正直特に変わらないと思います）

ちなみにアイコンの種類って今VOICEVOXが使ってるのと一緒でしょうか

Material Design Iconsですね。基本的に同じのはず？

matexでアイコンの種類も選べると非常に最高かも

Material Design Iconsのスタイルは対応してます（outlined/filled/twotone/rounded/sharp）

[Hiroshiba]

svgはアイコンごとに保存しておいたほうが管理しやすいかも

（正直特に変わらないと思います）

んー　例えば今svgファイルにどのようなデータが入っているか確認できないんですよねー。。。

一番良いのは、テキストとアイコンが対応して並んでいるのを確認できることな気がしますね！
ということでStorybookで全てのボタンを並べるとかどうでしょう？
一覧になっていると視認性が良くないのとか不揃いなものを確認しやすそうだなと。

もし難しそうであればアイコンそれぞれ分離してsvgファイルとして確認できるようになっていれば良さそう！

ちなみに多層化されている？svgファイルのそれぞれを可視化する方法ってあったりするんですか？
chromeで見ても見えないなぁと。

Material Design Iconsですね。基本的に同じのはず？
Material Design Iconsのスタイルは対応してます（outlined/filled/twotone/rounded/sharp）

なるほどです！！　一旦良さそうな気がしました！！

---

ちなみになのですが、右下にスタックされている画像のサイズをちょっと変えられたりとかってできますか 👀
Maeterial Iconをお手本にすると、もうほんの少しだけ大きそう！（まあ割とものによって違いそう）

あと可能なら正方形切り抜きだけでなく、丸切り抜きとか、あと可能なら外周に枠線ある感じとかもできるとすごい綺麗になりそう！！！
まあそのあたりどうするかともかく、進行する方針で良さそうな気がしてます！