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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#20,613 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, php
Área
frontend

Línea de trabajo

Empieza leyendo las reglas de color de los iconos en cp.css para .icon-picker--icon, .cp-icon, a .cp-icon y .btn .cp-icon. Reproduce el problema con un SVG personalizado que declare fill="none" y un stroke; luego comprueba su aspecto en el selector y en las vistas previas del icono seleccionado. El trabajo estará terminado cuando los iconos basados en stroke conserven sus contornos y su color, y los iconos rellenos sigan mostrándose como antes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
PHP
Estrellas
3.6k
Forks
714
Merge medio
13 h 20 min
PR fusionados (30 d)
471

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de craftcms/cms

Todos los issues de craftcms/cms

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.