react icons
v5.3.0
Incluya íconos populares en sus proyectos de React fácilmente con react-icons , que utiliza importaciones de ES6 que le permiten incluir solo los íconos que utiliza su proyecto.
yarn add react-icons
# or
npm install react-icons --saveuso de ejemplo
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} Vea la documentación para obtener más ejemplos de uso y cómo utilizar iconos de otros paquetes. NOTA : cada paquete de iconos tiene su propia subcarpeta en react-icons desde los que importa.
Por ejemplo, para usar un ícono de Material Design , su importación sería: import { ICON_NAME } from 'react-icons/md';
Nota Esta opción no ha tenido una nueva versión desde hace algún tiempo. Más información #593
Si su proyecto crece en tamaño, esta opción está disponible. Este método tiene la contrapartida de que la instalación del paquete lleva mucho tiempo.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveuso de ejemplo
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | Biblioteca de iconos | Licencia | Versión | Contar |
|---|---|---|---|
| Iconos circunstantes | Licencia MPL-2.0 | 1.0.0 | 288 |
| Fuente impresionante 5 | Licencia CC BY 4.0 | 5.15.4-3-gafecf2a | 1612 |
| Fuente impresionante 6 | Licencia CC BY 4.0 | 6.5.2 | 2045 |
| Ionicones 4 | MIT | 4.6.3 | 696 |
| Ionicones 5 | MIT | 5.5.4 | 1332 |
| Iconos de diseño de materiales | Licencia Apache versión 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| típicos | CC BY-SA 3.0 | 2.1.2 | 336 |
| Iconos de Octicons de Github | MIT | 18.3.0 | 264 |
| Pluma | MIT | 4.29.1 | 287 |
| lucidez | ISC | v5.1.0-6-g438f572e | 1215 |
| Iconos del juego | CC POR 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Iconos del tiempo | SIL OFL 1.1 | 2.0.12 | 219 |
| Devicones | MIT | 1.8.0 | 192 |
| Iconos de diseño de hormigas | MIT | 4.4.2 | 831 |
| Iconos de arranque | MIT | 1.11.3 | 2716 |
| Icono de remezcla | Licencia Apache versión 2.0 | 4.2.0 | 2860 |
| Iconos de colores planos | MIT | 1.0.2 | 329 |
| Iconos de ojales | Licencia Apache versión 2.0 | 4.12.1 | 635 |
| Heroiconos | MIT | 1.0.6 | 460 |
| Heroiconos 2 | MIT | 2.1.3 | 888 |
| Iconos simples | CC0 1.0 Universal | 12.14.0 | 3209 |
| Iconos de líneas simples | MIT | 2.5.5 | 189 |
| IcoMoon Gratis | Licencia CC BY 4.0 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| CajaIconos | MIT | 2.1.4 | 1634 |
| css.gg | MIT | 2.1.1 | 704 |
| Iconos de código VS | CC POR 4.0 | 0.0.35 | 461 |
| Iconos de mesa | MIT | 3.2.0 | 5237 |
| Iconos de Themify | MIT | v0.1.2-2-g9600186 | 352 |
| Iconos de base | MIT | @radix-ui/[email protected] | 318 |
| Iconos de fósforo | MIT | 2.1.1 | 9072 |
| Línea Icons8 Impresionante | MIT | 1.3.1 | 1544 |
Puede agregar más íconos enviando solicitudes de extracción o creando problemas.
Puede configurar accesorios de iconos de reacción utilizando la API de contexto de React.
Requiere React 16.3 o superior.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| Llave | Por defecto | Notas |
|---|---|---|
color | undefined (heredar) | |
size | 1em | |
className | undefined | |
style | undefined | Puede sobrescribir tamaño y color |
attr | undefined | Sobrescrito por otros atributos |
title | undefined | Descripción del icono de accesibilidad |
La ruta de importación ha cambiado. Necesitas reescribir desde el estilo antiguo.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}¿Terminar con un paquete JS grande? Mira este problema.
A partir de la versión 3, vertical-align: middle no se proporciona automáticamente. Utilice IconContext para especificar className o especificar un estilo en línea.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className globalComponente
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} Las dependencias en @types/react-icons se pueden eliminar.
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh construirá todo el proyecto. Consulte también scripts de CI para obtener más información.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildPrimero, consulte la discusión para ver si a alguien le gustaría agregar un conjunto de íconos.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
Los archivos SVG que se van a recuperar se administran en este archivo. Edite este archivo y ejecute yarn fetch && yarn check && yarn build .
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
Nota El proyecto no acepta activamente relaciones públicas para el sitio de vista previa en este momento.
El sitio de vista previa es el sitio web react-icons , creado en Astro+React.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start La demostración es un modelo estándar de la aplicación Create React con react-icons agregados como una dependencia para facilitar las pruebas.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG es compatible con todos los principales navegadores. Con react-icons , puede ofrecer solo los íconos necesarios en lugar de un archivo de fuente grande a los usuarios, lo que le ayuda a reconocer qué íconos se utilizan en su proyecto.
MIT
