Nav Icon — Sinapse Design System

Material Symbol

Qualquer string que não comece com brand: é renderizada como Material Symbol Outlined.

<NavIcon name="palette" />
<NavIcon name="widgets" />
<NavIcon name="code" />

<template>
<span class="material-symbols-outlined" aria-hidden="true">palette</span>
<span class="material-symbols-outlined" aria-hidden="true">widgets</span>
<span class="material-symbols-outlined" aria-hidden="true">code</span>
</template>

<>
<span className="material-symbols-outlined" aria-hidden="true">palette</span>
<span className="material-symbols-outlined" aria-hidden="true">widgets</span>
<span className="material-symbols-outlined" aria-hidden="true">code</span>
</>

<span class="material-symbols-outlined" aria-hidden="true">palette</span>
<span class="material-symbols-outlined" aria-hidden="true">widgets</span>
<span class="material-symbols-outlined" aria-hidden="true">code</span>

Brand icons

Prefixo brand: carrega SVG do mapa interno. Atualmente: vue, nuxt, astro, react.

<NavIcon name="brand:vue" />
<NavIcon name="brand:nuxt" />
<NavIcon name="brand:astro" />
<NavIcon name="brand:react" />

Sizes

Default 18px. Aceita qualquer número (px).

<NavIcon name="palette" size={16} />
<NavIcon name="palette" size={20} />
<NavIcon name="palette" size={24} />
<NavIcon name="palette" size={32} />

Cor via currentColor

Brand SVGs usam fill="currentColor". Controle a cor via classe utilitária do parent ou prop class.

<NavIcon name="brand:vue" class="text-success" />
<NavIcon name="brand:react" class="text-info" />
<NavIcon name="brand:astro" class="text-primary" />

Props

Prop	Tipo	Default	Descrição
`name`	`string`	—	`brand:<name>` para logo de framework, qualquer outro valor para Material Symbol.
`size`	`number`	`18`	Tamanho em px (aplicado em width/height ou font-size).
`class`	`string`	—	Classes utilitárias adicionais (cor, margin etc).

Estendendo

Para adicionar nova marca, edite o objeto brands em NavIcon.astro com viewBox e path SVG. Use Simple Icons como fonte oficial dos SVGs.