こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。最近は社内のデザインシステム整備の仕事もやっており、今回はそちらで作っているアイコンライブラリの話をします。 SVG アイコンを社内 npm で配る みなさん、プロダクト内で利用するアイコンをどのように管理していますか? 大抵の場合は元になる .svg ファイルが存在し、それを最終的に React コンポーネントで読んだり、あるいは昔ながらのアイコンフォントを生成したりして使っているでしょう。 ピクシブではこれまで各プロダクトがそれぞれの方法でアイコンを生成していました。あるプロジェクトは svg スプライトを生成して <use> タグで読み、またあるプロジェクトは svgr を使い、これまたあるプロジェクトでは woff を生成する npm スクリプトを持ったりしています。 実装方法
![Figma でアイコンを更新したら GitLab に勝手に MR が作られるやつ - pixiv inside](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e36d94c33f127327f44dc646a2bbac5726f2c93/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fp%2Fpxvpxv%2F20210121%2F20210121190656.png)