cssbrasil / animated-icons Goto Github PK

Como usaremos os ícones na prática? Pensei em duas variantes:

Uma para ícones que vão de um forma à outra, ficando ai-foo-to-bar

<label class="ai ai-foo-to-bar">
  <input type="checkbox"> <!-- poderia ser radio também mas seria opcional, já que pode ser feito um simples toggle de class "active" no wrapper -->
  <span></span><span></span><span></span>
  <!-- usando pseudo-elementos (before/after) o CSS fica bem verboso, por isso esse trio de <span> -->
</label>

E outra para ícones simples (como radio e checkbox), ficando apenas ai-foo:

<input type="checkbox" id="foo" class="ai-trigger">
<label class="ai ai-foo" for="foo"></label>

Mas estou achando meio verboso; fora que duas variantes pode não ser algo muito intuitivo.. 🤔

Qual nome sugerem para o pacote no npm? 🤔

Quais padrões vocês recomendam para usarmos nesse projeto?

O que usaremos para compilar o código #2? Pessoalmente sugiro o Gulp, por ser extremamente simples e conhecido; daí deixamos atalho pras tasks como scripts npm no package.json

Por favor use os comentários abaixo para votar

Seria interessante termos alguns padrões em relação ao comportamento dos ícones.

Minhas sugestões:

• os ícones deverão usar currentColor para definir a cor de seus componentes (pois assim na prática simplesmente se ajustarão ao contexto ou ainda poderão ter sua cor definida com um simples color)
• evitar ao máximo alterações de tamanho/posicionamento como height, width, top, left etc, dando preferência para animações usando transform (pois assim as animações usarão a GPU do cliente, sendo muito mais suaves)
• os elementos internos sempre deverão ter position: absolute (para evitar reflow)

Depois de definirmos esses pontos deixaremos um GUIDELINES.md (ou algo assim) na futura documentação oficial. O que vocês sugerem? (favor deixar um porquê e, se possível, uma referência)

Issue para discutir sobre uma boa maneira de demonstrar o que esse projeto pode fazer.
Protótipo atual: https://codepen.io/ivanaugustobd/pen/gXOxQL