Icon

Introduction

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

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Edit code

Edit code

Usage

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

API Reference

Icon

Prop Name	Required?	Type	Description
children	false	never	This component does not support custom children. Use the `icon` prop.
className	false	string	A space-delimited list of class names to pass along to a child element.
color	false	string	Color 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.
htmlTitle	false	string	String for the `title` attribute on the rendered element, which will appear on hover as a native browser tooltip.
icon	true	IconName | MaybeElement	Name 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.
iconSize	false	number	Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop.
intent	false	Intent	Visual intent color to apply to element.
style	false	CSSProperties	CSS style properties.
tagName	false	keyof IntrinsicElements	HTML tag to use for the rendered element.
title	false	string | false | null	Description 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