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.

Javascript

import { Icon } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
import React from "react";

const BookMarkSvg = React.forwardRef((props, ref) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="40"
        height="40" fill="currentColor"
            class="bi bi-bookmark-star-fill"
            viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2 15.5V2a2 2 0 0 1 2-2h8a2
  2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0
  0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178
  0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.
  061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178
  0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178
  0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42
  -.206a.178.178 0 0 1-.134-.098L8.16 4.1z"/>
    </svg>
));

const HeadSvg = React.forwardRef((props, ref) => (
    <svg xmlns="http://www.w3.org/2000/svg"
        width="40" height="40"
        fill="currentColor" class="bi bi-card-list"
        viewBox="0 0 16 16">
        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0
  1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5
  1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5
  2h-13z"/>
        <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5
  8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0
  0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1
  0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5
  0 1 1-1 0 .5.5 0 0 1 1 0z"/>
    </svg>
));

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Icon Extension Custom SVG Icons
                </h4>
            </div>

            <div
                style={{
                    textAlign: "center",
                    padding: 20
                }}
            >
                <Icon as={BookMarkSvg} />
                <Icon as={HeadSvg} />
            </div>
        </div>
    );
}

Output:

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

Javascript

import { Icon } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
import React from "react";

const PeopleSvg = React.forwardRef((props, ref) => (
    <svg {...props} width="3em" height="3em"
        viewBox="0 0 40 40" ref={ref}>
        <g fill="none" fillRule="evenodd">
            <path
                fill="#34C3FF"
                d="M10 36H4a4 4 0 01-4-4V6a4 4 0
                014-4h11.394a3 3 0 012.497 1.336L21
                9h14a4 4 0 014 4v23H10z"
                opacity={0.2}
            />
            <circle cx={27} cy={23} r={3} fill="#34C3FF"
                stroke="#34C3FF" strokeWidth={2} />
            <path
                fill="#80DDFF"
                d="M15 38a1 1 0 01-1-1v-3.5c0-1.607
                1.02-3.214 2.696-4.001a3.5 3.5 0
                113.608.001c1.676.786 2.696 2.393
                2.696 4V37a1 1 0 01-1 1zm17 0a1 1 0
                01-1-1v-3.5c0-1.607 1.02-3.214
                2.696-4.001a3.5 3.5 0 113.608.001c1.676.786
                2.696 2.393 2.696 4V37a1 1 0 01-1 1z"
            />
            <path
                fill="#34C3FF"
                stroke="#34C3FF"
                strokeWidth={2}
                d="M27 27l.257.007c1.279.064 2.43.61
                3.279 1.457A4.984 4.984 0 0132
                32h0v6H22v-6c0-1.38.56-2.63 1.464-3.536A4.984
                4.984 0 0127 27h0z"
            />
        </g>
    </svg>
));

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Icon Extension Custom SVG Icons
                </h4>
            </div>
            <div
                style={{
                    textAlign: "center",
                    padding: 20
                }}
            >
                <Icon as={PeopleSvg} />
            </div>
        </div>
    );
}

Output:

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