デザイン部所属のフロントエンドエンジニア竹内美帆です。 アットコスメでは、グラフィカルなものよりUIを構成するのにアイコンを利用することが多いです。アイコンは、Retinaディスプレイでもガビガビにならずに表示できるSVGでの実装が主流です。 現在、開発効率アップとUI統一の基盤ということで、いろんなサービスで利用されるであろう共通アイコンを社内向けにパッケージ化して各サービスに配布する予定です。 各サービスは共通アイコンパッケージをインストールし、単体で利用、スプライトで利用、vue.js内でrequireするなど想定しています。 もちろん今までも気を付けてSVGは実装していましたが、1つ1つの要素や属性に対して何故こうなっているのか説明できるようにしないと、配布側としての責任があるなと考えました。 どのようなSVGファイルが、各サービスで利用されるのに最適かをSVGを復習しつつまとめて
![アットコスメ共通のアイコン配布において最適なSVGを研究しました - istyle Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/db440a910c393e93f82760704744653937f7a5f2/height=288;version=1;width=512/https%3A%2F%2Ftechblog.istyle.co.jp%2Fwp-content%2Fuploads%2F2019%2F03%2Fsvg_shadow-root.png)