Icon#

Bumbag aims to have a low bundle size & be icon agnostic, hence it does not come with a default icon set (apart from status icons).

You will need to bring your own icon set. Below is a guide & example to import the Free Font Awesome icon set.

There are two ways to import icons for the <Icon> component. You can either:

Import#

import { Icon } from 'bumbag';

Usage via Bumbag Theme#

Note: Bumbag currently only supports parsing of Font Awesome icons. If you want to use another icon set, you will need to follow the usage via SVG paths instructions. Want to add a parser or an icon set? Open a Pull Request.

First, you will need to inject the icons your app will use into the Bumbag Theme

This example uses @fortawesome/free-solid-svg-icons and @fortawesome/free-regular-svg-icons.

import { Provider as BumbagProvider } from 'bumbag';
import { faIgloo, faSearch, faClipboard, faThumbsUp } from '@fortawesome/free-solid-svg-icons';
import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
const theme = {
  icons: {
    iconSets: [
      {
        icons: [faIgloo, faSearch, faClipboard, faThumbsUp],
        prefix: 'solid-',
        type: 'font-awesome'
      },
      {
        icons: [faAddressBook],
        prefix: 'regular-',
        type: 'font-awesome'
      }
    ]
  }
};
export default () => <BumbagProvider theme={theme}><App/></BumbagProvider>

Then, you can use your icons like so:

Editable example

Usage via Direct Import#

You can also import the icons when you need them:

import { faPen } from '@fortawesome/free-solid-svg-icons'
<Icon aria-label="Settings" icon={faPen} type="font-awesome" />

Usage with SVG paths#

Currently, Bumbag only supports parsing of Font Awesome icons, but if you want to use another icon set, you will need to use SVG paths.

You can supply your SVG paths through the Bumbag Theme or on the icon directly.

Via the Bumbag Theme#

Here is an example for a calendar icon:

import { ThemeProvider } from 'bumbag';
import { faIgloo, faSearch, faClipboard, faThumbsUp } from '@fortawesome/free-solid-svg-icons';
import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
const theme = {
  icons: {
    icons: {
      calendar: {
        viewBoxWidth: 16,
        viewBoxHeight: 16,
        paths: ['M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z']
      }
    }
  }
};
export default () => (
  <ThemeProvider theme={theme}>
    <App/>
  </ThemeProvider>
);
Editable example

Via the icon directly#

Editable example

Sizes#

Change the size of an icon with the fontSize prop.

Editable example

Colors#

Change the color of an icon with the color prop. It can be any color from the palette, or any other color like #ff0000 or red.

Editable example

Usage in text#

Icons will be the same size as its text by default.

This is text with an icon!

This is a heading with an icon!

Editable example

Accessibility#

Rules#

  • The Icon must have an aria-label prop, however, if it is a presentational icon with no meaning, set the aria-hidden prop to true.

Patterns#

  • The Icon has a role of img.
  • If no aria-label is provided, then aria-hidden is set to true.

References#

Icon Props#

color string

Color of the icon. Can be a color from the palette, or any other color.

icon 

string
  | IconDefinition
  | { viewBoxHeight: number; viewBoxWidth: number; paths?: string[]; tree?: any[]; }

The name of your icon or parsed icon.

label string

A label for the icon which can be read by screen readers. This is required if a11yHidden is false.

fontSize string

Size of the icon.

type "font-awesome" | "font-awesome-standalone"

Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Icon.styles.base
Icon.iconSets

The icons to inject into Bumbag.

Schema

{
  icons: {
    iconSets: [
      {
        icons: Array,
        prefix: string
        type: string
      }
    ]
  }
}

Example

{
  icons: {
    iconSets: [
      {
        icons: [
          faArrowLeft,
          faArrowRight
        ],
        prefix: 'solid-',
        type: 'font-awesome'
      },
      {
        icons: [
          faIgloo
        ],
        prefix: 'regular-',
        type: 'font-awesome'
      }
    ]
  }
}
Icon.icons

A map of SVG icons.

Schema

{
  icons: {
    icons: {
      [iconName: string]: {
        viewBoxHeight: number,
        viewBoxWidth: number,
        paths: [string]
      }
    }
  }
}

Example

{
  icons: {
    icons: {
      calendar: {
        viewBoxWidth: 16,
        viewBoxHeight: 16,
        paths: [
          'M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z'
        ]
      }
    }
  }
}
Icon.iconNames

Icon name aliases which map to the proper icon names (so you can use ).

Note: you are able to add more, but these ones are required.

Schema

{
  icons: {
    iconNames: {
      info: string,
      warning: string,
      success: string,
      danger: string
      [key: string]: string
    }
  }
}

Example

{
  icons: {
    iconNames: {
      info: 'info-circle',
      warning: 'exclamation-triangle',
      success: 'check-circle',
      danger: 'exclamation-circle'
    }
  }
}
On this page
Copyright © 2021 Jake Moxey