Icon Svelte Component
Icon Svelte component represents Icon element. It is ready to be used with custom icons, Framework7 Icons and Material Icons.
Icon Components
There are following components included:
Icon
Icon Properties
Prop | Type | Default | Description |
---|---|---|---|
size | number string | Icon size in px | |
icon | string | Custom icon class | |
f7 | string | Name of F7 Icons font icon | |
material | string | Name of Material Icons font icon | |
ios | string | Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house | |
md | string | Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home | |
aurora | string | Icon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house | |
tooltip | string | Icon tooltip text to show on icon hover/press | |
tooltipTrigger | string | hover | Defines how to trigger (open) Tooltip. Can be hover or click . If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices |
Examples
<!-- Default back icon -->
<Icon icon="icon-back" />
<!-- Some custom icon -->
<Icon icon="icon-home" />
<!-- F7 Icons font icon -->
<Icon f7="house" />
<!-- Material Icons font icon -->
<Icon material="home" />
<!-- F7 icons font icon with custom size and color -->
<Icon f7="house" size="44px" color="blue" />
<!-- Conditional icon -->
<Icon ios="f7:house" aurora="f7:house" md="material:home" />