Icon

The Icon component renders an SVG icon, and can be extended through the icons property in your theme.

Copy
import { Icon } from 'minerva-ui';

<Icon name="activity" />
<Icon name="activity" />

Usage#

To use default icons from Feather Icons, you have to manually import the default icons and add them to the theme.

Copy
import { defaultIcons } from 'minerva-ui';
const customTheme = {
  icons: defaultIcons,
};
return <ThemeProvider theme={customTheme}>{/* etc */}</ThemeProvider>;

Color#

<ThemeProvider theme={themeWithIcons}>
  <Icon name="plus" color="blue.600" />
  <Icon name="activity" color="purple.500" />
</ThemeProvider>
<ThemeProvider theme={themeWithIcons}>
  <Icon name="plus" color="blue.600" />
  <Icon name="activity" color="purple.500" />
</ThemeProvider>

Size#

<ThemeProvider theme={themeWithIcons}>
  <Icon name="plus" size="16px" />
  <Icon name="activity" size="32px" />
</ThemeProvider>
<ThemeProvider theme={themeWithIcons}>
  <Icon name="plus" size="16px" />
  <Icon name="activity" size="32px" />
</ThemeProvider>

Props#

These are props related to the Icon component.