silhouette-example v1.0.0
🧑 silhouette
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.***
```js
...
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.
4 years ago