React Icons: ícones otimizados no React na prática

Contexto do material

O ponto de partida do conteúdo é específico: Nesse vídeo eu vou te mostrar como utilizar ícones dentro do React através de uma biblioteca que é muito simples e otimizada para a gente fazer isso. Meu nome é Gustavo Campello e esse daqui é o nosso canal, onde a gente fala sobre desenvolvimento web.

Em vez de genérico, recorte a restrição real: Eu peço por favor que você curta esse vídeo se for útil, às vezes a gente esquece de curtir, né? Então curte já, comenta também se você ficar com qualquer dúvida, se inscreve no canal.

Mudança operacional

O que muda no fluxo de trabalho: E se você não gostar do vídeo por algum motivo, você pode dar um dislike, sem problema, beleza? Mas curte se você achar que foi bacana, isso dapoia muito.

Evidência do próprio material para ancorar a mudança: Olha só, a biblioteca que nós vamos utilizar aqui é a React Icons. A gente pode pesquisar aqui, qualquer um que for o ícone.

Armadilhas

Onde o time costuma se enganar neste tema: Porque ela reúne vários pacotes aqui, várias outras bibliotecas. Então a gente vai ter acesso a uma grande variedade de ícones.

Demo sem métrica, automação sem ownership e checklist copiado de outro contexto são as falhas mais comuns.

Para `react-icons-biblioteca-otimizada`, pergunte: o usuário completa a tarefa sem você na call?

Próximos passos esta semana

Para aprofundar com links reais do ecossistema CrazyStack, comece pelo /blog, pratique com /curso-cursor-avancado-configuracoes-pro ou /curso-claude-code-9-dicas-profissionais, e se quiser formação completa use /programa-crazystack ou /checklist-independencia-cursor.

Ampliação a partir do material de origem

Nesse vídeo eu vou te mostrar como utilizar ícones dentro do React através de uma biblioteca que é muito simples e otimizada para a gente fazer isso. Meu nome é Gustavo Campello e esse daqui é o nosso canal, onde a gente fala sobre desenvolvimento web. Eu peço por favor que você curta esse vídeo se for útil, às vezes a gente esquece de curtir, né? Então curte já, comenta também se você ficar com qualquer dúvida, se inscreve no canal. E se você não gostar do vídeo por algum motivo, você pode dar um dislike, sem problema, beleza? Mas curte se você achar que foi bacana, isso dapoia muito. Bora para a tela do computador. Olha

utilizar essa biblioteca? Porque ela reúne vários pacotes aqui, várias outras bibliotecas. Então a gente vai ter acesso a uma grande variedade de ícones. Só que o bom do React Icons é que a gente só importa realmente o ícone que a gente for utilizar. Diferentemente, por exemplo, do fonte Awesome Que a gente precisa importar todos os ícones e somente através da classe, né, a gente vai escolher qual é o ícone que vai ser utilizado dentro do projeto. Aqui não. Aqui a gente vai ter acesso a todos os ícones, só que só vai realmente importar o que a gente for utilizar. Às vezes você tinha que importar toda uma biblioteca para que você ia utilizar somente

a gente vir aqui, ó. no nosso terminal. A gente vai dar um npn install, né? O npn e react icons. Só isso. Agora é só dar um enter, então ele já vai fazer a instalação. Eu não vou dar um enter aqui porque eu já instalei, tá? Eu tava com esse projetinho aqui que a gente tava criando o Airbnb junto com o da nossa comunidade. A gente tem uma comunidade de desenvolvimento web chamada WebHub, né? Onde a gente ensina design, desenvolvimento front-end, back-end. Eu tô criando com eles esse projetinho aqui que vai ser a página do Airbnb. Por enquanto, a gente só tem a logo aqui, né? A gente só escriando o header, mas

para que eu possa ajudar aí, né? Quem tiver dúvida sobre isso. Então, aqui dentro do React Icons, a gente vai escrever Globo, ou então Web, não sei, né? Aí, já apareceu vários Globos aqui para a gente. Você pode ver que ou a gente pode pesquisar, ou então vocês podem entrar em alguma biblioteca específica. Por exemplo, se você quiser pegar ícones do Fonte Alsa, ou então do Material Icons, também tem aqui dentro. Aqui, Material Design Icons. Esvendo? E aí, vamos supor que eu não estou pensando muito em qual vai ser o pacote que eu vou querer pegar. Eu só vou escrever Globe aqui. Dei o Enter. Eu vou querer pegar, por exemplo, esse daqui mesmo.

esimportando esse ícone. Esse CI aqui seria porque a gente esimportando o ícone desse Circum aqui. Se a gente fosse pegar, por exemplo, o ícone do font Awesome, seria as iniciais FA. Olha lá, por exemplo, FA e o nome do nosso ícone. E a gente só vai importar realmente esse ícone. Então é muito fácil. Pegando esse exemplo aqui do Globo. eu vou dar um cliquezinho aqui ó basta a gente copiar esse importe ou então você pode fazer manualmente mesmo dentro aqui do nosso componente é mais válido que a gente importe isso dentro do componente realmente que vai ser utilizado esse ícone então só jogar aqui ó importei e agora basta eu

caiu aqui É porque sempre quando a gente faz uma instalação, a gente precisa dar um pause aqui no nosso servidor. Então, eu vou dar um npn run dev aqui para a gente poder abrir de novo. Local host é lá. Você pode ver que já tem o símbolo do nosso globo aqui. Já temos esse ícone. Como que serve para a gente personalizar? Isso que é muito legal também. Vou colocar tudo em uma página só. Isso que é muito legal também do React Icons é que a gente pode personalizar através de props. Então, a gente tem aqui o nosso CIGlobo. Tchau. dividir tela, só para que vocês possam ver aqui. Se eu quiser, por exemplo, personalizar a

Este artigo (`react-icons-biblioteca-otimizada`) existe para converter material bruto em decisão. Se a sua restrição for diferente (caixa, time, stack), adapte o experimento — não o discurso. Continue explorando no /blog e use /programa-crazystack quando quiser trilha completa; para fluxo com IA no editor, /checklist-independencia-cursor e /curso-cursor-avancado-configuracoes-pro.