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
This assumes you already have an angular project setup
- Run the following commands to setup NgSanLetterIcon:
npm install -S ng-san-letter-iconAdd 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>
-
words
This is a string of words from which letters will be extracted
-
backgroundColor Optional
Background Color of the icon
- Defaults to
#a100ff
- Defaults to
-
color Optional
Color of the letter icon
- Defaults to
#ffffff
- Defaults to
-
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
Apache 2.0