README
Loggi spritesheet builder
This is Loggi's spritesheet builder library.
Esta biblioteca cria sprites svg para as aplicações da loggi, a ideia é que cada familia de svgs seja um sprite.
O objetivo da biblioteca é gerar sprites svg para uso nas aplicações Loggi no formato svg mesmo e não em PNG pois SVG é mais leve, vai direto para a marcação melhorando assim o uso, a atualização e inclusive a personalização pois conseguimos alterar no css sem necessidade de criar uma nova imagem.
Installation
Para utilizar alguma das familias de svg você precisa instalar ele na sua aplicação utilizando npm e depois é so sair utilizando =D
npm i @loggi/<nome da familia>
How to use?
O recomendado é utilizar svgs dentro da marcação HTML assim é possivel personalizar ele, sem contar que fica mais leve pois faz parte do código a ser renderizado.
<svg
viewBox="0 0 24 24"
aria-hidden="true"
>
<use xlink:href="path-to-svg-sprite-file/sprite-name.svg#svg-id" />
</svg>
Se utilizar algum framework ou library JS você pode criar um componente para facilitar seu uso.
Coleções disponíveis
As coleções/familias de svg disponíveis até o momento são:
- @loggi/cliparts
- @loggi/icons
- @loggi/emojis
Requirements
NodeJS and npm
Building spritesheets
Para incluir novos icones ao arquivo de sprites svg-sprite-icones.svg
você precisa:
- Editar o arquivo
.svg
em algum programa de edição para limpar e normalizar a imagem de acordo com estes padrões:- Eliminar todos os agrupamentos para otimizar o tamanho do arquivo. Deixe apenas os desenhos na raiz do arquivo.
- O canvas deve ser igual a 24px x 24px
- O maior lado do desenho (largura ou altura) deve ser igual a 24px aumentando ou diminuindo proporcionalmente o outro lado.
- Centralizar o desenho dentro do canvas
- A cor do desenho deve ser
#000000
para facilitar a visualização no preview - Transformar em
path
os desenhos que forem de outro tipo
- Limpar automágicamente os arquivos salvos e já editados no software de desenho vetorial utilizando o comando:
npm run optimize
- Abrir o arquivo
.svg
em um editor de texto e retirar as seguintes tags (devem estar vazias/sem conteúdo):style="isolation:isolate"
<defs>...</defs>
<g clip-path="...
e as tags de fechamento</g>
- Fazer um commit das alterações feitas nos arquivos
.svg
modificados
Contributing
If you'd like to contribute, please create a feature branch. Pull requests are warmly welcome <3
TODO list
- Estrutura básica para build de sprites svg
- Componente React para uso dos sprites de forma abstrata
- Tarefa de bump e publicação das bibliotecas
- Publicação de cada uma das coleções de forma semi-automatizada
- Documentação básica de uso, instalação e contribuição