{% include '@bolt-elements-icon/icon.twig' with {
name: 'bell-solid',
} 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
|
Name of Icon |
string
| — |
|
|
custom_icon_path
|
Full source path to the custom icon. |
string
| — |
|
|
size
|
Set icon size. If size is not set, the icon size will default to text size. |
string
| — |
|
|
color
|
Set the icon color. If color is not set, the icon will default to text color. |
string
| — |
|
npm install @bolt/elements-icon<svg class="e-bolt-icon"> is acceptable at rendering an icon, though the Twig template is the recommended usage for Drupal.
<svg> HTML element, be sure to minifiy the SVG, add the element class class="e-bolt-icon", and add the attribute aria-hidden="true".{% include '@bolt-elements-icon/icon.twig' with {
name: 'bell-solid',
} only %}<svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>{% include '@bolt-elements-icon/icon.twig' with {
size: 'xlarge',
...
} only %}<svg class="e-bolt-icon e-bolt-icon--xlarge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>--e-bolt-icon-color inline style rule to set the desired color. Reference Color Tokens for all available brand colors.{% include '@bolt-elements-icon/icon.twig' with {
color: 'navy',
...
} only %}<svg class="e-bolt-icon e-bolt-icon--navy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true" to the <svg> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the custom_icon_path prop.
class="e-bolt-icon" along with relevant modifier class for each prop, and the attribute aria-hidden="true" to the <svg> HTML element. Then you can display the icon using the modified <svg> markup.
{% include '@bolt-elements-icon/icon.twig' with {
custom_icon_path: 'full/path/to/custom-icon-file.twig',
} only %}<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path fill="#151619" d="m32 16c0 8.8-7.2 16-16 16s-16-7.2-16-16 7.2-16 16-16 16 7.2 16 16zm-3.1 0-1.7 1.4-4-3.8 1.1-5.4 2.2.2c-1.6-2.2-3.9-3.9-6.5-4.7l.9 2.1-4.9 2.7-4.8-2.7.8-2.1c-2.6.9-4.8 2.5-6.5 4.7l2.2-.2 1 5.4-4 3.8-1.6-1.4c0 2.8.9 5.4 2.5 7.6l.5-2.2 5.5.7 2.3 5-1.9 1.2c2.6.8 5.4.8 8 0l-1.9-1.1 2.3-5 5.5-.7.5 2.2c1.6-2.3 2.5-4.9 2.5-7.7zm-16 4.5-1.9-5.9 5-3.6 5 3.6-1.9 5.9z"/></svg>