Contrib.social

Add theming template and prepare logic for rendering icons

Open on Drupal.org →
Created on 25 November 2012, about 12 years ago
Updated 27 July 2023, over 1 year ago

Problem/Motivation

Drupal uses icons in many places in its administrative UI, but provides no theming mechanism to render such a common UI element. For example:

  • The new toolbar introduced custom icons
  • Action links have been visually emphasized with custom icons in core themes since D7, implemented in a different way.
  • Our refactored buttons markup and CSS allows for icons, but we don’t want to invent yet another way of doing the same thing.

Proposed resolution

Provide theming infrastructure for displaying icons in a consistent, accessible way while not limiting the exploration of this space in contrib modules and themes. Adding, changing or removing actual icons is out of scope for this issue.

Markup in common use today (Twitter Bootstrap, Zurb Foundation) has stabilized. A definitive exploration including accessibility implications was done at CSS Tricks. We should adopt this markup pattern as a sensible default:

<!-- icon used with a visible label, e.g. icons inside a button -->
<i class="{{ classes }}" aria-hidden="true"></i> Icon label

<!-- icon used with a hidden, but accessible label, e.g. contextual edit icon -->
<i class="{{ classes }}" aria-hidden="true"></i> <span class="visually-hidden">Icon label</span>

Displaying the icon itself would be left to CSS, which can use:
- CSS background images (jpg/png/gif/svg, single or sprite)
- CSS generated content to insert icon font glyphs

Whatever infrastructure is chosen, it should be extensible or overridable to allow less-common techniques using <img>, <svg> or others to be used without much difficulty.

We should consider merging all or key parts of the existing Icon API module to solve this issue.

Remaining tasks

Blocked by:
#939462: Specific preprocess functions for theme hook suggestions are not invoked →
This issue are critical in allowing this new icon theme hook the ability to extend itself for various types of icons:
icon__css or just icon as a fallback?
icon__image
icon__svg

  1. Determine if and how to merge Icon API module with core.
  2. (Note: The following may be solved by the previous item)
  3. Determine what classes are required to potentially support icons of different types/sizes or different sources on a single site
  4. Determine how CSS and assets (images, font files) are attached to the page with the icon markup.
  5. Determine the API changes requied to render the icons: theme function(s) or other machanisms.
  6. Write and test a patch.

User interface changes

TBD

API changes

TBD

Related Issues

#956520: Available theme hook suggestions are only exposed when there are preprocess functions defined →
#2004872: [meta] Theme system architecture changes →
#1804614: [meta] Consolidate theme functions and properly use theme suggestions in core →

Original report by @sun

Problem

  • Drupal is a user-facing application framework, but provides no way to achieve a consistent iconic language.
  • The new toolbar introduced custom icons, completely detached from the rest of the application.
  • Action links have been visually emphasized with custom icons in core themes since D7, implemented in a completely custom way.
  • Our refactored buttons markup and CSS allows for icons, but we don't a have framework for that.
  • Previous efforts to add icons to Drupal failed, because there is no theme/markup framework for handling icons in a consistent way.

Goal

  • Implement a theming function/template/infrastructure to handle icons in a consistent, application-wide way.

NOT

  • Adding actual icons to Drupal core is NOT within the scope of this issue.

    Any comment which proposes that will be unpublished. This issue is about icon infrastructure, not actual icons.

How

  • There's absolutely nothing to re-invent here — the web design community beyond Drupal has figured this out in a clean, standardized, and universal way already.
  • Various web services exist to auto-generate icons as icon fonts, including the necessary CSS (e.g., Fontello).
  • Framework themes like Bootstrap follow the standard, too.

Proposed solution

  • Merging in Icon API module - This provides the necessary markup and API for theming icons from various providers.

Related Issues

✨ Feature request
Status

Active

Version

11.0 🔥

Component
Theme  →

Last updated about 13 hours ago

Created by

🇩🇪Germany sun Karlsruhe

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Coding standards

    It involves compliance with, or the content of coding standards. Requires broad community agreement.

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.

  • Comment over 1 year ago →
    🇫🇷France andypost

    Maybe this one should be closed in favour of SDC?

  • Comment over 1 year ago →
    🇨🇦Canada xmacinfo Canada

    I think SDC should be optional.

  • Comment over 1 year ago →
    🇷🇺Russia kostyashupenko Omsk

    Bump

    In 2023 year still the best we can do with icons - is to render them normally using <svg>. So vector graphic. (it's a question of which html tag to pick for rendering icons).

    How else we can improve rendering of svg? Use svg sprites (all icons loaded once, then cached by browser, good performance and extreme re-usability)

    Also iconic font is a bad choice, because of:
    1. bigger weight than svg sprite (even with woff2)
    2. Blinking visual bugs - if your icon (made by iconic font) changes its color on hover for example, so when you will hover it - blinking effect
    3. In comparison with svg - loss of quality on resize, but also worsen anti aliasing than svg sprite

    If icon is not a vector image in 2023th year - we have already `image`, `responsive_image`, `media` for managing it. If it's not a vector image - it's not about svg anymore (obviously)

    Comparing to CSS background-image - svg sprite is a winner again (even if in data:image format). Again - blinking on hover, bad anti aliasing.

    This issue is still actual for Drupal core, since more and more icons appearing.

    What i'm thinking is next:
    1. We should have new theme hook (or hooks) with twig, for rendering svg and svg_sprite technologies.
    2. Then fix core themes, render icons via twig (instead of CSS background-image). Keep CSS related to icons only to manage colours and sizes of icons).
    3. (optional for core) We should let user upload its vector icons through the admin back office. Ability to upload or choose a path to file which contains icons (for example if it's a svg-sprite - it's a single file containing all the icons inside). This functionality can be visible on Appearance page of the selected theme.

  • Comment over 1 year ago →
    🇪🇨Ecuador jwilson3

    Probably we should update the issue summary to include more of this 👆 and less of the outdated approaches.

  • Comment about 2 months ago →
    🇫🇷France pdureau Paris

    Hi,

    https://www.drupal.org/project/icon → last release was from March 2017, and last commit from June 2018.

    Work on a Core API proposal for Icons is happening here: ✨ Add an icon management API Active Using other contrib module as starting points.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024