Allow inline SVGs as toolbar icon

Created on 14 December 2021, over 2 years ago
Updated 8 May 2023, about 1 year ago

Problem/Motivation

Toolbar icon images are now embedded as img tags, which makes it impossible to dynamically change colors. The ability to dynamically change colors based on Gin's css variables and/or things like prefers-color-scheme would be an interesting feature because right now, not all logos look great using both light and dark mode.

Proposed resolution

Some options here:

  • Provide a text field in settings where you can store an inline SVG
  • Provide a text field in settings where you can store the path to a SVG, which is read and rendered as an inline SVG
  • Provide no new settings, but add a new overridable template with the toolbar-icon-home element, allowing users to enter their inline SVG in a template override

The last option would be enough for my use case, but less user friendly for non-developer users.

✨ Feature request
Status

Closed: won't fix

Version

3.0

Component

Code

Created by

πŸ‡§πŸ‡ͺBelgium DieterHolvoet Brussels

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¨πŸ‡­Switzerland saschaeggi Zurich

    Provide a text field in settings where you can store an inline SVG

    I don't think we should provide this as it potentially could be a security risk.

    Provide a text field in settings where you can store the path to a SVG, which is read and rendered as an inline SVG

    You can already add an SVG logo. But it isn't rendered inline (again for Drupal security policy violation concerns).

    Provide no new settings, but add a new overridable template with the toolbar-icon-home element, allowing users to enter their inline SVG in a template override

    This would be great, but Drupal only has a template on the menu level (menu--toolbar--gin.html.twig).

    So the easiest for now might be to override the template mentioned above. You can easily load the contents of the SVG if you change this line

    <img src="{{ file_url(icon_path) }}" class="toolbar-icon-home" alt="{{ 'Home'|t }}" />

    to

    {{ file_url(icon_path)|raw }}

    I hope this helps. Cheers!

Production build 0.69.0 2024