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) => ( 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) => ( 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>neveropen</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>neveropen</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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
