Skip to content

Latest commit

 

History

History
109 lines (72 loc) · 2.62 KB

icon.md

File metadata and controls

109 lines (72 loc) · 2.62 KB
Raw

Icon

Source

Displays a FontAwesome icon.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Icon } from 'chayns-components';

// ...

<Icon {...} />

Props

The Icon-component takes the following props:

Name Type Default Required
icon string | { iconName: string, prefix: string } | Array<string> ✓
className string ''
style { [key: string]: number | string }
onClick function
disabled boolean false
stopPropagation boolean false

icon

icon: string | { iconName: string, prefix: string } | Array<string>;

The icon to display. Supply a string or an array of strings like this: fa fa-plane. Search for icons and their strings on https://fontawesome.com/icons/. For backwards compatibility you can also specify an icon object from the @fortawesome-packages, but this should not be used going forward.

className

className?: string

A classname string that will be applied to the HTML element of the icon.

style

style?: { [key: string]: number | string }

A React style object that will be applied ot the <i>-element of the icon.

onClick

onClick?: function

A callback that is called for the onclick-event on the icon.

disabled

disabled?: boolean

Disables any user interaction on the icon and renders it in a disabled style.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.