Avatar API support in Appwrite
Tags: hacktoberfest, opensource, react, appwrite
Published: 2021-10-13 06:46:17

 
![60a11c80-fcf1-11e9-959e-565bc6cba590 (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf1zxl5z6kyzizjfrkji.png)

**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](https://appwrite.io/) 
Go Ahead don't be shy...   
![tumblr_3a8b75e6b3c5df176c3f7fe5341e5fbf_d34ad33a_500](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvtlfw8c1rife1npcz60.gif)

###*Are YOU Looking to make your Service Standout?*
  ![fist-pump-yeah](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntpooqlx9u6hmkjdvqx0.gif)
 
###*Are YOU Tired of importing multiple packages for Icon support?* 
![cumsite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wktqw935tevded6xzz0k.gif)

###*Are YOU Hoping to make your Life a little bit easier?*
![nod-alright](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thew449wz7mdxip5fjjk.gif)
 
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.

![4187](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdylwnr02rvqzrpj2cpl.gif)

#### How can you use Appwrite's [Avatar API](https://appwrite.io/docs/client/avatars) ? 

 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
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62x48a6z2aj9rdr9cuyp.png)
 
#### 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!!! 
![evil-laugh-laugh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9kx4peldg8cu68zs4tq.gif)
 
Read for any Doubts:
[Getting Started with Appwrite ](https://dev.to/noviicee/what-is-appwrite-and-how-to-use-it-efficiently-3o1m)
[Appwrite React Series](https://dev.to/daryllukas/authentication-exploring-appwrite-io-with-react-series-1iec)