Icon

Introduction

Icon displays an SVG image from Blueprint's library of 300+ icons.

Examples

prescription
heartheartheart

Usage

import React from "react";
import { Icon } from "@commure/components-foundation";
function MyIcon() {
return (
<Icon icon="prescription">
);
}
export default MyIcon;

API Reference

Icon

Prop NameRequired?TypeDescription
childrenfalseneverThis component does not support custom children. Use the `icon` prop.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
colorfalsestringColor of icon. This is used as the `fill` attribute on the `<svg>` image so it will override any CSS `color` property, including that set by `intent`. If this prop is omitted, icon color is inherited from surrounding text.
htmlTitlefalsestringString for the `title` attribute on the rendered element, which will appear on hover as a native browser tooltip.
icontrueIconName | MaybeElementName of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. - If `null` or `undefined` or `false`, this component will render nothing. - If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. Unknown strings will render a blank icon to occupy space. - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._ This type is supported to simplify icon support in other Blueprint components. As a consumer, you should avoid using `<Icon icon={<Element />}` directly; simply render `<Element />` instead.
iconSizefalsenumberSize of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop.
intentfalseIntentVisual intent color to apply to element.
stylefalseCSSPropertiesCSS style properties.
tagNamefalsekeyof IntrinsicElementsHTML tag to use for the rendered element.
titlefalsestring | false | nullDescription string. This string does not appear in normal browsers, but it increases accessibility. For instance, screen readers will use it for aural feedback. By default, this is set to the icon's name. Pass an explicit falsy value to disable.

Related Reading

Blueprint Reference