https://github.com/mohammadmusaei/axiom-icon
An Angular icon component
https://github.com/mohammadmusaei/axiom-icon
anguar6 angular icon javascript svg-icons typescript
Last synced: about 2 months ago
JSON representation
An Angular icon component
- Host: GitHub
- URL: https://github.com/mohammadmusaei/axiom-icon
- Owner: mohammadmusaei
- Created: 2019-03-06T21:42:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-08T11:08:31.000Z (about 7 years ago)
- Last Synced: 2025-10-06T20:57:25.135Z (8 months ago)
- Topics: anguar6, angular, icon, javascript, svg-icons, typescript
- Language: HTML
- Size: 273 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Axiom Icon
### Online Demo
[Usage Demo](http://app.musaei.me/angular/icon/)
### Demo source is here
[source](https://github.com/mohammadmusaei/axiom-icon/tree/master/src)
### Installation
##### Install component package from npm :
`npm install ax-icon`
##### Import component module :
```typescript
import { AxiomIconModule } from 'ax-icon';
...
@NgModule({
imports: [
AxiomIconModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
...
```
### Usage
Use `[ax-icon]` attribute component for `` tag and assign an icon name to it.
```html
```
### 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.
```html
```
When parent background change dynamaticaly, you can call icons refreshing themselves by `AxiomIconConfig` service.
First import it:
```typescript
constructor(private _config: AxiomIconConfig) {
}
```
And then use refresh function:
```typescript
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](http://opensource.org/licenses/MIT)