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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#20,613 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, php
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách đọc các quy tắc màu biểu tượng trong cp.css cho .icon-picker--icon, .cp-icon, a .cp-icon và .btn .cp-icon. Tái hiện bằng một SVG tùy chỉnh khai báo fill="none" và một stroke, sau đó kiểm tra giao diện của nó trong bộ chọn và các bản xem trước của biểu tượng đã chọn. Hoàn tất khi các biểu tượng dựa trên stroke giữ nguyên đường viền và màu sắc, còn các biểu tượng tô đầy vẫn hiển thị như trước.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
PHP
Star
3.6k
Fork
714
Merge trung bình
13 giờ 20 phút
Pull request đã merge (30 ngày)
471

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của craftcms/cms

Tất cả issue của craftcms/cms

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.