React Suite Custom SVG Icon Extension

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we'll learn about React Suite Custom SVG Icon Extension. For adding a custom icon to a web application, we can use the Icon extension custom SVG icon.

Syntax:

import { Icon } from '@rsuite/icons';
const SvgIcon = <svg>...</svg>;

return () => {
 return <Icon as={SvgIcon} />;
};

Using React Icons Component:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Import the Icons in your function component from the package.

import { Icon } from '@rsuite/icons';

Step 3: Install React Icon package into your project.

npm install react-icons --save

Example 1: Below example demonstrates the basic usage of Custom SVG Icons.

Output:

Example 2: Below example demonstrates the colored Custom SVG Icon.

Output:

Reference: https://rsuitejs.com/components/icon/#custom-svg-icon