npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

@sensenet/icons-react

1.2.11 • Public • Published

@sensenet/icons-react

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

Install

npm i @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

install

npm i @sensenet/icons-react

Downloadsweekly downloads

37

version

1.2.11

license

GPL-2.0

homepage

sensenet.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability