- Issue created by @flyke
- πΊπΈUnited States tim bozeman
Interesting. Thanks for researching that! Here's an example of how the trash module transitioned to 11.2.
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
Interesting. Thanks for researching that! Here's an example of how the trash module transitioned to 11.2.