Component API

Icon

Important! Icons are now imported from react-magma-iconswhich must be installed as a peer dependency.

Basic Usage

Icons are imported from a separate react-magma-icons package.

import React from 'react';
import { GroupIcon } from 'react-magma-icons';
export function Example() {
  return <GroupIcon />;
}

Title

The title prop can be used to set the <title> element within the SVG.

The title/svg association will be handled via the passed in id if one is supplied or via an auto-generated id if not supplied. The id of the title is linked to the SVG with aria-labelledby, so it will be read screen readers.

import React from 'react';
import { CrossIcon, InfoIcon } from 'react-magma-icons';
export function Example() {
  return (
    <>
      <CrossIcon title="Close This Message" />
      <br />
      <br />
      <InfoIcon id="infoIcon" title="Info Available" />
    </>
  );
}

Sizes

import React from 'react';
import { CheckIcon } from 'react-magma-icons';
export function Example() {
  return (
    <>
      <CheckIcon size={20} title="Small Size" />
      <br />
      <br />
      <CheckIcon size={50} title="Large Size" />
    </>
  );
}

Color

import React from 'react';
import { AngleDownIcon } from 'react-magma-icons';
export function Example() {
  return (
    <>
      <AngleDownIcon title="No Color" />
      <br />
      <br />
      <AngleDownIcon color="green" title="Some Color" />
    </>
  );
}

Accessibility

To improve the experience for assistive technology users and remove the icon and its children from the accessibility tree, add the prop aria-hidden="true" to your icon.

import React from 'react';
import { HomeIcon } from 'react-magma-icons';
export function Example() {
  return <HomeIcon aria-hidden="true" />;
}

Available Icons

Testing

Passing in the testId prop will add the data-testid attribute to the svg element for easier querying in tests.

<CheckIcon testId="check-icon-id" title="Check Icon" />

Icon Props

Any other props supplied will be provided to the svg element.

= required prop

Property	Type	Default	Description
color	string	inherit	Hex code for the color
size	number	24	Number of pixels for the icon height and width
title	string	-	The title of the svg element, to be read by screen readers