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	Icon size.	`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` , `blue` , `indigo` , `yellow` , `orange` , `gray` , `green` , `white` , `pink`

Install

  npm install @bolt/components-icon

Dependencies

@bolt/core-v3.x

@bolt/lazy-queue

svg-baker-runtime

Icon