Animación 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 la animación de iconos de React Suite. Los íconos en el conjunto de reacciones proporcionan los accesorios para la animación. Los íconos se pueden animar de dos maneras: girar y pulsar .

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.
• girar: Se utiliza para girar el icono.
• estilo: Se utiliza para agregar o cambiar estilos de iconos.

Usando el componente de iconos:

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 { Gear, AddOutline } from '@rsuite/icons';

Sintaxis:

//Import Icons
import {Reload} from '@rsuite/icons';

//Functional Component
function App() {
  return (
      <div>
        <Reload spin size="5em" />
        <Reload pulse />
      </div>
  );
}

Ejemplo 1: El siguiente ejemplo demuestra el ícono animado básico.

import { Reload } from '@rsuite/icons';
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icons Animating
            </h4>
            <div>
                <Reload spin 
                    style={{ fontSize: '2em' }} 
                    color="black" />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra el icono animado de color con un texto.

import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icons Animating
            </h4>
            <div style={{ 
                display: 'flex', 
                flexDirection: 'row', 
                alignItems: 'center' 
            }}>
                <SpinnerIcon pulse 
                    style={{ fontSize: '2em' }} 
                    color="red" />
                <h6 style={{ marginLeft: 10 }}>
                    Loading your content...
                </h6>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

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