THEMETRIAL

Text Avatar Generator With JavaScript And SVG – UI Avatar SVG

Author:gilbitron
Views Total:0 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="https://www.cssscript.com/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();


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.