Contrib.social

Update Drupal's default file type icons

Open on Drupal.org →
Created on 30 April 2025, 4 days ago

Problem/Motivation

The default file type icons are 16⨉16-pixel, low-resolution, PNG files that look poor on a retina display.

Drupal previously shipped these file type icons inside the file module, but they're now distributed (duplicated) into the Demo Umami, Claro, and Starterkit themes 11 for in the following three theme folders:

Proposed resolution

  • Create new high-resolution Scalable Vector Graphics files to replace the existing low-resolution PNG files.
  • Update stylesheet references to file icons in Demo Umami, Claro, and Starterkit theme css/component/file.css stylesheets.
  • SVG files should be crafted carefully to match, optimized well, and safe for inline-embedding in the future. This implies:
    • Maintain existing image size (dimensions) and colors from the originals, to minimize bikesheding and scope creep.
    • Path precision rounded to two decimal places, when necessary. Prefer whole integers when possible.
    • Use root element attributes (aria-hidden, focusable, height, width, viewBox) that facilitate the files being embedded in HTML and used inline.
    • Avoid SVG features requiring ID refs (e.g., filters, masks, gradients) to prevent duplicate ID issues when embedding the same or similar SVGs multiple times in one HTML doc.
  • Add the new high-resolution SVGs files alongside existing low-resolution PNGs in all themes shipped with Drupal core. Do not remove old PNG files from the codebase. Add cleanup task 📌 [12.x] Remove images that have been replaced in core Active .

Before/after comparison between PNG and SVGs, manually recreated in Figma:

Note: server limitations on uploading SVGs and/or rendering images from git.drupalcode.org prevent us from displaying the proposed SVGs inline here.

Remaining tasks

  2. Prepare the MR.
  3. Review the code changes.
  4. (Optional) Add instructions on how to manually test in Drupal.
  5. (Optional) Upload before/after screenshots from manual tests.

User interface changes

Users on devices with high resolution screens will see a crisp image with no diffusion artifacts or blur inherent from legacy image formats.

Users on devices with low resolution may or may not notice much of a visual difference.

API changes

In as much as image files shipped with core can be considered an "API", the old PNG files will be left in place to avoid breaking themes that may be referencing them directly. The old files may be deleted in the next major version of Drupal.

📌 Task
Status

Active

Version

11.1 🔥

Component

file.module

Created by

🇪🇨Ecuador jwilson3

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

Merge Requests

Comments & Activities

  • Issue created by @jwilson3
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3
  • Merge request !11983Issue #3521857 by jwilson3: Update file type icons to use SVG → (Open) created by jwilson3
  • Pipeline finished with Failed
    4 days ago
    Total: 653s
    #485304
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3

    Hrm. The test fail seems unrelated.

    Drupal\Tests\node\Functional\NodeRevisionsAll
The string "page=1" was not found anywhere in the HTML response of the current page.
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3
  • Pipeline finished with Canceled
    4 days ago
    Total: 314s
    #485319
  • Pipeline finished with Failed
    4 days ago
    Total: 602s
    #485323
  • Pipeline finished with Failed
    4 days ago
    Total: 719s
    #485334
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3

    Add the new high-resolution SVGs files alongside existing low-resolution PNGs in all themes shipped with Drupal core. Do not remove old PNG files from the codebase. Add cleanup task #3452493: [12.x] Remove images that have been replaced in core.

    I'm having second thoughts about this in the context of the StarterKit theme. Certainly for Umami and Claro themes, we shouldnt remove the PNGs. However the StarterKit theme, when used as intended (if I understand correctly), is supposed to be a kind of "line in the sand" or fork of the codebase and a snapshot in time. This implies to me that we could easily remove the old PNG files and then any new themes created from the Starterkit would have a clean slate and no duplicitous files. Tech debt free!

  • Pipeline finished with Failed
    4 days ago
    Total: 652s
    #485356
  • Comment 4 days ago →
    🇪🇨Ecuador jwilson3
  • Comment 4 days ago →
    🇦🇺Australia kim.pepper 🏄‍♂️🇦🇺Sydney, Australia

    I think this might get more attention if it were under theme system.

  • Comment 4 days ago →
    🇺🇸United States smustgrave

    MR needs to be updated for 11.x please.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024