React Icons te brinda acceso a cientos de íconos de código abierto

Obtenga información sobre una biblioteca de React llamada React Icons que proporciona miles de íconos gratuitos y de código abierto que puede usar en su próximo proyecto.

Si estás trabajando en una aplicación React que necesita íconos, ¡echa un vistazo a react-icons! Incluye 9 bibliotecas de íconos de código abierto populares, entre ellasFuente impresionanteyDiseño de materiales.

Para comenzar, instale el módulo usando npm:

$ npm install --save react-icons

React Icons exporta íconos como componentes React, por lo que es realmente intuitivo:

import React, { Component } from 'react';import { FaHeart } from "react-icons/fa";  // Font Awesomeclass App extends Component {  render() {    return (      div        Hello World        FaHeart /      /div    )  }}

¡Todo lo que puedas exportar!

Dado que react-iconsincluye 9 bibliotecas de íconos, siempre encontrarás varias variaciones de un ícono. Si siempre estás en la búsqueda interminable de encontrar el ícono "perfecto", ¡este es para ti!

import { FaCheck } from "react-icons/fa";       // Font Awesomeimport { IoMdCheckmark } from "react-icons/io"; // Ioniconsimport { MdCheck } from "react-icons/md";       // Material Designimport { GoCheck } from "react-icons/go";       // Github Octicon

Personalización de estilos

Los íconos generalmente heredarán estilos CSS, pero si desea más poder de personalización, puede pasar propiedades a sus íconos.

En el siguiente ejemplo, colory sizeson exclusivos de react-icon, pero también puedes pasar la stylepropiedad estándar:

FaBeer  color="#008f68"  size="50px"  style={{ margin: '0 5px' }}/IoIosPaperPlane  color="#6DB65B"  size="50px"  style={{ margin: '0 5px' }}/MdCloud  color="#4AAE9B"  size="50px"  style={{ margin: '0 5px' }}/

Ligero y fácil de empacar

A pesar de que React Icons contiene cientos de íconos, no deja una gran huella en tu paquete.

Optimizaciones de Webpack/Parcel

react-iconsTiene una configuración en su package.jsonarchivo para indicar a los empaquetadores que realicen un tree-shaking al crear su aplicación. Esto significa que solo importse incluyen íconos explícitamente.

Formato SVG

Todos los íconos react-iconsson SVG (gráficos vectoriales escalables). Esto significa que los tamaños de archivo por ícono son significativamente más pequeños que si fueran formatos de imagen rasterizada (como *.jpego *.png). Los archivos SVG son generalmente órdenes de magnitud más pequeños que otros formatos de imagen, especialmente para elementos como íconos.

Amigable con el código abierto

Puede usarlo react-iconsen cualquier proyecto comercial o no comercial gracias a las licencias permisivas de cada una de las bibliotecas:

• Fuente impresionanteLicencia CC BY 4.0
• IoniconesInstituto Tecnológico de Massachusetts (MIT)
• Iconos de diseño de materialesLicencia Apache versión 2.0
• Iconos tipográficosCC BY-SA 3.0
• Íconos de Github OcticonsInstituto Tecnológico de Massachusetts (MIT)
• PlumaInstituto Tecnológico de Massachusetts (MIT)

react-iconsen sí se publica bajo la licencia MIT.

Nota : vea la colección de íconos incluidos en react-iconssu sitio web de demostración