DEV Community

Loveena Saran
Loveena Saran

Posted on

Avatar API support in Appwrite

60a11c80-fcf1-11e9-959e-565bc6cba590 (1)

Appwrite provides an AMAZING solution that offers YOU an array of REST APIs , tools , Management Console UI for YOUR core backend needs.

If you haven't already try it out for yourself AppWrite
Go Ahead don't be shy...


Are YOU Looking to make your Service Standout?


Are YOU Tired of importing multiple packages for Icon support?


Are YOU Hoping to make your Life a little bit easier?


Enhance your Appwrite App with Images, Icons, and Avatars...

Adding payment methods logos , fetching the desired country flags and Generating QR codes is all that you desire.

Be it Food Delivery Services ,Language Learning App or a Fintech App these small additions that will make it a lot easier.


How can you use Appwrite's Avatar API ?

  1. Create a Service Class to fetch the endpoint. In our case avatars and create a constructor to access it within the method.
class AppwriteService {
constructor() {   
    this.avatars= appwrite.avatars;
Enter fullscreen mode Exit fullscreen mode

2.Access your desired method getCreditCard present under Avatar API and pass in the mandatory attributes cardname for the method to work.
Optional Attributes Include: width,height,quality

 createCreditAvatar =(cardname) =>{
    return this.avatars.getCreditCard(cardname);
Enter fullscreen mode Exit fullscreen mode

3.Call the method Created in your file that you desire to add your avatar. Don't forget to pass the value to the attributes that were Set earlier.
Example: amex, argencard, cabal, censosud, diners, discover, elo, hipercard, jcb, mastercard, naranja, targeta-shopping, union-china-pay, visa, mir, maestro

  let creditcard = appwrite.createCreditAvatar('amex');
Enter fullscreen mode Exit fullscreen mode

4.In the return section of your Project call the component inside the image tag to view the icon

    <div >
      <img src={creditcard} />
Enter fullscreen mode Exit fullscreen mode

5.And Voilà!! You have your icon displayed on your UI

Few Other Examples To get you started:

createFlagAvatar =(flagname) =>{
    return this.avatars.getFlag(flagname);
  createQrAvatar =(text,size) =>{
    return this.avatars.getQR(text,size);
Enter fullscreen mode Exit fullscreen mode
let flagname = appwrite.createFlagAvatar('IN');
let  qrcode  = appwrite.createQrAvatar('FinTechApp',100);

    <div >
      <img src={flagname} />
      <img src={qrcode} />
Enter fullscreen mode Exit fullscreen mode

Start Appwriting Away!!!

Read for any Doubts:
Getting Started with Appwrite
Appwrite React Series

Top comments (0)