1111[ coreui-angular-icons-npm ] : https://www.npmjs.com/package/@coreui/icons-angular
1212[ npm-coreui-icons-angular-next ] : https://img.shields.io/npm/v/@coreui/icons-angular/next.png?style=flat-square
1313
14- ## ` c-icon ` component
14+ ## ` cIcon ` directive
1515
16- Angular component for [ CoreUI Icons SVG set] ( https://coreui.io/icons/ ) .
16+ Angular directive for [ CoreUI Icons SVG set] ( https://coreui.io/icons/ ) .
1717
1818### Features
1919
20- - Loads icons in three ways:
21- - stored globally in Angular service,
22- - directly passed SVG tag content,
23- - source link to SVG file
24- - Reduces icons bundle size when imported as single icons,
25- - Full functionality of ` <svg> ` html tag,
20+ - Load icons:
21+ - stored in Angular root service,
22+ - directly passed SVG content,
23+ - Reduce icons bundle size when imported as single icons,
24+ - Full functionality of ` <svg> ` tag,
2625- Clean API
2726
28- For component description visit [ CIcon component documentation ] ( https://icons. coreui.io/docs/using- coreui-icons-with /angular/ )
27+ For directive description visit [ https://coreui.io/angular/ docs/4.0/ ] ( https:// coreui.io /angular/docs/4.0 /)
2928
3029### Installation
3130
@@ -39,12 +38,11 @@ npm install @coreui/icons-angular
3938``` ts
4039// app NgModule
4140
42- import { IconModule , IconSetModule , IconSetService } from ' @coreui/icons-angular' ;
41+ import { IconModule , IconSetService } from ' @coreui/icons-angular' ;
4342
4443@NgModule ({
4544 imports: [
4645 IconModule ,
47- IconSetModule .forRoot (),
4846...
4947 providers : [IconSetService ],
5048...
@@ -54,12 +52,10 @@ import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular
5452// app component
5553
5654import { cilEnvelopeOpen , flagSet } from ' @coreui/icons' ;
57- import { IconModule , IconSetModule , IconSetService } from ' @coreui/icons-angular' ;
55+ import { IconSetService } from ' @coreui/icons-angular' ;
5856
5957@Component ({
6058 ...
61- providers : [IconSetService ],
62- ...
6359})
6460export class AppComponent implements OnInit {
6561 constructor (public iconSet : IconSetService ) {
@@ -70,29 +66,41 @@ export class AppComponent implements OnInit {
7066` ` `
7167
7268` ` ` jsx
73- < c - icon name= " cil-envelope-open" size = " lg" > </c - icon >
74- < c - icon name= " cifAu" > </c - icon >
69+ < svg cIcon name= " cil-envelope-open" size = " lg" > </svg >
70+ < svg cIcon name= " cifAu" > </svg >
7571` ` `
7672
7773### API
78- > Use one of ` name ` , ` src ` or ` content ` prop as it defines the way of icon import
74+
75+ #### Icon _directive_
76+ > Use one of ` name ` or ` content ` prop as it defines the way of icon import
77+
78+ ##### Inputs
7979
8080proprerty | type | default | description
8181---|---|---|---
8282` name ` | string | undefined | name of SVG icon stored in IconSetService
8383` content ` | string, string[] | undefined | SVG content
84- ` src ` | string | undefined | Link to the icon. If defined, component will be rendered as ` <img >` tag |
85- ` size ` | ` custom ` , ` custom - size ` , ` sm ` , ` lg ` , ` xl ` , ` 2xl ` , ` 3xl ` , ` 4xl ` , ` 5xl ` , ` 6xl ` , ` 7xl ` , ` 8xl ` , ` 9xl ` | '' | Size of icon
84+ ` size ` | ` custom ` , ` custom - size ` , ` sm ` , ` lg ` , ` xl ` , ` xxl ` , ` 3xl ` , ` 4xl ` , ` 5xl ` , ` 6xl ` , ` 7xl ` , ` 8xl ` , ` 9xl ` | '' | Size of icon
8685` title ` | string | undefined |
87- ` use ` | string | undefined | SVG ` <use >`
8886` customClasses ` | string | undefined | Overwrites default ` .icon ` classes
8987` viewBox ` | string | undefined | SVG ` viewbox `
90- ` attributes ` | any | ` { role : ' img' }` | Object with additional html attributes
9188` width ` | string | undefined | SVG ` width `
9289` height ` | string | undefined | SVG ` height `
9390
9491---
9592
93+ #### IconSet _service_
94+
95+ ##### Props
96+
97+ | proprerty | type | default | description|
98+ | --- | --- | --- | --- |
99+ | ` getIcon()` | ` (string ): any [] ` | | returns an icon |
100+ | ` icons ` | ` IIconSet ` | undefined | IconSet object |
101+ | ` iconNames ` | ` [key : string ]: string ` | _undefined_ | returns icon name from key |
102+
103+ ---
96104### License
97105
98106CoreUI Icons Free are free, open source, and GPL friendly. You can use it for
0 commit comments