Icon

An inline SVG icon.

It implements the <svg> element.

By default the <svg> element’s stroke and fill is currentColor, so the icon matches the color of the surrounding text.

Such icons form part of the HTML document, so they load and render the instant the page does.

Props

size

TypeString (optional)
Default'1em'

Sets the <svg> element’s width and height attributes. Some browser versions don’t support rem units.

title

TypeString (required)

Gets suffixed with ' icon' to form the <svg> element’s <title> children.

...props

Type…* (optional)

Additional props for the container; an <svg> element.

Examples

An icon using a <circle> element with a fill.
import { Icon } from 'device-agnostic-ui'

const IconCircleFilled = props => (
  <Icon title="Circle filled" {...props}>
    <circle cx="50%" cy="50%" r="50%" stroke="none" />
  </Icon>
)

<IconCircleFilled size="2em" />
Circle filled icon
An icon using a <circle> element with a stroke.
import { Icon } from 'device-agnostic-ui'

const IconCircleOutline = props => (
  <Icon title="Circle outline" {...props}>
    <circle cx="50%" cy="50%" r="14" strokeWidth="4" fill="none" />
  </Icon>
)

<IconCircleOutline size="2em" />
Circle outline icon

Tags