Ícones

799 ícones, desenhados para o Vitral

Um conjunto de contorno numa grade de 24×24: traços arredondados de 2 unidades, sem preenchimento, na cor atual do texto. Cada ícone é uma exportação nomeada de @vitral/icons, então uma aplicação só leva no bundle os que importa. Tamanho e traço vêm dos tokens icon.size e icon.strokeWidth do tema; size e stroke-width os sobrescrevem num ícone.

799 ícones

Setas e navegação 63

Interface e ações 93

Formas 20

Arquivos e pastas 32

Texto e formatação 37

Mídia 44

Comunicação 33

Pessoas e contas 19

Dispositivos e hardware 28

Desenvolvimento 31

Gráficos e dados 20

Mapas e localização 19

Transporte 21

Tempo e calendário 19

Clima e natureza 37

Segurança 20

Saúde e medicina 22

Casa e edifícios 26

Comida e bebida 30

Escola e educação 36

E-commerce 32

Finanças 32

Jogos 50

Esportes 35

Ícones de outras bibliotecas

Toda prop icon, seja num botão, num item de menu, num toast ou num nó de árvore, passa pelo <Icon>, que aceita mais do que este conjunto: o componente Vue de outra biblioteca, markup SVG em que você confia ou as classes de uma fonte de ícones. Seja o que for, recebe a classe vt-icon, o tamanho do tema e a mesma acessibilidade, oculta ou rotulada.

Outras bibliotecas

<script setup lang="ts">
import { h, markRaw } from 'vue';
import { Camera } from 'lucide-vue-next';
import { Icon as Iconify } from '@iconify/vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { graduationCap } from '@vitral/icons';

// A component that needs its own props is wrapped in a function.
const MdiHome = () => h(Iconify, { icon: 'mdi:home' });
const FaUser = () => h(FontAwesomeIcon, { icon: faUser });

// Components kept in a model are marked raw, so Vue does not make them reactive.
const items = [
    { label: 'Photo', icon: markRaw(Camera) },
    { label: 'Home', icon: MdiHome },
    { label: 'Course', icon: graduationCap }
];
</script>

<template>
    <Button label="Shoot" :icon="Camera" />
    <Button label="Profile" :icon="FaUser" />
    <Button label="Me" icon="fa-solid fa-user" />        <!-- an icon font's classes -->
    <Button label="Logo" :icon="'<svg viewBox=…>…</svg>'" />  <!-- trusted markup -->
    <Menu :model="items" />
</template>