FeatherIcon

src/components/FeatherIcon.vue

utility low complexity 208 arquivos

Componente funcional que renderiza qualquer ícone do pacote vue-feather-icons como span wrapper. Aceita nome do ícone via prop, classes CSS opcionais para o SVG, e badge opcional. Registrado globalmente. Usado em 208+ arquivos.

Ícone simples

Apenas o SVG renderizado, sem badge.

<feather-icon icon="ChevronUpIcon" class="text-white" />

Com badge

SVG com badge circular bg-primary no canto superior direito.

<feather-icon
  icon="BellIcon"
  :badge="unreadNotifications"
/>

Tamanho customizado

Tamanho controlado via svgClasses com classes Tailwind.

h-4 w-4

h-5 w-5

h-6 w-6

<feather-icon
  :icon="icon"
  svgClasses="h-4 w-4"
/>

Cor customizada

Cor controlada via svgClasses com stroke-current + Tailwind.

<feather-icon
  icon="HomeIcon"
  svgClasses="h-5 w-5 stroke-current text-primary"
/>

API

Exemplo completo

<feather-icon
  icon="BellIcon"
  svgClasses="w-5 h-5 stroke-current text-primary"
  :badge="3"
/>

Props

Prop	Tipo	Default	Obrigatório	Descrição
icon	String	—	sim	Nome do ícone feather em PascalCase (ex: 'BellIcon', 'XIcon')
svgClasses	[String, Object, Array]	""	não	Classes aplicadas ao elemento SVG interno
badge	any	—	não	Conteúdo do badge numérico no canto superior direito do ícone

Dependências externas

vue-feather-icons

Onde é usado

src/layouts/components/navbar/components/NotificationDropDown.vue
src/layouts/components/vertical-nav-menu/VerticalNavMenuItem.vue
src/components/attendance/InteractiveMessagePopup.vue