UI Icons CKEditor 5: icons size

Created on 25 October 2024, 5 months ago

Problem/Motivation

the icons size do not works:

Proposed resolution

I think we just need to close the tag after the viewBox

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France steveoriol Grenoble 🇫🇷

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

Comments & Activities

  • Issue created by @steveoriol
  • 🇫🇷France steveoriol Grenoble 🇫🇷

    not so simple, in fact there is no ‘viewBox’ in the source but a ‘size’ :

  • 🇫🇷France mogtofu33

    Could you be more specific with step to reproduce? What didi you do to have a working and a non working Icon?

    On CKEditor as you've seen the icon tag is <drupal-icon>, not the svg. The svg HTML is rendered dynamically from a js call on a specific route like with settings : /ui-icons/icon/preview?icon_id=bootstrap%3Agoogle&settings=%7B%22size%22%3A%2264%22%2C%22color%22%3A%22%23000000%22%2C%22alt%22%3A%22%22%7D

    You can check the browser console to see the xhr click right > open as new Tab (For firefox). And see if the generated HTML is correct.

  • 🇫🇷France steveoriol Grenoble 🇫🇷

    In fact, the ‘working Icon’ isn't displayed as it should be, it's just that I've modified the HTML directly via the inspector (Ctrl+Shift+i).
    Here is the source code extract of the page received (Ctrl+u):

    [...]<span class="drupal-icon"><svg height="100" width="100" fill="currentColor" stroke-width="2">  viewBox="0 0 20 20" <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />  </svg>
    </span>[...]

    I simply moved the ‘>’ from before to after the viewBox property:

    [...]stroke-width="2"> viewBox="0 0 20 20" <path[...]
    to
    [...]stroke-width="2" viewBox="0 0 20 20"><path[...]

  • 🇫🇷France mogtofu33

    Could you give steps to reproduce?

  • 🇫🇷France steveoriol Grenoble 🇫🇷

    I use the “UI Suite DaisyUI” theme with the icon pack:

    • Hero outline 24
    • Hero solid 16
    • Hero solid 20
    • Hero solid 24

    And in fact, the icons in the “Hero outline 24” pack work well (the icon sizes apply well).

    For the “Hero solid 20” and “Hero solid 24” packs, the icons are displayed but not in the size chosen.

    And for the “Hero solid 16” pack, nothing is displayed...

    So the bug may come from the packs or from the integration in ui_icons.

  • 🇫🇷France mogtofu33

    So it's not a problem with ui_icons but ui_suite_daisyui, issue created and fix pushed for review on ui_suite_daisy ui: 🐛 Icons pack template error and settings. Active .

Production build 0.71.5 2024