Extensión de icono de React Suite Iconfont Iconos

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 Iconfont Icons de React Suite Icon . Los íconos de Iconfont son íconos muy populares que consisten en varios tipos de íconos.

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 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 tamaño de fuente y color .

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.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

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

const IconFont = createIconFont({
    scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
    commonProps: { style: { color: 'red' } },
});

function App() {
    <IconFont icon="rs-iconemail" />
}

Ejemplo 1: El siguiente ejemplo demuestra el icono Iconfont básico.

import "rsuite/dist/rsuite.min.css";
import { createIconFont } from '@rsuite/icons';
  
const IconFontIcons = createIconFont({
    scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
    commonProps: {
        style: {
            fontSize: 40, marginRight: 10, color: 'green'
        }
    },
});
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Icon Extension Iconfont Icons
                </h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <IconFontIcons icon="rs-iconrandom" />
                    <IconFontIcons icon="rs-iconrandom"
                                   flip="horizontal" />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los accesorios de relleno y rotación del componente IconFont.

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

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#iconfont-icons