Accesorios de iconos de React Suite

Una suite de React 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 React Suite Icon Props. React Icons, contiene varias bibliotecas populares de íconos como Fontawesome, Material Design, AntDesign, etc.

Accesorios de iconos:

• as : se utiliza para agregar un componente de icono SVG personalizado.
• relleno : se utiliza para rellenar el color del icono.
• flip : Se utiliza para voltear el icono.
• pulso : Se utiliza para girar el icono con ocho pasos.
• rotar : se utiliza para rotar el icono.
• spin : Se utiliza para girar el icono.
• estilo : Se utiliza para agregar o cambiar estilos de iconos.

accesorios createIconFont:

• commonprops: Define propiedades extra al componente.
• scriptUrl: utiliza la URL js generada en línea por icon font.cn, o puede usar la URL local.

Accesorios de fuente de icono:

• relleno: Se utiliza para rellenar el color del icono.
• flip: Se utiliza para voltear iconos.
• icon: Utiliza el nombre del conjunto de iconos iconfont.
• pulso: Utiliza pulso para hacer que gire con ocho pasos.
• rotar : se utiliza para rotar iconos.
• spin : se utiliza para girar iconos.
• estilo: se utiliza para cambiar las propiedades de estilo de los iconos, como el tamaño de fuente y el color.

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

Sintaxis:

import { Gear} from "@rsuite/icons";

function App() {
 return (
     <Gear fill="red" flip="vertical" style={} spin size="" />
 );
}

Ejemplo 1: el siguiente ejemplo muestra los accesorios de relleno, estilo y giro de los íconos de la suite de reacción.

import "rsuite/dist/rsuite.min.css";
import { Gear } from '@rsuite/icons';
  
export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Icon Props</h4>
  
        <div style={{ marginTop: 20, width: 400 }}>
          <Gear fill="red" style={{fontSize: 50}} spin />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los IconFont Props.

import "rsuite/dist/rsuite.min.css";
import { createIconFont } from '@rsuite/icons';
  
const IconFont = createIconFont({
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
  commonProps: { style: { color: "blue" } },
});
  
export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Icon Props</h4>
  
        <div style={{ marginTop: 20, width: 400 }}>
          <IconFont icon="rs-iconemail" fill="blue" 
                    style={{fontSize: 35, marginRight: 10}} />
          <IconFont icon="rs-iconemail-fill" flip="vertical" 
                    style={{fontSize: 35}} fill="red" />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#props