#19 No-code 之旅 — Avatars Libraries

嗨～ 今天来个比较特别的主题，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