2.7.0

Icon

Icon component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-icon

Source code

View on Github

Dependencies

@bolt/components-icons

@bolt/core

pubsub-js

uppercamelcase

Overview

Icon. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-icon

Usage

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

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

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`	—	`academy`, `add-open`, `add-solid`, `agile`, `app-development`, `app-exchange`, `arrow-left`, `asset-data`, `asset-infographic`, `asset-interactive`, `asset-link`, `asset-media`, `asset-podcast`, `asset-presentation`, `asset-text`, `asset-video`, `bolt-logo-colored`, `brand-operations`, `calendar`, `careers`, `case-management`, `check`, `check-circle`, `check-solid`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `close`, `close-open`, `close-solid`, `cloud`, `co-browse`, `communications`, `copy-to-clipboard`, `customer-decision-hub`, `customer-onboarding`, `customer-service`, `data-integrations`, `documentation`, `download`, `email`, `energy`, `entertainment`, `exit-full-screen`, `external-link`, `eye`, `eye-off`, `facebook`, `facebook-solid`, `field-service`, `field-service-gray`, `filter`, `financial`, `full-screen`, `github`, `global`, `government`, `healthcare`, `hospitality`, `industries`, `info-open`, `info-solid`, `insurance`, `integration`, `intelligent-virtual-assistant`, `java`, `knowledgebase`, `launchpad`, `life-sciences`, `linkedin`, `linkedin-solid`, `lock`, `manufacturing`, `map-pin`, `map-pin-solid`, `marketing`, `marketing-gray`, `menu`, `minus-open`, `minus-solid`, `mobility`, `more`, `omni-channel`, `partners`, `pencil`, `platform`, `podcast`, `print`, `product`, `product-delivery`, `refresh`, `reporting`, `retail`, `robo-auto`, `sales-automation`, `scalability`, `search`, `share`, `star-solid`, `support`, `system-admin`, `training`, `transportation`, `twitter`, `twitter-solid`, `unlock`, `upload`, `user`, `user-interface`, `video`, `vision`, `warning`, `watch`, `workforce-intelligence`, `youtube-solid`
background	Background shape. This applies only to 'xlarge' icons.	`string`	—	`circle` or `square`
size	Icon size.	`string`	—	`small`, `medium`, `large`, `xlarge`
color	Icon color. Currently only support default (black) and teal.	`string`	—	`teal` or `blue`