@sensenet/icons-react

@sensenet/icons-react

A React component rendering icons for sensenet supporting material-ui, fontawesome, flaticon material-design and sensenet 6 image icons.

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)}
    >
...

Old sensenet image icons

In the old versions of sensenet there was a naming convention to load images, so that you wanted to use the file icon, it was placed in a pre-defined place (/Root/Global/images/icons/{16|32|64}) with the name file.png. We moved the part of that logic into this new package with copying all the related icon images in almost the same structure. So if you want to use the old image icons use the Icon component the following way:

import { Icon, iconType } from '@sensenet/icons-react'

...
<Icon
    type={iconType.image}
    iconName="file"
    size={16},
    onClick={(e) => myEventHandler(e.target)}
    >
...

Credits

Flaticon material-design icons made by google from www.flaticon.com