Unicred Icons
Official SVG icons library for Unicred.
Unicred Design System
·
Grupo Teams
@unicred/unicred-icons
50+ icons
Install
Unicred Icons are packaged up and published. We only include the processed SVGs in this package—it's up to you and your team to implement. Read our docs at for usage instructions.
npm install --save @unicred/unicred-iconsUso Básico
<head>
<link href="./diretorio-da-lib/unicred-icons.css" rel="stylesheet" />
</head>
<body>
<i class="ubr-chat"></i>
<i class="ubr-chat" style="color: green;"></i>
<span style="color: green; font-size: 32px">
<i class="ubr-chat"></i>
</span>
</body>Organizando ícones
Nomes de ícones e className serão gerados a partir de um slug do caminho relativo + nome de base de cada arquivo .svg encontrado no diretório de entrada.
Isso permite organizar seus ícones em diretórios, o que pode ser útil se um projeto usar um grande número de ícones.
Considerando o seguinte diretório de entrada ./icons:
icons
├── logo.svg
├── social
│ ├── facebook.svg
│ └── twitter.svg
└── chevron
├── left.svg
└── right.svg
Executar fantasticon ./icons -o dist irá gerar um conjunto de fontes com os seguintes seletores de IDs de ícone / CSS:
E os IDs de ícone gerados seriam:
| Icon ID | CSS selector |
|---|---|
ubr-social-facebook |
.ubr-social-facebook |
ubr-social-twitter |
.ubr-social-twitter |
ubr-chevron-left |
.ubr-chevron-left |
ubr-chevron-right |
.ubr-chevron-right |
Orientações para o Design
Para geração correta dos ícones siga as seguintes instruções abaixo:
- Curvas em Path não em Line;
- Não utilizar diferentes tons (Usar cor preta);
- Utilizar única forma;
- Todos nas mesmas dimensões;
- Nomenclatura em Inglês e estrutura ("ubr-name".svg);
- Utilize "-" no nome dos ícones.