search

verbb / icon-picker

A Craft CMS field to select SVG or font icons from a folder for use in your content.
Other
17 stars 8 forks source link

SVG-Sprites in Icon Picker only display one style visually #52

Closed SebastianBoergers closed 1 year ago

SebastianBoergers commented 2 years ago

Description If you try to select an Icon, the Icons of the different Styles get listed. You can select an Icon-Style and that style will be saved correctly.

However, the Icons will only display in one style. image

When the Icons for the picker get loaded initially AND an icon was already saved in that field, it's briefly visible that the Icon-Picker actually DOES load all styles. You can basically see the styles cycle through - so they do get loaded, but the last loaded style will visually show up for all other styles after loading has finished. (Hope that makes sense!)

Steps to reproduce

  1. Use multiple SVG-Sprites for the different Font-Awesome Icon-Styles
  2. Click on Icon-Picker to select Icon

Additional info

Additional context

Config: return [ '*' => [ 'iconSetsPath' => '@webroot/icons/', 'iconSetsUrl' => '@web/icons/', 'maxIconsShown' => 10, 'redactorFieldHandle' => '', ] ];

Icon-Files image

engram-design commented 2 years ago

Yep, so this is a tricky one with SVG sprites, as I don't believe there's any way to target the same ID if you have multiple sprite sheets loaded.

So as background, an SVG sprite sheet in use will be output on the page (in the control panel) after the <body> tag, in its entirety. Then in the Icon Picker field, we reference that sprite sheet like so:

<svg viewBox="0 0 1000 1000"><use xlink:href="#arrow-up" /></svg>

This is so we're loading all sprites once (through text) and referencing them in the field. Because there are multiple sheets for Font Awesome, but all with the same ID of arrow-up for the arrow up icon, it'll only use the last occurrence of that.

I'm not sure what we can do about this. We could alter the mechanism to load the SVG from a path:

<svg viewBox="0 0 1000 1000"><use xlink:href="/your/icon/path/solid-sprites.svg#arrow-up" /></svg>

Which would be correct and resolve to the correct sheet, but due to the way Selectize works, that SVG external asset is loaded multiple times (every time you open the dropdown to pick an icon, or every time you type), which is immensely inefficient.

I'll have to give this some further thought to see what our options are - if any.

engram-design commented 1 year ago

Should be addressed in 2.0.0