FeatherIcon

The FeatherIcon component can be used to render SVG icons from the FeatherIcons project.

Usage

Setting dimensions (width and height) is required otherwise it will render in a large size. You can also customize the color by setting the color CSS property. You can customize the stroke-width by passing it as a prop.

<template>
  <FeatherIcon name="alert-triangle" class="h-6 w-6" />
  <!-- custom color -->
  <FeatherIcon name="chevron-right" class="h-6 w-6 text-red-600" />
  <!-- custom stroke width -->
  <FeatherIcon name="anchor" stroke-width="3" class="h-6 w-6 text-blue-500" />
  <FeatherIcon name="coffee" stroke-width="1" class="h-6 w-6 text-green-600" />
</template>
<script setup>
import { FeatherIcon } from 'jingrow-ui'
</script>

Props

Name	Default	Value	Description
`name`	`circle`	`String`	One of 287 icons from feathericons.com
`stroke-width`	`1.5`	`Number`

1.5 KiB Raw Blame History

FeatherIcon

Usage

Props

1.5 KiB

Raw Blame History