yarn add react-icon-system
# 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" />;
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" />
</>
);