\n \n Icon\n \n \n Important! Icons are now imported from{' '}\n react-magma-icons\n which must be installed as a peer dependency.\n \n {`Basic Usage`}
\n {`Icons are imported from a separate `}{`react-magma-icons`}{` package.`}
\n {`import React from 'react';\nimport { GroupIcon } from 'react-magma-icons';\nexport function Example() {\n return ;\n}\n`}
\n {`Title`}
\n {`The `}{`title`}{` prop can be used to set the `}{``}</inlineCode>{` element within the SVG.`}</p>\n <p>{`The title/svg association will be handled via the passed in `}<inlineCode parentName=\"p\">{`id`}</inlineCode>{` if one is supplied or via an auto-generated `}<inlineCode parentName=\"p\">{`id`}</inlineCode>{` if not supplied. The `}<inlineCode parentName=\"p\">{`id`}</inlineCode>{` of the title is linked to the SVG with `}<inlineCode parentName=\"p\">{`aria-labelledby`}</inlineCode>{`,\nso it will be read screen readers.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-tsx\"\n }}>{`import React from 'react';\nimport { CrossIcon, InfoIcon } from 'react-magma-icons';\nexport function Example() {\n return (\n <>\n <CrossIcon title=\"Close This Message\" />\n <br />\n <br />\n <InfoIcon id=\"infoIcon\" title=\"Info Available\" />\n </>\n );\n}\n`}</code></pre>\n <h2>{`Sizes`}</h2>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-tsx\"\n }}>{`import React from 'react';\nimport { CheckIcon } from 'react-magma-icons';\nexport function Example() {\n return (\n <>\n <CheckIcon size={20} title=\"Small Size\" />\n <br />\n <br />\n <CheckIcon size={50} title=\"Large Size\" />\n </>\n );\n}\n`}</code></pre>\n <h2>{`Color`}</h2>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-tsx\"\n }}>{`import React from 'react';\nimport { AngleDownIcon } from 'react-magma-icons';\nexport function Example() {\n return (\n <>\n <AngleDownIcon title=\"No Color\" />\n <br />\n <br />\n <AngleDownIcon color=\"green\" title=\"Some Color\" />\n </>\n );\n}\n`}</code></pre>\n <h2>{`Accessibility`}</h2>\n <p>{`To improve the experience for assistive technology users and remove the icon and its children from the accessibility tree, add the prop `}<inlineCode parentName=\"p\">{`aria-hidden=\"true\"`}</inlineCode>{` to your icon.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-tsx\"\n }}>{`import React from 'react';\nimport { HomeIcon } from 'react-magma-icons';\nexport function Example() {\n return <HomeIcon aria-hidden=\"true\" />;\n}\n`}</code></pre>\n <hr></hr>\n <h2>{`Available Icons`}</h2>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-typescript\",\n \"metastring\": \"noCode noCodeSandbox noCopy noBorder\",\n \"noCode\": true,\n \"noCodeSandbox\": true,\n \"noCopy\": true,\n \"noBorder\": true\n }}>{`import React from 'react';\nimport ICONS from 'react-magma-icons';\n\nexport function Example() {\n return (\n <div>\n {Object.keys(ICONS.categories)\n .sort((a, b) => {\n a = a.toLowerCase();\n b = b.toLowerCase();\n return a > b ? 1 : a < b ? -1 : 0;\n })\n .map(category => {\n return (\n <div>\n <Heading level={3}>{category}</Heading>\n <div className=\"demo-icon-list-container\">\n {ICONS.categories[category].map(icon => {\n const id = icon + 'Available';\n const title = icon + ' Title';\n const Icon = ICONS[icon];\n\n return (\n <span className=\"demo-icon-container\" key={id}>\n <Icon size={40} title={title} />\n <br />\n <span class=\"icon-name\">{icon}</span>\n </span>\n );\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n`}</code></pre>\n <hr></hr>\n <h2>{`Testing`}</h2>\n <p>{`Passing in the `}<inlineCode parentName=\"p\">{`testId`}</inlineCode>{` prop will add the `}<inlineCode parentName=\"p\">{`data-testid`}</inlineCode>{` attribute to the svg element for easier querying in tests.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-html\"\n }}>{`<svg\n aria-hidden=\"true\"\n data-testid=\"test-id\"\n class=\"icon\"\n height=\"24\"\n width=\"24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 25.63 25.63\"\n>\n <path\n 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\"\n transform=\"translate(-1.18 -1.18)\"\n ></path>\n</svg>\n`}</code></pre>\n <h2>{`Icon Props`}</h2>\n <p><strong parentName=\"p\">{`Any other props supplied will be provided to the `}<inlineCode parentName=\"strong\">{`svg`}</inlineCode>{` element.`}</strong></p>\n <SimplePropsTable propertyValues={{\n color: {\n type: {\n name: 'string'\n },\n required: false,\n description: 'Hex code for the color',\n defaultValue: 'inherit'\n },\n size: {\n type: {\n name: 'number'\n },\n required: false,\n description: 'Number of pixels for the icon height and width',\n defaultValue: '24'\n },\n testId: {\n type: {\n name: 'string'\n },\n required: false,\n description: 'Test ID attached to an internal element as `data-testid` for consumer testing'\n },\n title: {\n type: {\n name: 'string'\n },\n required: false,\n description: 'The title of the svg element, to be read by screen readers',\n defaultValue: ''\n }\n }} mdxType=\"SimplePropsTable\" />\n\n </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""}