DEV Community

Altencir Junior
Altencir Junior

Posted on

1

Iconify em React Native

O Iconify é uma biblioteca popular de ícones para a web e aplicativos móveis, incluindo o React Native. Ele fornece um conjunto abrangente de ícones que podem ser facilmente integrados em seus projetos. Neste artigo iremos fazer sua instalação e aprender um pouco sobre seu uso:

Instalando o Iconify -

Certifique-se de ter o Node.js e o npm (gerenciador de pacotes do Node.js) instalados em seu sistema. Em seguida, abra o terminal e execute o seguinte comando para instalar a biblioteca Iconify:

npm install @iconify/react-native
Enter fullscreen mode Exit fullscreen mode

Utilizando o Iconify -

Depois de instalar a biblioteca, você pode importar os componentes necessários no seu arquivo de componente React Native. Geralmente, você importará o componente Icon, que é usado para exibir um ícone específico. Você também pode importar ícones específicos do pacote de ícones que deseja usar. Aqui está um exemplo de importação:

import Icon from '@iconify/react-native';
import homeIcon from '@iconify-icons/mdi/home';
Enter fullscreen mode Exit fullscreen mode

Agora você pode usar o componente Icon para exibir um ícone em seu aplicativo. O componente Icon requer duas propriedades principais: icon e size. A propriedade icon define qual ícone será exibido e a propriedade size define o tamanho do ícone. Aqui está um exemplo de uso:

<Icon icon={homeIcon} size={24} />
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, estamos exibindo o ícone "home" com tamanho 24. Você também pode usar outras propriedades para personalizar a aparência do ícone, como color para definir a cor do ícone e style para adicionar estilos CSS adicionais ao ícone.

<Icon icon={homeIcon} size={24} color="#ff0000" style={{ marginLeft: 10 }} />
Enter fullscreen mode Exit fullscreen mode

Este é um exemplo básico de como utilizar o Iconify em um projeto React Native. Lembre-se de que você pode explorar a documentação oficial do Iconify para obter mais informações sobre os recursos e opções disponíveis.(https://github.com/oktaysenkan/react-native-iconify/blob/main/CONTRIBUTING.md).

Obrigado por ler até aqui.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay