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.

<svg
  aria-hidden="true"
  data-testid="test-id"
  class="icon"
  height="24"
  width="24"
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 25.63 25.63"
>
  <path
    d="M15.26,10.15V7.56H12.74v2.59Zm0,10.29v-7.7H12.74v7.7ZM14,1.18A12.82,12.82,0,1,1,1.18,14,12.79,12.79,0,0,1,14,1.18Z"
    transform="translate(-1.18 -1.18)"
  ></path>
</svg>

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
testId	string	-	Test ID attached to an internal element as `data-testid` for consumer testing
title	string	-	The title of the svg element, to be read by screen readers