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 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 Icon from "react-icon-system";

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

// Or using Tailwind
const YourComponent = () => (
  <>
    <Icon src="alert" className="text-red-500" />
    <Icon src="info" className="text-blue-500" />
    <Icon src="warning" className="text-yellow-500" />
  </>
);