Falcon UI

Icon

Icon's component main purpose is to render icons defined in ThemeProvider's icons section. It's being used internally in other falcon-ui components such as Checkbox to render default icons with option to overrride them using ThemeProvider.

xxxxxxxxxx
 
import { Icon } from '@deity/falcon-ui';

▾

 
<ThemeProvider theme={themeWithCustomIcon}>
  <Icon src="customIcon" mr="lg" />
  <Icon src="notDefinedInTheme" fallback={'▾'} />
</ThemeProvider>

xxxxxxxxxx
 
const themeWithCustomIcon = createTheme({
  icons: {
    customIcon: {
      icon: CustomSVGIcon
    }
  }
});

Icon specific props

Property	Type	Required	Default	Description
src	string	-		string that needs to match one of the keys in icons section
fallback	ReactNode	-		fallback component to render when there is no icon defined for given `src`

Icon component accepts also all of the responsive, theme-based style props.