Introdução

A aarin-assets é uma biblioteca de ativos visuais que fornece ícones e ilustrações em formato SVG, prontos para uso com React.

Ela foi projetada para ser simples, extensível e com suporte a múltiplas famílias de ícones e pacotes de ilustrações — útil em aplicações white-label ou multi-marcas.

Requisitos

Para utilizar a biblioteca, é necessário que o projeto esteja utilizando:

• Node.js na versão 20 ou superior
• React na versão 19 ou superior

Instalação

npm install aarin-assets

Configuração inicial

Antes de utilizar os componentes Icon e Illustration, é necessário envolver sua aplicação com o AssetFamilyProvider. Esse provider define qual família de ícones e pacote de ilustrações estará disponível globalmente.

import { AssetFamilyProvider, Icon, Illustration } from 'aarin-assets';

const config = {
  icon: {
    family: 'streamline',
  },
  illustration: {
    package: 'bradesco',
    bucketUrl: 'https://cdn.example.com/illustrations',
  },
};

<AssetFamilyProvider config={config}>
  <Icon icon="pix" width={50} height={50} />
  <Illustration name="car" width={300} height={200} alt="Car illustration" />
</AssetFamilyProvider>;

Suporte a diferentes frameworks

Para projetos que não usam Next.js, você pode customizar o componente de imagem usado pelas ilustrações:

<Illustration
  name="car"
  width={300}
  height={200}
  alt="Car illustration"
  ImageComponent={(props) => <img {...props} />}
/>

Documentação completa

Para mais detalhes sobre uso, estilização, catálogo de ícones e criação de novos ícones, consulte a documentação completa em:

Documentação