Icono de React Suite createIconFont Props

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 Prop createIconFont. La suite React contiene varias bibliotecas populares de íconos como Fontawesome, Material Design, AntDesign, etc. También permite usar íconos Iconfont que también son muy populares. El método prop createIconFont nos permite importar recursos de íconos y usarlos en nuestros componentes.

accesorios createIconFont:

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

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';

Sintaxis:

import { createIconFont } from '@rsuite/icons';

const IconFontIcons = createIconFont({
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
  commonProps: { style: { fontSize: 10 } },
});

function App() {
    <IconFontIcons icon="rs-icongear-16" />
}

Ejemplo 1: El siguiente ejemplo demuestra la implementación básica de la propiedad createIconFont.

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 } },
});
  
export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite createIconFont Prop</h4>
  
        <div style={{ marginTop: 20, width: 400 }}>
          <IconFontIcons icon="rs-iconnotice" 
                  color="green" />
          <IconFontIcons icon="rs-iconemail-fill" 
                  color="green" />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra los íconos animados usando el accesorio createIconFont.

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: 'orange' } },
});
  
export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite createIconFont Prop</h4>
  
        <div style={{ marginTop: 20, width: 400 }}>
          <IconFontIcons icon="rs-icongear-16" spin/>
          <IconFontIcons icon="rs-iconreload" pulse />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#code-create-icon-font-code