Icon

Uses Lucide. Omit label for decorative icons; supply label when the icon conveys meaning on its own.

Preview

Open in the playground

Usage

IconExample.vueVue / TS

<script setup lang="ts">
import { FzIcon } from '@chrisdalbano/forza-ui'
</script>

<template>
  <FzIcon name="shield" :size="24" label="Guardian role" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
name	"sort" | "search" | "info" | "warning" | "arrowLeft" | "minus" | "settings" | "more" | "arrowUpRight" | "arrowRight" | "plus" | "close" | "check" | "shield" | "swords" | "zap" | "flame" | "sun" | "moon" | "loader" | "trash" | "undo" | "chevronDown" | "grip" | "user" | "chevronsUpDown"	Yes	None
size	number | undefined	No	18
label	string | undefined	No	None
strokeWidth	number | undefined	No	1.75

Events and state

decorative unless labeled

Slots

none

Add from source

forza add icon

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.