Componente de icono de diseño de hormiga ReactJS UI

. Componente de icono muy útil Podemos usar el siguiente enfoque en ReactJS para usar el componente de icono de diseño Ant.

Accesorios de iconos comunes:

• className: se utiliza para indicar el nombre de clase del icono.
• rotar: Se utiliza para rotar el icono n grados.
• spin: Se utiliza para rotar el icono con animación.
• estilo: se utiliza para pasar los accesorios de estilo al icono como tamaño, borde, etc.
• twoToneColor: Se utiliza para el icono de dos tonos.

Accesorios de iconos personalizados:

• componente: se utiliza para indicar el componente que se utiliza para el Node raíz.
• rotar: Se utiliza para rotar el icono n grados.
• spin: Se utiliza para rotar el icono con animación.
• estilo: se utiliza para pasar los accesorios de estilo al icono como tamaño, borde, etc.

Accesorios de iconos de fuente personalizados:

• extraCommonProps: Se utiliza para definir las propiedades extra al componente.
• scriptUrl: se utiliza para indicar la URL generada por el proyecto iconfont.cn .

Accesorios de iconos SVG personalizados:

• className: se utiliza para pasar el nombre de clase para este elemento.
• relleno: Se utiliza para definir el color que se rellena en el icono SVG.
• altura: Se utiliza para establecer la altura del icono SVG.
• estilo: se utiliza para pasar los accesorios de estilo al icono SVG como tamaño, borde, etc.
• ancho: Se utiliza para establecer el ancho del icono SVG.

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

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

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd
  npm install --save @ant-design/icons

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import {
  SyncOutlined,
  HeartTwoTone,
  SmileOutlined,
  HomeOutlined,
  LoadingOutlined,
  CheckCircleTwoTone,
  SmileTwoTone,
  SettingFilled,
} from '@ant-design/icons';
  
export default function App() {
  
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Icon Component</h4>
      <HomeOutlined /> 
      <br />
      <SmileOutlined rotate={180} /> 
      <br />
      <SyncOutlined spin /> 
      <br />
      <SmileTwoTone /> 
      <br />
      <LoadingOutlined /> 
      <br />
      <HeartTwoTone twoToneColor="yellow" /> 
      <br />
      <SettingFilled /> 
      <br />
      <CheckCircleTwoTone twoToneColor="orange" />
      <br />
      <SmileOutlined /> <br />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/icon/