- Basic Usage
- List of Icons
- Prop Table
import Icon from '@duik/icon'This is a set of icons specific to the @duik. The icon set is not part of the @duik/it and has to be imported separatedly to dramatically reduce overall size of the library.
Icons are coming from a set of fonts, leveraging typographic ligature. Change the color the same way you would do as with a font.
| building | <Icon> building </Icon> <i class="uikon">building</i> ReactHTML Snippet |
| building | <Icon style={{ color: 'red' }} > building </Icon> <i class="uikon" style="color:red">building</i> ReactHTML Snippet |
<Button square> <Icon> building </Icon> </Button> <button class="btn btn-square" type="button" role="button"> <i class="uikon">building</i> </button> ReactHTML Snippet | |
<Button> <Icon mr> building </Icon> Text </Button> <button class="btn" type="button" role="button"> <i class="uikon mr">building</i>Text </button> ReactHTML Snippet | |
<Button> Text <Icon ml> building </Icon> </Button> <button class="btn" type="button" role="button">Text<i class="uikon ml">building</i> </button> ReactHTML Snippet |
| className | Required: false |
| type: string | |
| className, e.g. "my-custom-styling" |
| children | Required: false |
| type: string | |
| Icon name, see list below |
| mr | Required: false |
| type: boolean | |
| Adds right margin, useful when icon is next to the text, e.g. in button |
| ml | Required: false |
| type: boolean | |
| Adds left margin |
| ...rest | Required: false |
| type: any | |
| Other properties are passed to the i element |