Icon

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

import { Icon } from 'minerva-ui'

Preview

Source

<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.

Preview

SyntaxError: Unexpected token (1:15)
1 : return (import { defaultIcons } from 'minerva-ui';
                   ^

Source

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

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

Color

Preview

Source

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

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

Size live

Preview

Source

<> <Icon name="plus" size="16px" /> <Icon name="activity" size="32px" /> </>

<>
  <Icon name="plus" size="16px" />
  <Icon name="activity" size="32px" />
</>

Props

These are props related to the Icon component.

Name	Type	Is Required	Default	Description
name	string	required	none	Name of icon
size	number or string	optional	32px	Height and width of icon (in pixels)
color	string	optional	#000	Color of icon