loggi-clipartdeprecated

Loggi's UI clipart library

Usage no npm install needed!

<script type="module">
  import loggiClipart from 'https://cdn.skypack.dev/loggi-clipart';
</script>

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:

  1. 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
  2. Limpar automágicamente os arquivos salvos e já editados no software de desenho vetorial utilizando o comando: npm run optimize
  3. 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>
  4. 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