mohammadmusaei / axiom-icon

An Angular icon component

Axiom Icon

Online Demo

Usage Demo

Demo source is here

source

Installation

Install component package from npm :

npm install ax-icon

Import component module :

import { AxiomIconModule } from 'ax-icon';

...

@NgModule({
  imports: [
    AxiomIconModule
  ], 
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

...

Usage

Use [ax-icon] attribute component for <i> tag and assign an icon name to it.

<i [ax-icon]="download"
   [stroke]="'#000" 
   [size]="32" 
   [linejoin]="'round'"
   [linecap]="'round'">
</i>

Smart Color

By assigning [smartColor] and [parent] attributes to ax-icon, Component adapt its stroke color with parent background. Therefore when parent background is dark, stroke color will be light, and vice-versa.

 <div #parent>
  
   <i [ax-icon]="download"
     [stroke]="'#000" 
     [smartColor]="true"
     [parent]="parent"
     [size]="32" 
     [linejoin]="'round'"
     [linecap]="'round'">
  </i>
  
 </div>

When parent background change dynamaticaly, you can call icons refreshing themselves by AxiomIconConfig service.

First import it:

  constructor(private _config: AxiomIconConfig) {

  }
  

And then use refresh function:

  this._config.refresh();
  

Because AxiomIconConfig is a global service, All icons will refresh.

@Input() Params

Name	Type	Default	Usage
ax-icon	AxIcon	---	Icon name
stroke	string	#00000	Icon color
size	number	28	Icon size in pixel
linejoin	AxiomIconLinejoin	round	linejoin is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. Available values are : arcs, round, bevel
linecap	AxiomIconLinecap	round	linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. Available values are : butt, round, square
smartColor	boolean	true	Adaptive stroke color related to parent background
parent	element	---	Parent element that will be use for smart color feature

License

MIT