Reactで可愛いアバターアイコンを自動生成しよう!

はじめに

Reactで可愛いアバターアイコンを自動生成するためのライブラリ「boring-avatars」を紹介します。

使い方

非常にシンプルです!

npm install boring-avatars

import Avatar from "boring-avatars";

const App = () => (
  <Avatar
    name="適当な文字列"
    size={40}
    variant="marble"
  />
);

nameに入れた文字列によってアバターアイコンが変わります。
ここをユーザ名などにすれば、ユーザ名に応じたアバターアイコンを自動生成することができますね。
variantにはmarble,beam,pixel,sunset,ring,bauhausがあります。
それぞれのサンプルを見てみましょう。

こちらのサイトでもサンプルを試すことができます！

marble

beam

pixel

sunset

ring

bauhaus

おわりに

Webサービスを作る際の参考になれば幸いです。