嗨～ 今天來個比較特別的主題，Avatars libraries。很多時候我們需要顯示一些頭貼，有的是用 Google，Facebook，Github，等其他服務的頭貼。不過，有時候我們可能會想用其他比較匿名或隨機的圖當頭貼。今天這篇會分享一些 libraries～

Libraries

• DiceBear，第一個知道的 avatar library，蠻多風格可以選！有些很好笑ＸＤ
• AvataaarsJs，基於 DiceBear～
• Jdenticon，各種三角形方形圓形組成的圖，也有提供 React 的 library
• Boring Avatars，最近找到的，我很喜歡，它超可愛～ 有六種風格，可以自己調顏色

Boring Avatars

我選擇用 Boring Avatars 來顯示專案中的 avatars，原因是它特別可愛ＸＤ尤其是 Beam 風格～ 使用方式也很簡單：

• 安裝 library

  npm install boring-avatars
  # or
  yarn add boring-avatars
  

• 或是直接用 source src 的方式
  https://source.boringavatars.com/marble/{SIZE}/{NAME}?colors={COLOR1,COLOR2,COLOR3,COLOR4,COLOR5}
  例如：https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

上面是 Beam 風格！使用 library 的方式也很簡單～

import Avatar from "boring-avatars";

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;

這樣子我們可以幫每個人做一張頭貼，而且一樣的名字只會有一張圖 (一種風格一張，總共六張圖)

小結

當然，我們可以不用這些 libraries，直接拿 user 原本的頭貼。今天分享的就給大家參考，有需要的時候可以拿來用！專案裡因為會做部落格，所以選擇用 Boring Avatars 顯示作者的頭貼～

大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快！

晚安 <3