/k-avatar

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

Primary LanguageHTMLMIT LicenseMIT

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