[5.x]: Stroke-based SVGs in custom icon sets render as filled shapes in the control panel

Open Beginner friendly
  • Is something wrong?
#20,613 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, php
Domain
frontend

Research direction

Start by reading the icon color rules in cp.css for .icon-picker--icon, .cp-icon, a .cp-icon, and .btn .cp-icon. Reproduce with a custom SVG that declares fill="none" and a stroke, then check its appearance in the picker and selected icon previews. Done when stroke based icons retain their outlines and color while filled icons still render as before.

Written by the indexing model from the issue text.

Description

repo:cms
What happened?
Description

Icons from a custom icon set (5.12's customIconPath or EVENT_REGISTER_ICON_SETS) that are drawn with strokes, such as Lucide or Feather, show as solid blobs in the control panel. That happens in the icon picker and everywhere a selected icon is shown (the field input, element cards and chips, previews).

The cause is the control panel CSS that colours icons. It sets a fill and stroke-width: 0 on every shape inside an icon's SVG:

.icon-picker--icon svg circle, .icon-picker--icon svg ellipse, .icon-picker--icon svg line,
.icon-picker--icon svg path, .icon-picker--icon svg polygon, .icon-picker--icon svg polyline,
.icon-picker--icon svg rect, .icon-picker--icon svg text {
  fill: var(--ui-control-color);
  stroke-width: 0;
}

.cp-icon svg circle, /* … */ .cp-icon svg text {
  fill: var(--icon-color, var(--ui-control-color));
  stroke-width: 0;
}

The same pair also appears for a .cp-icon (fill: var(--icon-color, var(--link-color))) and .btn .cp-icon (fill: currentColor).

That's right for Font Awesome, whose icons are filled shapes with no fill attribute. A stroke icon declares fill="none" stroke="currentColor" stroke-width="2" on its <svg>, though. The rules above override those presentation attributes on every child, so the outline is filled in and its stroke is removed. Lines (<line>, open <path>s) disappear entirely, because they have no area to fill.

Custom icon sets were added for exactly this kind of library, so it seems worth handling in core.

Steps to reproduce
  1. Add ->customIconPath('@config/icons') to config/general.php.
  2. Put a stroke-based SVG in config/icons/, for example Lucide's info.svg: 
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg>
  3. Create an Icon field with the "Custom" icon set selected, and add it to an entry type.
  4. Open an entry and choose an icon.
Expected behavior

The icon shows as an outline, as it does on the front end with getSvg(), coloured like the other icons in the picker.

Actual behavior

The icon shows as a filled shape: a solid disc in place of the "info" circle, with the "i" invisible. The same happens in the picker grid, the field's selected-icon preview, and element cards and chips.

Proposed fix

Leave filled icons as they are, and give icons whose <svg> declares fill="none" a stroke in the same colour instead of a fill. In cp.css terms:

:is(.icon-picker--icon, .cp-icon)
  svg[fill='none']
  :is(circle, ellipse, line, path, polygon, polyline, rect, text) {
  fill: none;
  stroke: var(--icon-color, var(--ui-control-color));
  stroke-width: inherit;
}

a .cp-icon svg[fill='none'] :is(circle, ellipse, line, path, polygon, polyline, rect, text) {
  stroke: var(--icon-color, var(--link-color));
}

.btn .cp-icon svg[fill='none'] :is(circle, ellipse, line, path, polygon, polyline, rect, text) {
  stroke: currentColor;
}

stroke-width: inherit restores the width from the <svg>'s own attribute. Selected and highlighted states keep working, because they set --icon-color.

Until there's a fix, we're registering the CSS above on control panel requests from a module (with an extra [stroke] in the selector, so it outranks the core rules whatever order they load in). Rendered against 5.12.1's cp.css, it fixes the picker grid and .cp-icon icons, and leaves Font Awesome icons as they were.

Craft CMS version

5.12.1

PHP version

8.4

Operating system and version

Linux (DDEV)

Database type and version

MySQL 8.4

Image driver and version

n/a

Installed plugins and versions

None needed to reproduce. It happens with customIconPath alone.

Dominant language
PHP
Stars
3.6k
Forks
714
Avg merge
13h 20m
Merged PRs (30d)
471

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from craftcms/cms

All issues in craftcms/cms

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.