fundamentos

iconografia

Nossos ícones visam ajudar encontrar a informações na interface e realizar tarefas.

demo

Ícone é uma representação gráfica de um objeto ou uma ação.

(opcional)
import { AdvancedFilterFill } from '@olist/design-system-icons';

// changeColor
<AdvancedFilterFill color="red" />

// changeSize
<AdvancedFilterFill width={40} height={40} />

como instalar

Nosso pacote exporta ícones tanto para web (react) quanto para react-native.

Para instalar você só precisa executar em seu projeto:

yarn add @olist/design-system-icons
// or
npm install --save @olist/design-system-icons

Para utilizar com react-native é preciso adicionar uma configuração a mais para funcionar corretamente na plataforma Android:

Basta adicionar o seguinte código no arquivo android/app/proguard-rules.pro:

-keep public class com.horcrux.svg.** {*;}

formatação

No olist, utilizamos o tamanho padrão de 24px os ícones, que podem ser escalados para adequar melhor na interface. Eles devem seguir uma grid padrão, encontrada na biblioteca do Figma, e utilizar espessura de 2px.

Ícone de editar. No fundo, a grid usada para criar o ícone. Destaque na
espessura de 2px do ícone.

formatação dos ícones

uso

O ícone deve ser usado como elemento auxiliar a interface na maior parte das vezes, para facilitar o reconhecimento das funções. Somente alguns ícones podem ser usados sem o auxilio de texto, estes estão classificados como ícones "conhecidos”.

Caso o ícone seja usado sem o texto auxiliar, esse ícone deve possuir descrição para leitor de tela.

Botão com ícone e texto. Ícone no formato de uma bolsa e um x no centro. Texto ”cancelar pedido”.
certoÍcones menos conhecidos precisam de texto para auxiliar a identificação da sua função.
Botão com somente com ícone. Ícone no formato de uma bolsa e um x no centro.
erradoNão deixe ícones pouco conhecidos sem auxilio textual.

conteúdo relacionado

Migração do United para Olist Design System

// United
import { Icon } from '@olist/united';
<Icon name="lock-outline" color="red" size="40px" />;

// Design System
import { LockOutline } from '@olist/design-system-icons';
<LockOutline color="red" width={40} height={40} />;