|
11 | 11 | [coreui-angular-icons-npm]: https://www.npmjs.com/package/@coreui/icons-angular
|
12 | 12 | [npm-coreui-icons-angular-next]: https://img.shields.io/npm/v/@coreui/icons-angular/next.png?style=flat-square
|
13 | 13 |
|
14 |
| -## `c-icon` component |
| 14 | +## `cIcon` directive |
15 | 15 |
|
16 |
| -Angular component for [CoreUI Icons SVG set](https://coreui.io/icons/). |
| 16 | +Angular directive for [CoreUI Icons SVG set](https://coreui.io/icons/). |
17 | 17 |
|
18 | 18 | ### Features
|
19 | 19 |
|
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, |
26 | 25 | - Clean API
|
27 | 26 |
|
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/) |
29 | 28 |
|
30 | 29 | ### Installation
|
31 | 30 |
|
@@ -70,24 +69,23 @@ export class AppComponent implements OnInit {
|
70 | 69 | ```
|
71 | 70 |
|
72 | 71 | ```jsx
|
73 |
| -<c-icon name="cil-envelope-open" size="lg"></c-icon> |
74 |
| -<c-icon name="cifAu"></c-icon> |
| 72 | +<svg cIcon name="cil-envelope-open" size="lg"></svg> |
| 73 | +<svg cIcon name="cifAu"></svg> |
75 | 74 | ```
|
76 | 75 |
|
77 | 76 | ### API
|
78 |
| -> Use one of `name`, `src` or `content` prop as it defines the way of icon import |
| 77 | +> Use one of `name` or `content` prop as it defines the way of icon import |
| 78 | +
|
| 79 | +##### Inputs |
79 | 80 |
|
80 | 81 | proprerty | type | default | description
|
81 | 82 | ---|---|---|---
|
82 | 83 | `name` | string | undefined | name of SVG icon stored in IconSetService
|
83 | 84 | `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 |
| 85 | +`size` | `custom`, `custom-size`, `sm`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl` | '' | Size of icon |
86 | 86 | `title` | string | undefined |
|
87 |
| -`use` | string | undefined | SVG `<use>` |
88 | 87 | `customClasses` | string | undefined | Overwrites default `.icon` classes
|
89 | 88 | `viewBox` | string | undefined | SVG `viewbox`
|
90 |
| -`attributes` | any | `{ role: 'img' }` | Object with additional html attributes |
91 | 89 | `width` | string | undefined | SVG `width`
|
92 | 90 | `height` | string | undefined | SVG `height`
|
93 | 91 |
|
|
0 commit comments