The icon Component is part of the chayns-components package. It can be installed via npm:
npm install -S chayns-components@latest
The icon component has to be imported:
import { Icon } from 'chayns-components';If you want to use a Font Awesome Icon, you also have to install the icon packages and import the icon from the corresponding font awesome library.
npm i --save @fortawesome/pro-solid-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/free-brands-svg-icons
or
npm i --save @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
import { faGoogle } from '@fortawesome/free-brands-svg-icons'; /**Brands Style*/You can use the icon like this:
<Icon icon={faGoogle}/>
<Icon icon="ts-bamboo"/>The following properties can be set on the icon component
| Property | Description | Type | Required | Default Value |
|---|---|---|---|---|
| icon | The icon (TS-icon: string, FA-icon: object) | string / object | true | |
| style | Additional styles that should be set to the icon | string | false | undefined |
| className | Additional CSS-Classes that should be set to the icon | string / object | false | '' |
| onClick | OnClick listener to make icon clickable | function | false | undefined |
| disabled | Disables clickable icons | boolean | false | false |
| stopPropagation | Stops the click propagation to parent elements | bool | false |