Download react icons - download de código-fonte react icons

react icons

Outro código-fonte

v5.3.0

Baixar

Ícones de reação

Inclua ícones populares em seus projetos React facilmente com react-icons , que utiliza importações ES6 que permitem incluir apenas os ícones que seu projeto está usando.

Instalação (para projeto moderno padrão)

yarn add react-icons
# or
npm install react-icons --save

exemplo de uso

 import { FaBeer } from "react-icons/fa" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

Veja a documentação para mais exemplos de uso e como usar ícones de outros pacotes. NOTA : cada pacote de ícones tem sua própria subpasta nos react-icons dos quais você importa.

Por exemplo, para usar um ícone do Material Design , sua importação seria: import { ICON_NAME } from 'react-icons/md';

Instalação (para meteorjs, gatsbyjs, etc)

Nota Esta opção não tem um novo lançamento há algum tempo. Mais informações #593

Se o seu projeto aumentar de tamanho, esta opção estará disponível. Este método tem a desvantagem de levar muito tempo para instalar o pacote.

yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save

exemplo de uso

 import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

Ícones

Biblioteca de ícones	Licença	Versão	Contar
Ícones de Circunferência	Licença MPL-2.0	1.0.0	288
Fonte incrível 5	Licença CC BY 4.0	5.15.4-3-gafecf2a	1612
Fonte incrível 6	Licença CC BY 4.0	6.5.2	2045
Iônicos 4	MIT	4.6.3	696
Iônicos 5	MIT	5.5.4	1332
Ícones de design de materiais	Licença Apache versão 2.0	4.0.0-98-g9beae745bb	4341
Tipos	CC BY-SA 3.0	2.1.2	336
Ícones do Github Octicons	MIT	18.3.0	264
Pena	MIT	4.29.1	287
Lúcida	ISC	v5.1.0-6-g438f572e	1215
Ícones de jogo	CC POR 3,0	12920d6565588f0512542a3cb0cdfd36a497f910	4040
Ícones meteorológicos	SIL DE 1.1	2.0.12	219
Dispositivos	MIT	1.8.0	192
Ícones de design de formigas	MIT	4.4.2	831
Ícones de inicialização	MIT	1.11.3	2716
Ícone de remix	Licença Apache versão 2.0	4.2.0	2860
Ícones de cores planas	MIT	1.0.2	329
Ícones de ilhó	Licença Apache versão 2.0	4.12.1	635
Heroícones	MIT	1.0.6	460
Heroícones 2	MIT	2.1.3	888
Ícones Simples	CC0 1.0 Universal	12.14.0	3209
Ícones de linha simples	MIT	2.5.5	189
IcoMoon Grátis	Licença CC BY 4.0	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
Ícones de caixa	MIT	2.1.4	1634
css.gg	MIT	2.1.1	704
Ícones de código VS	CC POR 4,0	0,0,35	461
Ícones de mesa	MIT	3.2.0	5237
Ícones temáticos	MIT	v0.1.2-2-g9600186	352
Ícones de raiz	MIT	@radix-ui/[email protected]	318
Ícones de fósforo	MIT	2.1.1	9072
Linha Icons8 incrível	MIT	1.3.1	1544

Você pode adicionar mais ícones enviando solicitações pull ou criando problemas.

Configuração

Você pode configurar props react-icons usando a API React Context.

Requer React 16.3 ou superior.

 import { IconContext } from "react-icons" ;

< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
  < div >
    < FaFolder / >
  < / div >
< / IconContext . Provider > ;

Chave	Padrão	Notas
`color`	`undefined` (herdar)
`size`	`1em`
`className`	`undefined`
`style`	`undefined`	Pode substituir tamanho e cor
`attr`	`undefined`	Substituído por outros atributos
`title`	`undefined`	Descrição do ícone para acessibilidade

Migrando da versão 2 -> 3

Alterar estilo de importação

O caminho de importação foi alterado. Você precisa reescrever do estilo antigo.

 // 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 >
  ) ;
}

Acabando com um grande pacote JS? Confira esta questão.

CSS de ajuste

A partir da versão 3, vertical-align: middle não é fornecido automaticamente. Use IconContext para especificar className ou especificar um estilo embutido.

Estilo Inline Global

 < IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } >

Estilo global `className`

Componente

 < IconContext . Provider value = { { className : 'react-icons' } } >

CSS

. react-icons {
  vertical-align : middle;
}

Suporte nativo TypeScript

Dependências de @types/react-icons podem ser excluídas.

Fio

yarn remove @types/react-icons

NPM

npm remove @types/react-icons

Contribuindo

./build-script.sh construirá todo o projeto. Consulte também scripts de CI para obter mais informações.

Desenvolvimento

yarn
cd packages/react-icons
yarn fetch  # fetch icon sources
yarn build

Conjunto de ícones Adicionar/Atualizar

Primeiro, verifique a discussão para ver se alguém gostaria de adicionar um conjunto de ícones.

https://github.com/react-icons/react-icons/discussions/categories/new-icon-set

Os arquivos SVG a serem obtidos são gerenciados neste arquivo. Edite este arquivo e execute yarn fetch && yarn check && yarn build .

https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts

Visualização

Nota O projeto não está aceitando ativamente relações públicas para o site de visualização no momento.

O site de visualização é o site react-icons , construído em Astro+React.

 cd packages/react-icons
yarn fetch
yarn build

cd ../preview-astro
yarn start

Demonstração

A demonstração é um modelo Create React App com react-icons adicionados como uma dependência para facilitar o teste.

 cd packages/react-icons
yarn fetch
yarn build

cd ../demo
yarn start

Por que componentes React SVG em vez de fontes?

SVG é compatível com todos os principais navegadores. Com react-icons , você pode servir apenas os ícones necessários em vez de um grande arquivo de fonte para os usuários, ajudando você a reconhecer quais ícones são usados em seu projeto.