こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。
この度Ubieのプロダクトで利用しているアイコンのReact版 @ubie/ubie-icons をnpmに公開しました！
GitHubのリポジトリはこちら。
今回はその背景や実装方法などを紹介します。
自社でアイコンを作った背景
このアイコンセットが作られる前は、必要になったタイミングでデザイナーそれぞれが個別にアイコンをデザインしていました。しかし次のような課題がありました。
- アイコンの種類が少ないので使いにくい
- 必要なタイミングで都度デザインしていたためテイストや方針がバラバラ
- 実装に組み込まれておらず使いにくい
- Ubie独自のアイコンや医療系のアイコンなども汎用的に扱えるようにしたい
そこで、Ubieのプロダクト全般で汎用的に使えるアイコンセットを構築するプロジェクトが立ち上がりました。
アイコンのデザインは2021年8月くらいからスタートし、外部委託の方の力も借りながら約1ヶ月かけて行いました。現在約180個のアイコンがつくられています。
このアイコンセットは昨年秋ごろから社内でプライベートパッケージとして運用されていたのですが、今回それをPublicなパッケージとして公開しました。
公開した理由は大きく2つあります。
- 運用を簡略化するためにPublicなパッケージにしたかった
- Figmaと実装を連携している例として参考にしてもらいたい
アイコンの種類はまだまだ多くはないですが、多くの人に使ってもらえたら嬉しいです。
実装詳細
アイコンの主な実装要件は次の4点でした。
- どのプロダクトでも導入可能であること
- 利用していないアイコンを読み込まないこと
- CSSで色を変えられること
- Figma上の更新を自動で取り込む仕組み
Ubieではほぼ全てのプロダクトでReactを採用しているため、アイコンコンポーネントもSVGをReact化したものにしました。
アイコンフォントも検討していましたが、下記理由から不採用になりました。
- 使用していないアイコンを読み込まないようにすることが難しい
- スクリーンリーダー対応が面倒
全体像
ubie-icons はFigmaにあるアイコンをAPI経由でSVGに書き出してReactコンポーネントに自動変換しています。現状では1日1回Figmaのデータに変更がないかチェックして変更があれば新しいバージョンを公開するような仕組みになっています。
Figmaとの連携などはこちらの記事を参考にさせていただきました。
Figma APIのドキュメントはこちら
Figma APIを利用したSVG書き出し
アイコンは全てコンポーネント化されていて、次のような流れでSVGをダウンロードしています。
- コンポーネント一覧を取得
- 各コンポーネントから
idを取得しリスト化 -
idのリストをもとにSVGを出力 - SVGを
assetsディレクトリに書き出し
SVGをファイルに書き出す作業は node-fetch とNode.jsの createWriteStream で行っています。
またpromisify と pipeline を利用してasync/awaitで記述しています。
実際のコードは次のようになっています。
const download = async (url, path, callback) => {
const streamPipeline = promisify(pipeline);
const response = await fetch(url);
await streamPipeline(response.body, createWriteStream(path));
callback();
};
その他詳しい実装はGitHubの scripts/figma.js を見てください。
SVGをReactコンポーネントに変換
SVGからReactコンポーネントへの変換はsvgrというライブラリを利用しています。軽量で非常に便利です。
アイコンの色をCSSで変更できるようにしたいので、色が指定されている部分をcurrentColorに置き換えています。Figmaで使っている色を動的に判別できると良いのですが、少々面倒なので現在はFigma上でアイコンにセットされているカラーコードをハードコーディングしています。
module.exports = {
"icon": true,
"replaceAttrValues": {"#3D5FCF": "currentColor"},
"exportType": "named",
"svgo": false,
typescript: true
}
npm publish
現在vから始まるタグをPushするとGitHub Actionsで npm publish が実行されます。
GitHub Actionsを利用したnpmへのパッケージ公開は公式ドキュメントが用意されています。
今後の展開
今後はアイコンのバリエーション追加やReact以外のアプリケーションでも利用できるように機能を整えていきたいと考えています。
また、アイコンのFigmaもコミュニティに公開できるように整備していきたいです。
メンバー紹介
最後にこのプロジェクトに関わった人たちを紹介します！
- @yossy：デザイナー
- @empitsu88：ソフトウェアエンジニア
- @hokaccha：ソフトウェアエンジニア
- @takanorip：デザインエンジニア
採用宣伝
Ubieではデザイナー・デザインエンジニア・エンジニアを積極的に募集しています！
Figmaを活用したデザイン基盤の構築に興味があるというデザイナー・エンジニアの方、ぜひカジュアルにお話しましょう！
Meetyもやっているので、そちらのご応募もお待ちしております！
Discussion
弊案件でもReactでして、figmaからの仕組みづくりのところとても良いなと思いました！
アイコンセット、かわいいので機会があれば使ってみます。