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.
https://github.com/k4ng/k-avatar

avatar bower npm polymer-project polymer-project-1 profile-picture text-avatars

Last synced: 5 days 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/k4ng/k-avatar
• Owner: k4ng
• License: mit
• Created: 2017-01-26T08:25:36.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-28T15:52:13.000Z (over 7 years ago)
• Last Synced: 2024-11-05T17:50:33.636Z (12 days 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: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![bower version](https://img.shields.io/bower/v/k-avatar.svg)](https://libraries.io/bower/k-avatar) 

[![open issues](https://img.shields.io/github/issues/k4ng%2Fk-avatar.svg)](https://github.com/k4ng/k-avatar/issues) 

[![npm](https://img.shields.io/npm/v/k-avatar.svg)](https://www.npmjs.com/package/k-avatar)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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)