Avatar API support in Appwrite

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() {   
appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
    this.avatars= appwrite.avatars;
  }    

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);
  }

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');
  console.log(creditcard);

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

   return(
    <div >
      <img src={creditcard} />
    </div>
   );

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);
  }

let flagname = appwrite.createFlagAvatar('IN');
let  qrcode  = appwrite.createQrAvatar('FinTechApp',100);

console.log(flagname);
console.log(qrcode);
   return(
    <div >
      <img src={flagname} />
      <br/>
      <img src={qrcode} />
      <br/>
    </div>
   );

Start Appwriting Away!!!

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