{% 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" aria-hidden="true">...</svg>{% include '@bolt-elements-icon/icon.twig' with {
size: 'xlarge',
...
} only %}<svg class="e-bolt-icon e-bolt-icon--xlarge" 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" 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" and relevant modifier classes, and add 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" aria-hidden="true" viewBox="0 0 496 512">
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
</svg>