Merge pull request #1503 from plone/reactive-icon-fix

Correctly update item icons when searching or filtering

Author: petschki

src/pat/contentbrowser/src/ContentBrowser.svelte

@@ -10,6 +10,7 @@
         clickOutside,
         formatDate,
         get_items_from_uids,
+        iconTag,
         request,
         resolveIcon,
         updateRecentlyUsed,
@@ -625,13 +626,15 @@
                                                         alt={item.Title || itemId(item)}
                                                     />
                                                 {:else}
-                                                    <span class="plone-icon">
-                                                        <svg
-                                                            use:resolveIcon={{
-                                                                iconName: `contenttype/${item.portal_type.toLowerCase().replace(/\.| /g, "-")}`,
-                                                            }}
-                                                        />
-                                                    </span>
+                                                    {#await iconTag(`contenttype/${item.portal_type
+                                                            .toLowerCase()
+                                                            .replace(/\.| /g, "-")}`)}
+                                                        ...
+                                                    {:then iconHTML}
+                                                        <span class="plone-icon">
+                                                            {@html iconHTML}
+                                                        </span>
+                                                    {/await}
                                                 {/if}
                                                 <span
                                                     class={!item.Title ? "id-only" : ""}

src/pat/contentbrowser/src/utils.js

@@ -183,12 +183,14 @@ export async function get_items_from_uids(uids, config) {
 
 
 /** use Plone resolveIcon to load a SVG icon and replace node with icon code */
+
+export async function iconTag(iconName) {
+    const icon = await utils.resolveIcon(iconName);
+    return icon;
+}
+
 export async function resolveIcon(node, { iconName }) {
-    async function getIcon(iconName) {
-        const icon = await utils.resolveIcon(iconName)
-        return icon;
-    }
-    const iconCode = await getIcon(iconName);
+    const iconCode = await iconTag(iconName);
     node.outerHTML = iconCode;
     return {
         destroy() { },