Bolt Design System

Twig Usage

  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
name	Icon name	, `string`	—	—
background	Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!	`string`	`none`	`none` , `circle` , `square`
size	Controls the size of the icon. Each size is set to a specific pixel value: 16px, 24px, 32px, and 38px. However, this prop is optional. When no size is specified, the icon is expected to act as an inline icon, which will grow or shrink depending on the font-size of its parent container.	`string`	—	`small` , `medium` , `large` , `xlarge`
color	Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within.	`string`	`auto`	`auto` , `teal` , `navy` , `yellow` , `orange` , `gray` , `pink` , `berry` , `wine` , `violet`

Install

  npm install @bolt/components-icon

Dependencies

@bolt/core-v3.x

@bolt/lazy-queue

svg-baker-runtime

Icon