@sensenet/icons-react
A React component rendering icons for sensenet supporting material-ui, fontawesome and flaticon material-design.
Install
# Yarn
yarn add @sensenet/icons-react
# NPM
npm install @sensenet/icons-react
Usage
There's a base component to handle the different icon types and an enum for the exact types that are supported. Import the base component and the enum to set which icon type you want to use. With no type param it fallbacks to material-ui as it is the default.
import { Icon } from '@sensenet/icons-react'
...
<Icon iconName="file">
...
material-ui icons
Check material-ui icons' page to get the name of the icon you need and set it as the iconName
of the component. As optional parameters you can set fontSize
, color
, classes
, style
, className
and you can add an eventHandler function to the onClick
param which will called when the icon is clicked.
import { Icon, iconType } from '@sensenet/icons-react'
...
<Icon
type={iconType.materialui}
iconName="file"
fontSize="default",
color="primary"
onClick={(e) => myEventHandler(e.target)}
>
...
FontAwesome icons
Check FontAwesome icons' page to get the name of the icon you need and set it as the iconName
of the component. As optional parameters you can set fontSize
, color
, classes
, style
, className
and you can add an eventHandler function to the onClick
param which will called when the icon is clicked.
import { Icon, iconType } from '@sensenet/icons-react'
...
<Icon
type={iconType.fontawesome}
iconName="file"
fontSize="default",
color="primary"
onClick={(e) => myEventHandler(e.target)}
>
...
Flaticons material design icons
Check Flaticon material-designs' icons' page to get the name of the icon you need and set it as the iconName
of the component. As optional parameters you can set fontSize
, color
, classes
, style
, className
and you can add an eventHandler function to the onClick
param which will called when the icon is clicked.
import { Icon, iconType } from '@sensenet/icons-react'
...
<Icon
type={iconType.flaticon}
iconName="file"
fontSize="default",
color="primary"
onClick={(e) => myEventHandler(e.target)}
>
...
Credits
Flaticon material-design icons made by google from www.flaticon.com