ひよこ通信係プレビュー
4枚個別生成版
1枚の画像を切り出すのではなく、生成された4枚の画像ファイルをそのまま別ファイルとして読み込みます。React/HTMLに戻す時も、この相対パスを状態に応じて切り替えるだけです。
通常表示
待機chick_idle.jpg
短点chick_dot.jpg
長点chick_dash.jpg
完了chick_done.jpgassets/chick/chick_idle.jpg などの相対パスをReact側の CHICK_IMAGES に入れれば使えます。プレビューではJPGを参照していますが、素材としてPNGも同梱しています。