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

オープン 初心者向け
  • 何か問題がありますか？
#20,613 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, php
領域
frontend

調査の方向性

まず、.icon-picker--icon、.cp-icon、a .cp-icon、.btn .cp-icon に適用される cp.css のアイコン色のルールを読んでください。fill="none" と stroke を宣言するカスタム SVG で再現し、ピッカーと選択したアイコンのプレビューでの表示を確認してください。stroke ベースのアイコンが輪郭と色を保ち、塗りつぶしアイコンもこれまでどおり表示されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
PHP
スター
3.6k
フォーク
714
平均マージ
13時間 20分
マージ済み PR（30日）
471

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

craftcms/cms のほかの issue

craftcms/cms の issue をすべて見る

似ている issue

PHP の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。