Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size.

[ This description is mirrored from README.md at github.com/k4ng/k-avatar on 2019-05-22 ]

bower version open issues npm Published on webcomponents.org

<k-avatar>

Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size. view demo

<k-avatar 
    data-name           = "Kang cahya"
    data-height         = "100"
    data-width          = "100"
    data-char-alias     = "2"
    data-text-color     = "#FFFFFF"
    data-border-radius  = "10"
    data-font-size      = "40"
    data-font-weight    = "500"></k-avatar> 
    <p><strong>Kang cahya</strong></p>

How to install

bower

bower install --save k-avatar

npm

npm install k-avatar

Properties

Data Attribute Description Default Value
data-name Name of the user which the profile picture should be generated. K4ng
data-height Height of the picture. 48 (pixel)
data-width Width of the picture. 48 (pixel)
data-char-alias Number of characherts to be shown in the picture. 1
data-text-color Color of the text. #FFFFFF (white)
data-font-size Font size of the character(s). 20 (pixel)
data-font-weight Font weight of the character(s). 400
data-border-radius Set border-radius container. 0 (%)
data-box-shadow set box-shadow container. 0px 0px 0px 0px rgba(33,33,33,0.75)
data-text-shadow set text-shadow character. 0px 0px 0px rgba(33,33,33,0.75)

Change log

You can find a list of all changes for each release in the change log.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License

Install

Link to this version
ImportedReleased 27 February 2017MIT License
Framework Support
Polymer 1.0+
Browser Independent
Install with
bower install --save k4ng/k-avatar"#1.1.3"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.1.3

Dependencies

  • polymer#Polymer/polymer#^1.1.0