📦

Ubieで利用しているアイコンをnpmパッケージとして公開しました!

2022/02/08に公開約3,600字1件のコメント

こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。
この度Ubieのプロダクトで利用しているアイコンのReact版 @ubie/ubie-icons をnpmに公開しました!

https://www.npmjs.com/package/@ubie/ubie-icons

GitHubのリポジトリはこちら。

https://github.com/ubie-oss/ubie-icons

今回はその背景や実装方法などを紹介します。

自社でアイコンを作った背景

このアイコンセットが作られる前は、必要になったタイミングでデザイナーそれぞれが個別にアイコンをデザインしていました。しかし次のような課題がありました。

  • アイコンの種類が少ないので使いにくい
  • 必要なタイミングで都度デザインしていたためテイストや方針がバラバラ
  • 実装に組み込まれておらず使いにくい
  • 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からReactコンポーネントを自動生成する仕組みの図

Figmaとの連携などはこちらの記事を参考にさせていただきました。

https://zenn.dev/steelydylan/articles/react-icon-generation

Figma APIのドキュメントはこちら

https://www.figma.com/developers/api

Figma APIを利用したSVG書き出し

アイコンは全てコンポーネント化されていて、次のような流れでSVGをダウンロードしています。

  1. コンポーネント一覧を取得
  2. 各コンポーネントから id を取得しリスト化
  3. id のリストをもとにSVGを出力
  4. SVGを assets ディレクトリに書き出し

SVGをファイルに書き出す作業は node-fetch とNode.jsの createWriteStream で行っています。

またpromisifypipeline を利用してasync/awaitで記述しています。
実際のコードは次のようになっています。

figma.js
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 を見てください。

https://github.com/ubie-oss/ubie-icons/blob/main/scripts/figma.js

SVGをReactコンポーネントに変換

SVGからReactコンポーネントへの変換はsvgrというライブラリを利用しています。軽量で非常に便利です。

https://github.com/gregberge/svgr

アイコンの色をCSSで変更できるようにしたいので、色が指定されている部分をcurrentColorに置き換えています。Figmaで使っている色を動的に判別できると良いのですが、少々面倒なので現在はFigma上でアイコンにセットされているカラーコードをハードコーディングしています。

.svgrrc.js
module.exports = {
  "icon": true,
  "replaceAttrValues": {"#3D5FCF": "currentColor"},
  "exportType": "named",
  "svgo": false,
  typescript: true
}

npm publish

現在vから始まるタグをPushするとGitHub Actionsで npm publish が実行されます。
GitHub Actionsを利用したnpmへのパッケージ公開は公式ドキュメントが用意されています。

https://docs.github.com/ja/actions/publishing-packages/publishing-nodejs-packages

今後の展開

今後はアイコンのバリエーション追加やReact以外のアプリケーションでも利用できるように機能を整えていきたいと考えています。
また、アイコンのFigmaもコミュニティに公開できるように整備していきたいです。

メンバー紹介

最後にこのプロジェクトに関わった人たちを紹介します!

採用宣伝

Ubieではデザイナー・デザインエンジニア・エンジニアを積極的に募集しています!

https://recruit.ubie.life/jd_dev/des
https://recruit.ubie.life/jd_dev/des_web
https://recruit.ubie.life/jd_dev/des_eng
https://recruit.ubie.life/jd_dev/eng_prod
https://recruit.ubie.life/jd_dev/eng_frontend

Figmaを活用したデザイン基盤の構築に興味があるというデザイナー・エンジニアの方、ぜひカジュアルにお話しましょう!

Meetyもやっているので、そちらのご応募もお待ちしております!

https://meety.net/matches/nNvMCdUsITzK

https://meety.net/matches/rjQKdeAVGOxE

Discussion

弊案件でもReactでして、figmaからの仕組みづくりのところとても良いなと思いました!
アイコンセット、かわいいので機会があれば使ってみます。

ログインするとコメントできます