"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > 5 etapas para adicionar ícones personalizados nativos do React

5 etapas para adicionar ícones personalizados nativos do React

Postado em 2025-04-17
Navegar:821

Gerenciando ícones personalizados no react Native pode ser desafiador, especialmente com ferramentas tradicionais como Fontello ou ICOMOON. Essas ferramentas geralmente não têm integração dinâmica com estruturas modernas, tornando o processo de adicionar ou atualizar ícones complicados e demorados.

Monicon oferece uma solução moderna para esses desafios, fornecendo uma maneira flexível e eficiente de gerenciar ícones em seus projetos. Suportando estruturas populares como React, React Native, Next.js, Vue, Nuxt, Sieve e muito mais, Monicon simplifica o processo de integração de ícones personalizados. Com acesso a mais de 200.000 ícones de bibliotecas de renome, como design de materiais, penas e fontes impressionantes, o Monicon garante que você tenha todas as ferramentas necessárias para uma experiência de gerenciamento de ícone perfeita e poderosa.

Por que usar o Monicon?

  • Biblioteca de ícone enorme : Obtenha acesso a mais de 200.000 ícones de conjuntos famosos como design de material, penas e fontes impressionantes.
  • ícones personalizados : você pode criar ícones personalizados e usá -los em seus projetos. Monicon facilita adicionar seus próprios ícones.
  • funciona com as ferramentas modernas : Monicon suporta ferramentas como Vite, Webpack, Rollup e outros, por isso está pronto para qualquer projeto.
  • Fast e eficiente : Monicon carrega os ícones rapidamente para manter seu projeto funcionando sem problemas. Sem tremores ou atrasos.
  • fácil de usar : funciona com react, vue, svelte, next.js e outras estruturas populares, tornando a integração do ícone simples. Você pode descobrir ícones no site do Icones.
  • personalizável : você pode alterar facilmente o tamanho, a cor e outros recursos dos ícones para se ajustar ao seu design.
  • colaboração : Monicon ajuda você a colaborar com os designers para acelerar o processo de design e obter melhores resultados. Iconify figma plugin permite que você use ícones diretamente no figma.
  • FREE E ORDEM ORDEM : Monicon é gratuito para usar e de código aberto, para que você possa usá -lo em qualquer projeto sem restrições.

? Monicon Docs
? Monicon Github

1. Crie um novo projeto

Execute o seguinte comando em seu terminal para criar um novo projeto Expo:

! CD My-New-App
npx create-expo-app my-new-app
cd my-new-app
    Substitua My-New-App pelo seu nome de projeto preferido.
  • Quando solicitado, escolha um modelo (por exemplo,, em branco, em branco (tipsCript) ou guias).
2. Instale dependências

Execute o seguinte comando para instalar as dependências necessárias:


npm i -d @monicon/metro @monicon/babel -plugin @monicon/carregador NPX Expo Install @Monicon/Native React-native-SVG
npx create-expo-app my-new-app
cd my-new-app
3. Crie configuração de metrô

Crie um arquivo metro.config.js:


const {getDefaultConfig} = requer ("expo/metro-config"); const {withMonicon} = requer ("@Monicon/Metro"); const {loadlocalCollection} = requer ("@monicon/carregador"); const config = getDefaultConfig (__ dirname); Module.Exports = WithMonicon (Config, { CustomCollections: { "My-App": LoadLocalCollection ("Ativos/ícones"), }, });
npx create-expo-app my-new-app
cd my-new-app
4. Crie Babel Config

Crie um arquivo babel.config.js:


module.exports = function (API) { api.cache (true); retornar { Predefinições: ["Babel-Preset-EXPO"], Plugins: [["@Monicon/Babel-Plugin"]], }; };
npx create-expo-app my-new-app
cd my-new-app
5. Adicione ícones ao projeto

Adicione seus ícones personalizados à pasta Ativos/ícones.

Ícones de exemplo

    Compass.svg
  • house.svg
6. Atualize o app/(guias)/_ layout.tsx

modifique o arquivo _layout.tsx da seguinte forma:


import {Monicon} de "@Monicon/nativo"; ( ), }} /> ( ), }} />
npx create-expo-app my-new-app
cd my-new-app
7. Inicie o servidor de desenvolvimento

Execute o seguinte comando para iniciar seu servidor de desenvolvimento:


expo Start
npx create-expo-app my-new-app
cd my-new-app
Final

How to add custom icons in React Native in 5

Declaração de lançamento Este artigo é reimpresso em: https://dev.to/oktaysenkan/how-to-add-custom-iCons-in-the-react-native-in-2025-1g4b?1 Se houver alguma infração, entre em contato com [email protected] para excluí-lo.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3