Skip Navigation
React Magma

Component API

Icon

View Design Guidelines
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.

color

Description

Hex code for the color

Type

string

Default

inherit

size

Description

Number of pixels for the icon height and width

Type

number

Default

24

title

Description

The title of the svg element, to be read by screen readers

Type

string

Default

-

Deploys by Netlify