Extensión de icono SVG personalizado de React Suite

React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre la extensión de icono SVG personalizado de React Suite. Para agregar un ícono personalizado a una aplicación web, podemos usar el ícono SVG personalizado de la extensión Icon.

Sintaxis:

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

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

Usando el componente de iconos de reacción:

Paso 1: Instale el paquete @rsuite/icons en el directorio de su proyecto.

npm install --save @rsuite/icons

Paso 2: importe los íconos en su componente de función desde el paquete.

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

Paso 3: Instale el paquete React Icon en su proyecto.

npm install react-icons --save

Ejemplo 1: El siguiente ejemplo demuestra el uso básico de iconos SVG personalizados.

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>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra el icono SVG personalizado en color.

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>
    );
}

Producción:

 

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