ng-san-letter-icon
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

NgSanLetterIcon

Maintainability Build Status Test Coverage

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

Dependencies (1)

Dev Dependencies (20)

Package Sidebar

Install

npm i ng-san-letter-icon

Weekly Downloads

9

Version

0.0.2

License

MIT

Unpacked Size

714 kB

Total Files

144

Last publish

Collaborators

  • reiosantos