Icon

Icon renders a Blueprint UI icon as an SVG. Browse every icon in the Icons list.

Usage#

import { Icon } from "@clawscale/react";

<Icon icon="database" />

Examples#

Basic#

Pass an icon name to icon. Names are type checked. An icon without a title is hidden from screen readers, so add one when the icon carries meaning on its own.

core/icon/basic.tsx

import { Icon } from "@clawscale/react";

export default function IconBasic() {
  return (
    <>
      <Icon icon="database" />
      <Icon icon="th" />
      <Icon icon="flow-linear" />
      <Icon icon="timeline-line-chart" />
      <Icon icon="globe" title="Region" />
    </>
  );
}

Size#

Each icon is drawn on a 16px and a 20px grid. A size below 20 uses the 16px drawing, and 20 or more uses the 20px one. IconSize.STANDARD and IconSize.LARGE name the two sizes.

core/icon/size.tsx

import { Icon } from "@clawscale/react";

export default function IconSizes() {
  return (
    <>
      <Icon icon="database" size={16} />
      <Icon icon="flow-linear" size={16} />
      <Icon icon="database" size={20} />
      <Icon icon="flow-linear" size={20} />
    </>
  );
}

Intent#

intent colors the icon. Without it, the icon takes the text color. color sets any fill and overrides intent.

core/icon/intent.tsx

import { Icon } from "@clawscale/react";

export default function IconIntent() {
  return (
    <>
      <Icon icon="info-sign" intent="primary" title="Info" />
      <Icon icon="tick-circle" intent="success" title="Succeeded" />
      <Icon icon="warning-sign" intent="warning" title="Warning" />
      <Icon icon="error" intent="danger" title="Failed" />
    </>
  );
}

Inside other components#

Components with an icon prop, such as Button and Tag, take an icon name or an element. Pass an Icon element to give it its own intent.

us-east-13 failed runs

core/icon/components.tsx

import { Button, Icon, Tag } from "@clawscale/react";

export default function IconComponents() {
  return (
    <>
      <Button icon="refresh" text="Refresh" />
      <Button icon={<Icon icon="database" intent="primary" />} text="Datasets" />
      <Tag icon="globe" minimal>
        us-east-1
      </Tag>
      <Tag icon="error" intent="danger" minimal>
        3 failed runs
      </Tag>
    </>
  );
}

Icon components#

Each icon also ships as a component in @clawscale/react/icons, such as DatabaseIcon. Its paths come with the import, so it renders without an async load. Icon components take size, color and title, but not intent. See Loading icons.

core/icon/static.tsx

import { DatabaseIcon, FlowLinearIcon, GlobeIcon } from "@clawscale/react/icons";

export default function IconStatic() {
  return (
    <>
      <DatabaseIcon />
      <FlowLinearIcon />
      <GlobeIcon size={20} title="Region" />
    </>
  );
}

Props interface#

Icon renders a span around the SVG. tagName changes it, and other DOM attributes go to it.

type IconProps@clawscale/react

Generic interface for the <Icon> component which may be parameterized by its root element type.

Props	Description
`autoLoad`	`boolean` = `true` Whether the component should automatically load icon contents using an async import. Inherited from `IconOwnProps`
`children`	`never` This component does not support child nodes. Inherited from `SVGIconOwnProps`
`className`	`string` A space-delimited list of class names to pass along to a child element. A space-delimited list of class names to pass along to the SVG element. Inherited from `Props`
`color`	`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. Inherited from `SVGIconOwnProps`
`htmlTitle`	`string` String for the `title` attribute on the rendered element, which will appear on hover as a native browser tooltip. Inherited from `SVGIconOwnProps`
`icon`required	`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. Inherited from `IconOwnProps`
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`size`	`number` = `16` Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop. Inherited from `SVGIconOwnProps`
`style`	`React.CSSProperties` CSS style properties. Inherited from `SVGIconOwnProps`
`svgProps`	`React.HTMLAttributes<SVGElement>` Props to apply to the `SVG` element Inherited from `SVGIconOwnProps`
`tagName`	`keyof React.JSX.IntrinsicElements \| null` = `"span"` HTML tag to use for the rendered element. Commonly "span" or "div". If `null`, no wrapper will be rendered, just the `<svg>` element. Inherited from `SVGIconOwnProps`
`title`	`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. Inherited from `SVGIconOwnProps`