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#

By default, Minerva UI includes minimal icons to keep bundle size low.

To add your own icons, you can install a library add them to your theme, or add SVGs directly:

Copy
yarn add phosphor-react # you can use most react icon libraries here

Copy
import { ThemeProvider, defaultTheme, Icon } from 'minerva-ui';
import { Warning } from 'phosphor-react';
const customTheme = {
  ...defaultTheme,
  icons: {
    // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
    warning: Warning,
  },
};
const App = () => (
  <ThemeProvider>
    <Icon name="warning" /> Warning!
  </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.