Frozenfire92/ember-initials

Simple avatars generator with names initials for Ember 2 applications

Ember Initials is a package for generating simple avatars with users initials. It supports Ember 2.8 (or higher) apps. Thanks to highly customizable interface you can define your own colors, defaults and styles. I promise you, it will do the job!

Demo App

Demo app with interactive examples you can find at http://exelord.github.io/ember-initials

Install

ember install ember-initials

Usage

Quick start

Ember Initials gives you a built-in component which you can use in yours templates:

{{ember-initials name="John Doe"}}

It will generate an avatar with JD initials.

Browser compatibility

This addon has been checked on:

• IE 10 and UP including EDGE
• Firefox 44 and UP
• Chrome 48 and UP
• Opera 35 and UP

Customization

You can pass options to the {{ember-initials}} directive or extend your Component with a mixin:

import Initials from 'ember-initials/mixin';

export default Ember.Component.extend(Initials, {
  // your extensions
});

Full list of options is available right in the code (mixin.js). If you read this probably you know what you are doing ;)

Examples

Bellow you can find some code examples with usage of available options.

Font customization

You can customize font by these arguments:

{{ember-initials
  name="John Doe"
  textColor='white'
  fontSize='12px'
  fontWeight=200
  fontFamily='Helvetica Neue Light, Arial, sans-serif'}}

Size

To change the size of avatar add size options (size in pixels):

{{ember-initials name="John Doe" size=40}}

Seed Text

Seed text is a background color id generated through uniq string. By default it is a name.

{{ember-initials name="John Doe"}}

Eg. It will return avatar with red background.

{{ember-initials name="John Doe" seedText=user.email}}

Now it will return avatar with blue background.

Default name and background color

To change the default name and background color of avatar add defaultName and defaultBackground options:

{{ember-initials
  name="John Doe"
  defaultName='!?'
  defaultBackground="#dd6a58"}}