Icono de React Suite Voltear y rotar

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 Flip and Rotate. Los íconos en el conjunto de reacciones se pueden voltear y rotar en varios ángulos. Los iconos se pueden voltear horizontal y verticalmente.

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

Sintaxis:

//Import statement
import Time from '@rsuite/icons/Time';

//functional component
<div>
    <Time rotate={90} />
    <Time flip="horizontal" />
</div>

Ejemplo 1: el siguiente ejemplo muestra el icono de volteo en la suite de reacción.

import Question2 from '@rsuite/icons/legacy/Question2';
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 Flip and Rotate</h4>
            <div style={{ display: 'flex', flexDirection: 'row', 
                alignItems: 'center' }}>
                <Question2 flip='horizontal' style={{ fontSize: 30 }} 
                    color="green" />
                <span style={{ marginLeft: 10 }}>
                    Horizontal Flip icon</span>
                <Question2 flip='vertical' style={{ fontSize: 30, 
                    marginLeft: 10 }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Vertical Flip icon</span>
            </div>
        </div>
    );
}
  
export default App;

Pasos para ejecutar la aplicación: escriba el siguiente código en la terminal para ejecutar el servidor:

npm start

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra el ícono giratorio en la suite de reacción.

import Time from '@rsuite/icons/Time';
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 Flip and Rotate</h4>
            <div style={{
                display: 'flex', flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Time rotate={90} style={{ fontSize: 30 }}
                    color="green" />
                <span style={{ marginLeft: 10 }}>
                    Rotated at 90deg</span>
                <Time rotate={180} style={{ fontSize: 30, 
                    marginLeft: 10 }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Rotated at 180deg</span>
                <Time rotate={270} style={{
                    fontSize: 30,
                    marginLeft: 10
                }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Rotated at 270deg</span>
                <Time rotate={360} style={{
                    fontSize: 30,
                    marginLeft: 10
                }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Default</span>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#flip-and-rotate