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

この記事は公開から2年以上経過しています。内容が古くなっている可能性があります。

はじめに

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

GitHub - boringdesigners/boring-avatars: Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette. - boringdesigners/boring-avatars

https://github.com/boringdesigners/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があります。それぞれのサンプルを見てみましょう。