Pular para o conteúdo
PT

10 ícones · licença MIT

Ícones animados de edição de texto

Negrito, itálico, sublinhado, alinhamento e listas para barras de ferramentas de rich text. Uma animação rápida no clique confirma que a formatação foi aplicada, o que ajuda em editores em que a mudança no próprio texto é sutil.

Dos 10 ícones, 8 tocam de novo a cada clique e 2 tocam uma vez no hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de edição de texto

Onde usar

  • Barras de ferramentas de editores de rich text
  • Caixas de escrita de comentários e mensagens
  • Editores de CMS e de posts de blog
  • Apps de Markdown e de anotações
  • Controles de alinhamento de texto em ferramentas de design

Por interação

  • Ícones animados no clique · 8

    Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline.

  • Ícones animados que tocam no hover · 2

    Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Hash, List.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Reproduzir no clique” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque bold pelo nome que aparece na página do ícone.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import bold from 'react-useanimations/lib/bold';

<UseAnimations animation={bold} size={32} />

Com o shadcn/ui, a CLI adiciona um componente pronto:

npx shadcn@latest add https://useanimations.com/r/bold.json
import { AnimatedBold } from '@/components/animations/bold';

<AnimatedBold size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de edição de texto estão incluídos?

10 ícones: Align Center, Align Justify, Align Left, Align Right, Bold, Hash, Italic, List, Type e Underline. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de edição de texto no React?

Instale o react-useanimations, adicione import bold from 'react-useanimations/lib/bold' e renderize <UseAnimations animation={bold} size={32} />. O ícone executa a interação “Reproduzir no clique” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/bold.json.

Posso usar estes ícones animados de edição de texto sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/bold.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.