https://github.com/dyazincahya-blog/k-avatar
Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size.
https://github.com/dyazincahya-blog/k-avatar
avatar bower npm polymer-project polymer-project-1 profile-picture text-avatars
Last synced: 6 months ago
JSON representation
Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size.
- Host: GitHub
- URL: https://github.com/dyazincahya-blog/k-avatar
- Owner: dyazincahya-blog
- License: mit
- Created: 2017-01-26T08:25:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-28T15:52:13.000Z (over 8 years ago)
- Last Synced: 2025-04-19T17:36:31.512Z (7 months ago)
- Topics: avatar, bower, npm, polymer-project, polymer-project-1, profile-picture, text-avatars
- Language: HTML
- Homepage: https://k4ng.github.io/k-avatar/
- Size: 2.49 MB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://libraries.io/bower/k-avatar)
[](https://github.com/k4ng/k-avatar/issues)
[](https://www.npmjs.com/package/k-avatar)
[](https://github.com/k4ng/k-avatar)
# \
Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size. [view demo](https://k4ng.github.io/k-avatar/)
```html
Kang cahya
```
## How to install
### bower
```markdown
bower install --save k-avatar
```
### npm
```markdown
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](https://github.com/k4ng/k-avatar/blob/master/CHANGELOG.md).
## Contributing
1. Fork it!
1. Create your feature branch: git checkout -b my-new-feature
1. Commit your changes: git commit -m 'Add some feature'
1. Push to the branch: git push origin my-new-feature
1. Submit a pull request :D
## License
[MIT License](https://github.com/dyazincahya/k-avatar/blob/master/LICENSE)