# react-icon-system

> A simple no-nonsense icon system for React

Latest version **1.3.0** (published 2021-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-icon-system
pnpm add react-icon-system
yarn add react-icon-system
bun add react-icon-system
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2021-04-06 |
| First published | 2018-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Kevin Østerkilde |
| Maintainers | kosai106 |
| Keywords | react, icons, icon system, inline svg, svg, react-icon-system |

## Links

- npm: https://www.npmjs.com/package/react-icon-system
- Repository: https://github.com/Kosai106/react-icon-system
- Homepage: https://kosai106.github.io/react-icon-system/
- Issues: https://github.com/Kosai106/react-icon-system/issues
- npm.io page: https://npm.io/package/react-icon-system

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [svg-inline-loader](https://npm.io/package/svg-inline-loader.md) ^0.8.2

## 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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2021-04-06
- 1.2.1 — 2020-12-11
- 1.2.0 — 2020-09-12
- 1.1.0 — 2020-07-21
- 1.0.4 — 2018-08-01
- 1.0.3 — 2018-07-29
- 1.0.2 — 2018-07-23
- 1.0.1 — 2018-07-23
- 1.0.0 — 2018-07-21

## README

# react-icon-system

<div style="display: flex; flex-direction: column;">
  <img src="./react-icon-system.png" alt="React-icon-system setup illustration" />
  <div style="display: flex; justify-content: center;">
  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License MIT" style="margin-left: 4px; margin-right: 4px;" />
  <img src="https://img.shields.io/npm/v/react-icon-system.svg" alt="NPM version" style="margin-left: 4px; margin-right: 4px;" />
  <img src="https://img.shields.io/david/kosai106/react-icon-system.svg" alt="Dependencies" style="margin-left: 4px; margin-right: 4px;" />
  <img src="https://img.shields.io/npm/dw/react-icon-system.svg" alt="NPM Downloads/week" style="margin-left: 4px; margin-right: 4px;" />
  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" style="margin-left: 4px; margin-right: 4px;" />
  <img src="https://img.shields.io/badge/code%20style-prettier-ff69b4.svg" alt="Code style" style="margin-left: 4px; margin-right: 4px;" />
  </div>
</div>

## Usage

### Installation

```bash
yarn add react-icon-system
```

### Example

```bash
# Folder structure example
src/
├── components/
│   └── YourComponent.js
└── images/
    └── icons/
        ├── alert.svg
        ├── info.svg
        └── warning.svg
```

```json
// package.json
"start": "REACT_APP_ICON_PATH=src/images/icons ...etc",
```

OR

```bash
# .env
REACT_APP_ICON_PATH=src/images/icons
```

```jsx
// Code
import React from "react";
import Icon from "react-icon-system";

const YourComponent = () => <Icon src="alert" />;
```

### Pro tips

Instead of using a static colour for your SVGs, use `currentColor`. This way you can dynamically change the icon colour by using CSS.

**Example:**

```svg
// SVG icon
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <path stroke="currentColor" fill="none" d="..." />
                    ^
</svg>
```

```jsx
// Code
import React from "react";
import Icon from "react-icon-system";

const YourComponent = () => (
  <div>
    <Icon src="alert" style={{ color: "red" }} />
    <Icon src="info" style={{ color: "blue" }} />
    <Icon src="warning" style={{ color: "yellow" }} />
  </div>
);
```

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