# Icons
O componente icon permite inserir ícones facilmente em outros componentes ou em qualquer outra área de suas páginas
Exemplos
API
# Variações de ícones
Existem dois tipos de ícones: Outline e Filled. Ao usar o componente ícone, por padrão ele renderiza as versões outline.
# Outline (default)
<icon name="favicon" />
# Filled
Para definir se um ícone vai ser filled, é necessário passar uma prop chamada filled com um valor booleano.
<icon name="favicon" filled />
# Cores
<div class="ui-flex ui-flex-column ui-flex-wrap"> <icon name="favicon" color="red" /> <icon name="favicon" color="red" filled /> </div>
A cor também é alterada de acordo com o tema escolhido.
<div class="ui-flex ui-flex-column ui-flex-wrap"> <theme-provider :isDark="false" theme="educacional"> <icon name="favicon" /> </theme-provider> <theme-provider :isDark="false" theme="concursos"> <icon name="favicon" /> </theme-provider> <theme-provider :isDark="false" theme="medicina"> <icon name="favicon" /> </theme-provider> </div>
# Dark mode
O modo escuro também se aplica aos ícones:
<div class="ui-flex ui-flex-column ui-flex-wrap ui-m-4"> <theme-provider :isDark="true" theme="educacional" class="ui-py-4"> <icon name="favicon" /> </theme-provider> <theme-provider :isDark="true" theme="concursos" class="ui-py-4"> <icon name="favicon" /> </theme-provider> <theme-provider :isDark="true" theme="medicina" class="ui-py-4"> <icon name="favicon" /> </theme-provider> </div>
# Multiplos tamanhos
<div class="ui-flex ui-flex-column ui-flex-wrap"> <icon name="favicon" width="15" /> <icon name="favicon" width="30" /> </div>
# Lista de Ícones
Os ícones disponíveis são:
Ícones Outline
Ícones Filled