- Issue created by @flyke
The icons do not work in D11.2.0 in the Navigation sidebar and top bar
- Create a my_module.icons.yml file to leverage Core icon system, something like this:
my_module:
enabled: true
label: "My Module icons"
description: "Icons fur using in the My Module module."
version: 11.x
extractor: svg
config:
sources:
- assets/*.svg
settings:
size:
title: "Size"
description: "Set a size for this icon."
type: "integer"
default: 20
class:
title: "Class"
description: "Set a class for this icon."
type: "string"
default: ""
template: >
<svg
{{ attributes
.setAttribute('viewBox', attributes.viewBox|default('0 0 24 24'))
.setAttribute('class', class)
.setAttribute('width', size|default('20'))
.setAttribute('height', size|default('20'))
.setAttribute('aria-hidden', 'true')
}}
>
{{ content }}
</svg>
- I am not sure exactly where you build the items for in the navigation, this is a general example how to create a toolbar item with icon in for example hook_preprocess_navigation_menu:
$variables['items']['entity.webform.collection'] = [
'is_expanded' => FALSE,
'is_collapsed' => FALSE,
'in_active_trail' => FALSE,
'title' => t('Webforms'),
'url' => Url::fromRoute('entity.webform.collection'),
'below' => [],
'class' => 'navigation-content',
'icon' => [
'pack_id' => 'my_module',
'icon_id' => 'form',
'settings' => [
'class' => 'toolbar-button__icon',
'size' => 20,
],
],
];
This creates a link in the navigation left sidebar in D11.2.0 to webforms with a custom form.svg icon inside my_module/assets/form.svg assuming you have a my_module.icons.yml file like provided above.
At this point I'm not sure of the correct way for styling items in the top bar, as said: this is for the left sidebar of the core Navigation module.
Active
2.1
Code