{% include "@bolt-components-icon/icon.twig" with {
name: "add-open",
background: "circle",
size: "medium",
} only %}
| 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 |
string
|
none
|
|
|
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
| — |
|
|
color
|
Icon color palette. Picking an option other than |
string
|
auto
|
|
npm install @bolt/components-icon
Can't find an existing SVG that suits your needs?
Before jumping ahead and adding a new custom SVG icon, please make sure you come and chat with the Bolt team first to see if there's already an existing icon that could get used instead OR if it makes sense to add a new icon to the design system itself!
Note: make sure your custom SVG icon starts with
Step 1. Import your custom SVG Icon in a .js file that's compiled by the Bolt build tools. Note: make sure your SVG icon has been already exported for the web (docs coming soon!).
Step 2. After recompiling the site's JavaScript, your custom SVG can now be used in Twig, JS, or HTML!
This advanced use case is rarely recommended since it can limit the number of places an SVG icon can get used and prevents the icon's color palette from adjusting based on the location it's used.
Step 1. Import your SVG Icon in a .js file, making sure your icon ends in
Step 2. After recompiling the site's JavaScript, your custom colored SVG can now be used in Twig, JS, or HTML!
Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.
<bolt-icon
size="xlarge"
background="circle"
name="marketing-gray"
style="
color: #a65388;
--bolt-theme-icon-background: #a65388;
--bolt-theme-icon: #FFF;
--bolt-theme-icon-background-opacity: 1;
"></bolt-icon>
{% include "@bolt-components-icon/icon.twig" with {
name: "customer-service",
background: "circle",
size: "xlarge",
attributes: {
style: [
"color: #e64b18;",
"--bolt-theme-icon-background: #e64b18;",
"--bolt-theme-icon: #FFF;",
"--bolt-theme-icon-background-opacity: 1;"
]
}
} only %}