ng-san-letter-icon v0.0.2

NgSanLetterIcon

Generates generic, single-letter icons styled according to the Material Design colors and guidelines, similar to Gmail's fallback sender icons, using:

• Roboto Light - to display the letters using the official Material Design typeface
• material-colors - to provide a Material Design colored background for the icons

Demo

Usage

This assumes you already have an angular project setup

• Run the following commands to setup NgSanLetterIcon:

npm install -S ng-san-letter-icon

Add the NgSanLetterIconModule to your module ie. AppModule

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {NgSanLetterIconModule} from 'ng-san-letter-icon';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		NgSanLetterIconModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {
}

Use the san-letter-icon in your components

<san-letter-icon
	[words]="'Some Name'"
	[backgroundColor]="'#444444'"
	[numberOfCharactersPerWord]="2">
</san-letter-icon>

Options:

• words

  	> This is a string of words from which letters will be extracted

• backgroundColor Optional

  	> Background Color of the icon
  	- Defaults to ```#a100ff```

• color Optional

  	> Color of the letter icon
  	- Defaults to ```#ffffff```

• numberOfCharactersPerWord - This takes in the number of characters to extract from each word. - it defaults to 1 character. It can only take in either of the two values 1 or 2 - If the number of words are more that 1, it will take the default value 1.

• wordIndex Optional

  	> Specify a word you want to extract characters form in case its a string of more than one 
  	word

• characterPosition

  	> The position in the word from where to start character extraction, It defaults to 
  	position/index 0, the first character

• strokeWidth

  	> The border width of the circle, defaults to null

• strokeColor

  	> The border color, defaults to null

License

Apache 2.0