Icon

Used to display a SVG icon.

Demo

React

IconUserHome

Color schemeNoneNeutralPrimarySecondarySuccessWarningDanger

SizeNoneExtra SmallSmallMediumLargeExtra Large

Vue

IconUserHome

Color schemeNoneNeutralPrimarySecondarySuccessWarningDanger

SizeNoneExtra SmallSmallMediumLargeExtra Large

Example

React

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

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

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"
    color-scheme="primary"
    size="sm"
  />
</template>

Props

React

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

Vue

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

1. See Icons for the list of available icon definitions.
2. By default, the icon will inherit the color of its parent element.
3. By default, the icon will inherit font size from its parent element (i.e. 1em).
4. If provided, the size prop will be ignored.

Types

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