@sensenet/icons-react
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

@sensenet/icons-react

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

NPM version NPM downloads License: GPL v2

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

Package Sidebar

Install

npm i @sensenet/icons-react

Homepage

sensenet.com

Weekly Downloads

28

Version

2.1.1

License

GPL-2.0

Unpacked Size

6.05 MB

Total Files

100

Last publish

Collaborators

  • viktor.nagy.0804
  • hassanad
  • kubehu
  • herflis
  • tusmester
  • kavics
  • vargajoe