# @sensenet/icons-react

> A React component rendering icons for sensenet.

Latest version **2.1.1** (published 2021-06-14) · GPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @sensenet/icons-react
pnpm add @sensenet/icons-react
yarn add @sensenet/icons-react
bun add @sensenet/icons-react
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-06-14 |
| First published | 2018-09-24 |
| Weekly downloads | 0 |
| License | GPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 2 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | Sense/Net |
| Maintainers | herflis, tusmester, kavics, gallayl, bezoo, vargajoe, pusztaie, taki9 |
| Keywords | sensenet, cms, csp, react, reactjs, icons, components |

## Links

- npm: https://www.npmjs.com/package/@sensenet/icons-react
- Repository: https://github.com/SenseNet/sn-client
- Homepage: https://sensenet.com
- Issues: https://github.com/SenseNet/sn-icons-react/issues
- npm.io page: https://npm.io/package/@sensenet/icons-react

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.2.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.14.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2021-06-14
- 2.1.0 — 2021-04-19
- 2.0.0 — 2021-03-22
- 1.2.19 — 2020-07-01
- 1.2.18 — 2020-05-07
- 1.2.17 — 2020-03-11
- 1.2.16 — 2019-12-11
- 1.2.15 — 2019-11-13
- 1.2.14 — 2019-10-16
- 1.2.13 — 2019-09-18
- 1.2.12 — 2019-08-21
- 1.2.11 — 2019-06-26
- 1.2.10 — 2019-05-29
- 1.2.9 — 2019-05-02
- 1.2.8 — 2019-04-03
- … 12 more at https://npm.io/package/@sensenet/icons-react/versions

## README

# @sensenet/icons-react

> A React component rendering icons for sensenet supporting [material-ui](https://material.io/tools/icons/), [fontawesome](https://fontawesome.com/icons?d=gallery) and [flaticon material-design](https://www.flaticon.com/packs/material-design).

[![NPM version](https://img.shields.io/npm/v/@sensenet/icons-react.svg?style=flat)](https://www.npmjs.com/package/@sensenet/icons-react)
[![NPM downloads](https://img.shields.io/npm/dt/@sensenet/icons-react.svg?style=flat)](https://www.npmjs.com/package/@sensenet/icons-react)
[![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)

## Install

```bash
# 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.

```ts
import { Icon } from '@sensenet/icons-react'

...
<Icon iconName="file">
...

```

### material-ui icons

Check [material-ui icons' page](https://material.io/tools/icons/?style=baseline) 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.

```ts
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](https://fontawesome.com/icons?d=gallery) 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.

```ts
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](https://www.flaticon.com/packs/material-design) 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.

```ts
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](http://www.google.com) from [www.flaticon.com](http://www.flaticon.com)

---
_Source: https://npm.io/package/@sensenet/icons-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._