Saltar al contenido

Cómo utilizar iconos en React (Font impresionante, Material Diseño) Ago, 4thIn esta guía, vamos a aprender cómo utilizar una diferentes …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo usar un tipo diferente de iconos de aplicaciones reaccionar.

Instalación

primer lugar tenemos que instalar el paquete reaccionar-iconos que nos ofrece diferentes tipos de iconos (fontawesome, diseño de materiales, Ionicons, devicons) como componentes reaccionan-iconos reaccionar.

npm install react-icons --save

Usando FontAwesome iconos

import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
return (

Accessible icon

);
}

export default App;

En el código anterior, primero se importó FaAcessibleIcon Del reaccionar-iconos / fa paquete y itas utilizado un componente.

icono de cambiar el tamaño de

podemos cambiar nuestro tamaño de los iconos mediante la adición de un puntal tamaño de componente Icono.

import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
return (

Accessible icon

);
}

export default App;

Cambio de colores de los iconos

También puede cambiar el color del icono mediante la adición de un accesorio de color a componente Icono.

import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
return (

Accessible icon

);
}

export default App;

El uso de materiales Diseño iconos

Del mismo modo podemos importar iconos de Material Design cambiando la ruta del paquete de reaccionar-iconos / md.

import React from "react";
import ReactDOM from "react-dom";
import { MdDns } from "react-icons/md";
function App() {
return (

Dns Icon

);
}

export default App;

Usted puede comprobar todos los nombres de los iconos disponibles en la página web reaccionan-iconos.