sn-icons-react

@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