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.
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> ); }
Producción:
Ejemplo 2: El siguiente ejemplo muestra el icono SVG personalizado en color.
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> ); }
Producción:
Referencia: https://rsuitejs.com/components/icon/#custom-svg-icon
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA