Skip to content

utkarshdubey/silhouette

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🧑 silhouette

Netlify Status NPM Version Awesomeness Level

Silhouette is a small, dead-simple JS library built to help you text-based avatars without loading other heavy libraries like gravatar. Here's an example of how your avatars might look: https://silhouette-example.netlify.app/.

🍭 Installation

Simply download the files from the dist folder or install the npm version by doing npm install silhouettejs or yarn add silhouette.

You can now use it by require() or import either ways.

  • require() syntax goes on like this:
    const generateAvatar = require('silhouettejs').generateAvatar
  • import goes like this:
    import { generateAvatar } from 'silhouettejs'

Usage

It's really "dead-simple", just call a function and that's it.

  • To call the function:
// Load the module
import { generateAvatar } from 'silhouettejs';

// You can pass your own data from fetch() requests as well.
const names = ["Tom Clancy", "Robin Hood", "William Henry"];

// Store avatar urls in array
const avatars = []

// Loop through the names and call generateAvatar() to generate the avatar. 
names.forEach(name => {
   // Push the newly generate avatar to the avatars array.
   avatars.push(generateAvatar(name));
})

Note that this generates avatars with random colors, to specify your own background color, you can override the default options by passing an optional object.

...
generateAvatar(someName, {backgroundColor: '#customHexColor'})

You can then directly use the returned svg url in an <img> tag like:

<img id="avatar">

<script>
    import { generateAvatar } from 'silhouettejs';
    const avatarElement = document.getElementById('avatar');
    avatarElement.src = generateAvatar("Some Name");
</script>

A more ideal application would be to use this in existing frameworks that support literals. A similar example for React would look something like:

<User name={user.name} picture={generateAvatar(user.name)}>

Rounded Avatar

By default silhouette returns a square shaped avatar however you can change it to a rounded avatar as well by explicitly passing rounded: true in the options object like below.

import { generateAvatar } from 'silhouettejs';

// Run the function to generate the avatar.
generateAvatar('Some name', {rounded: true})

This would return a rounded avatar instead.

Extending on the CSS

You can resize the avatar flexibly with CSS since this is an SVG image.

Todo

  • Add multiple fonts support.
  • Add a background color range for selected randomized colors.

Credits

  • Thanks to @Hydrophobefireman for his weirdass but epic framework.
  • Thanks to @Protart for his epic SVG.

About

A small JS module for generating text based avatars in SVGs.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •