o-faro / react-icon-system

🌀 A simple no-nonsense icon system for React

react-icon-system

Usage

Installation

yarn add react-icon-system

Example

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

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

OR

# .env
REACT_APP_ICON_PATH=src/images/icons

// 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 icon
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <path stroke="currentColor" fill="none" d="..." />
                    ^
</svg>

// 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>
);