Text Avatar Generator With JavaScript And SVG – UI Avatar SVG

Category: Javascript | January 13, 2021
Author: gilbitron
Views Total: 218 views
Official Page: Go to website
Last Update: January 13, 2021
License: MIT

Preview:

Text Avatar Generator With JavaScript And SVG – UI Avatar SVG

Description:

UI Avatar SVG is a tiny JavaScript library to generate a customizable, SVG-based, square/round avatar from any text you provide.

How to use it:

1. Add the UI Avatar SVG’s JavaScript to the page.

<script src="/path/to/dist/ui-avatar-svg.umd.js"></script>

// or from a CDN
<script src="https://unpkg.com/[email protected]/dist/ui-avatar-svg.umd.js"></script>

2. Create a new avatar using the following methods:

  • .text: Text to display in the avatar
  • .round: Round or Squre avatar
  • .size: Avatar size in pixels
  • .bgColor: Background color
  • .textColor: Font color
  • .fontSize: Font size
  • .fontWeight: Font weight
  • .fontFamily: Font family
const myAvatar = (new UIAvatarSvg())
      .text('CSS')
      .round(true)
      .size(64)
      .bgColor('#ff0000')
      .textColor('#ffffff')
      .fontSize(0.4)
      .fontWeight('normal')
      .fontFamily('-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', Sans', 'Droid Sans', 'Helvetica Neue', sans-serif')

3. Generate SVG code so that you can embed the avatar anywhere in your web app.

myAvatar.generate();

You Might Be Interested In:


Leave a Reply