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
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