Icon

Used to display a SVG icon.

Demo

React

IconUserHome

SizeExtra SmallSmallMediumLargeExtra Large

Color schemeNoneNeutralPrimarySecondarySuccessWarningDanger

Vue

IconUserHome

SizeExtra SmallSmallMediumLargeExtra Large

Color schemeNoneNeutralPrimarySecondarySuccessWarningDanger

Usage

React

import { Icon } from '@fintech-sandpit/ui/react';
import { faHome } from '@fortawesome/free-solid-svg-icons';

return (
  <Icon
    as={faHome}
    size="sm"
    colorScheme="primary"
  />
);

Vue

<script setup lang="ts">
import { Icon } from '@fintech-sandpit/ui/vue';
import { faHome } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Icon
    :as="faHome"
    size="sm"
    color-scheme="primary"
  />
</template>

Props

React

Name	Type	Required	Default	Description
as	IconDefinition	Yes		Icon definition 1
colorScheme	ColorScheme			Icon color scheme 2
size	Size		md	Icon size
boxSize	CssUnit			Icon box size 3

Vue

Name	Type	Required	Default	Description
name	IconDefinition	Yes		Icon definition 1
color-scheme	ColorScheme			Icon color scheme 2
size	Size		md	Icon size
box-size	CssUnit			Icon box size 3

1. See Icons for the list of available icon definitions.
2. By default, the icon will inherit the color of its parent element.
3. If provided, the size prop will be ignored.

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`