https://github.com/igorkasyanchuk/avatarro
Generate google-style avatars in your application
https://github.com/igorkasyanchuk/avatarro
avatar rails ruby
Last synced: about 1 year ago
JSON representation
Generate google-style avatars in your application
- Host: GitHub
- URL: https://github.com/igorkasyanchuk/avatarro
- Owner: igorkasyanchuk
- Created: 2021-07-01T13:40:39.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T13:18:44.000Z (over 3 years ago)
- Last Synced: 2025-04-03T08:22:15.551Z (about 1 year ago)
- Topics: avatar, rails, ruby
- Language: Ruby
- Homepage: https://railsjazz.com/
- Size: 187 KB
- Stars: 38
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Avatarro
[](https://www.railsjazz.com)
[](https://www.patreon.com/igorkasyanchuk)
[](https://opensource-heroes.com/r/igorkasyanchuk/avatarro)
Google-style avatar generator for your app.
This gem generates SVG which can be used inside your HTML or img(src) to display google-style avatar with initials.
Sample:
[
](https://github.com/igorkasyanchuk/avatarro/blob/main/docs/avataro.png?raw=true)
## Usage
You can generate avatar using 2 methods, depending how you need to use it. Using `Avatarro.svg` method to embed svg inside HTML or `Avatarro.image` method to generate Base64 image use with image_tag.
```erb
<%= image_tag Avatarro.image(current_user.full_name), size: '24x24' %>
<%= image_tag Avatarro.image("Igor Kasyanchuk", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("IK"), size: '32x32' %>
<%= raw Avatarro.svg("IK") %>
<%= image_tag Avatarro.image(current_user.full_name, random: true, solid: true), size: '20x20', style: 'margin-right: 5px; border-radius: 50%' %>
```
It you need rounded avatars just add CSS to the img.
```erb
<%= image_tag Avatarro.image("IK"), size: '32x32', style: 'border-radius: 50%' %>
```
More samples (shown on screenshot above):
```erb
Avatar Generator for the
APP
<%= image_tag Avatarro.image("OI"), size: '16x16' %>
<%= image_tag Avatarro.image("JS"), size: '16x16' %>
<%= image_tag Avatarro.image("MK"), size: '16x16' %>
<%= image_tag Avatarro.image("ZP"), size: '16x16' %>
Generates SVG for the html
<%= image_tag Avatarro.image("OI", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("JS", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("MK", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("ZP", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("๐", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("๐", solid: true), size: '24x24' %>
Or can be used as
img src="..."
<%= image_tag Avatarro.image("ZO", random: true), size: '32x32' %>
<%= image_tag Avatarro.image("AB", random: true), size: '32x32' %>
<%= image_tag Avatarro.image("ะคะฏ", random: true), size: '32x32' %>
<%= image_tag Avatarro.image("DA", random: true), size: '32x32' %>
<%= raw Avatarro.svg("IK") %>
<%= raw Avatarro.svg("WS") %>
<%= raw Avatarro.svg("AP") %>
<%= image_tag Avatarro.image("WW") %>
<%= image_tag Avatarro.image("OI", random: true) %>
<%= image_tag Avatarro.image("ZA"), style: 'border-radius: 50%', size: '32x32' %>
<%= image_tag Avatarro.image("OZ", random: true), style: 'border-radius: 50%', size: '16x16' %>
<%= image_tag Avatarro.image("WA", random: true, width: 300, height: 300) %>
<%= image_tag Avatarro.image("โก", random: true, width: 300, height: 300) %>
```
## Configuration
Example of the possible options (see args hash):
```ruby
def Avatarro.template(initials, args = {})
data = args[:random] ? GRADIENTS.sample : GRADIENTS[index(initials) % GRADIENTS.size]
start = args[:start].presence || data[0]
finish = args[:solid] ? data[0] : (args[:finish].presence || data[1])
degree = args[:degree].presence || data[2].presence || 90
color = args[:color].presence || data[3].presence || '#FFF'
width = args[:width].presence || 64
height = args[:height].presence || 64
```
For example:
```erb
<%= image_tag Avatarro.image("WA", random: true, width: 300, height: 300, color: 'red') %>
```
## Installation
Add this line to your application's Gemfile:
```ruby
gem 'avatarro'
```
And then execute:
```bash
$ bundle
```
Or install it yourself as:
```bash
$ gem install avatarro
```
## Contributing
Contribution directions go here.
## TODO
- CI
- better graphics and more gradients
- radial gradient
## Credits
The idea of this gem came after reading an article: https://kukicola.io/posts/creating-google-like-letter-avatars-using-erb-generated-svgs/. We actually did something similar with HTML/CSS on our project too, but with SVG solution looks just better.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
[
](https://www.railsjazz.com/?utm_source=github&utm_medium=bottom&utm_campaign=avatarro)