Avatar component in vue3 and typescript just like MS teams profile pictures with name initials

[MaBbKhawaja]

General

✏️ Mark the necessary items without changing the structure of the PR template.

• [x] Pull request template structure not broken

Type

ℹ️ What types of changes does your code introduce? This component works as avatar creator just as you might have seen avatars in microsoft teams. It takes initials from full name and makes a display picture for that. This components consists of vue3, typescript and css It is useful when someone doesn't upload a picture in your web app, instead of showing the empty avatar there you can just pass there username or full name in the component and then it will create a picture with there name initials

👉 Put an x in the boxes that apply

• [ ] Fix
• [x] Feature

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

👉 Put an x in the boxes that apply.

• [x] Title as described
• [x] Make sure you put things in the right category!
• [x] Always add your items to the end of a list

Open Source

• [x] Link description does not contain a link to an author / third-party resource
• [x] The documentation (README) contains a description of the project, illustration of the project with a demo or screenshots and a CONTRIBUTING section
• [x] The documentation is in English.
• [x] The project is active and maintained.
• [x] The project accepts contributions.
• [x] Not a commercial product

Apps/Websites

• [ ] The website is available without errors or ssl certificate problems, and load in a reasonable amount of time.
• [ ] The website is using vuejs intensively. It should detect vue with vue-devtools.

  If you cannot detect vue with vue-devtools due to work at non public pages (e.g. for enterprise website), you can send Pull Request with screenshot that detected it.

• [ ] The website is original and not too simple. For that reason, blogs and simple landing pages are rejected.
• [ ] A commercial product using Vue, provided that guests could reasonably check out how Vue was used (i.e. A headless CMS which uses Vue for the Admin/editor Area and offers a free tier).