Icon
Icon component is currently used as portal for displaying icon fonts and gives us simple and pixel perfect icon solutions.
Import
import {Icon} from "frontik/react/Icon"
import "frontik/assets/css/icons.css"
Usage
Basic Icon
<Icon name='frontik frontik-info1' />
<Icon name='frontik frontik-heart' />
Disabled Icon
<Icon disabled name='frontik frontik-earth' />
<Icon disabled name='frontik frontik-heart' />
Animating/Loading Icon
<Icon animation='spinner' name='frontik frontik-earth' />
<Icon animation='spinner' name='frontik frontik-heart' />
Icon colors
<Icon color='primary' name='frontik frontik-earth' />
<Icon color='secondary' name='frontik frontik-heart' />
<Icon color='success' name='frontik frontik-frontik-spinner6' />
<Icon color='error' name='frontik frontik-heart' />
<Icon color='info' name='frontik frontik-heart' />
<Icon color='warning' name='frontik frontik-heart' />
Icon sizes
<Icon size='xs' name='frontik frontik-heart' />
<Icon size='sm' name='frontik frontik-heart' />
<Icon size='md' name='frontik frontik-spinner6' />
<Icon size='lg' name='frontik frontik-heart' />
<Icon size='xlg' name='frontik frontik-heart' />
API
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
name | String | 'frontik frontik-name' | The base class applied to the icon. That must begin with the 'frontik-' prefix and after that should be the prefered icon name from your Icomoon pack font classNames. |
className | String | Overrides or extends the styles applied to the Icon | |
color | String, primary, secondary, success, error, info, warning | 'inherit' | The color of the component. Accepts all the colors defined by the System |
size | String, xs, sm, md, lg, xlg | 'inherit' | The fontSize applied to the icon. Can be configure to inherit font size. |
animation | String | 'inherit' | Accepts the animation className for animating the Icon |
disabled | Boolean | false | Makes the Icon state disabled/enabled |
Icons list
- frontik-home3
- frontik-pencil
- frontik-image
- frontik-images
- frontik-camera
- frontik-file-picture
- frontik-folder-open
- frontik-price-tag
- frontik-qrcode
- frontik-cart
- frontik-credit-card
- frontik-pushpin
- frontik-location2
- frontik-clock2
- frontik-user
- frontik-users
- frontik-user-plus
- frontik-user-minus
- frontik-user-check
- frontik-user-tie
- frontik-spinner3
- frontik-spinner6
- frontik-lock
- frontik-unlocked
- frontik-wrench
- frontik-cog
- frontik-cogs
- frontik-earth
- frontik-eye
- frontik-eye-plus
- frontik-eye-minus
- frontik-eye-blocked
- frontik-bookmark
- frontik-heart
- frontik-plus
- frontik-minus
- frontik-info1
- frontik-volume-medium
- frontik-volume-mute
- frontik-volume-mute2
- frontik-volume-increase
- frontik-volume-decrease
- frontik-loop2
- frontik-arrow-up-left2
- frontik-arrow-up2
- frontik-arrow-up-right2
- frontik-arrow-right2
- frontik-arrow-down-right2
- frontik-arrow-down2
- frontik-arrow-down-left2
- frontik-arrow-left2
- frontik-embed
- frontik-google
- frontik-facebook
- frontik-instagram
- frontik-twitter
- frontik-youtube
- frontik-behance
- frontik-linkedin2
- frontik-pinterest
Add custom icons to list
For default icon pack is used IcoMoon that providing three main services: vector icon packs, the IcoMoon App, and hosting icons as SVGs or fonts.
To update or to modify the current and default icons list we should have selection.json file and use it within the Icommon portal
Head over to https://icomoon.io/app using a modern web browser to start using the IcoMoon app. You can download these icons, do some basic editing, import your own icons, make icon fonts (a font with icons as its glyphs) or generate icons in SVG, Polymer, PDF, XAML, PNG and CSS sprites.
This app is also available in the Chrome Web Store (runs offline).
For using other icon fonts, just place the CDN link or import it in CSS file.