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.

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.

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.

certoÍcones menos conhecidos precisam de texto para auxiliar a identificação da sua função.

erradoNão deixe ícones pouco conhecidos sem auxilio textual.

conteúdo relacionado

• A complete guide to iconography
• Google Fonts: icons

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} />;