poe-svelte-ui-lib 1.1.4 → 1.1.6

package/dist/Accordion/Accordion.svelte

@@ -32,14 +32,14 @@
     onclick={toggle}
   >
     <div class="flex w-full items-center">
-      <span
-        class={`flex h-8 w-8 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
-      >
-        {#if label?.icon}
+      {#if label?.icon}
+        <span
+          class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
+        >
           {@html label.icon}
-        {/if}
-      </span>
-      <span class="{twMerge('m-0 w-full cursor-pointer text-left font-semibold', label.class)} text-lg">
+        </span>
+      {/if}
+      <span class="{twMerge('m-0 w-full cursor-pointer px-3 text-left font-semibold', label.class)} text-lg">
         {label?.name}
       </span>
     </div>

package/dist/Accordion/AccordionProps.svelte

@@ -4,16 +4,17 @@
   import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
-  import { fly } from 'svelte/transition'
   import { ICONS } from './icons'
   import Modal from '../Modal.svelte'
+  import Button from '../Button/Button.svelte'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<IAccordionProps> }
     onPropertyChange: (value: string | object) => void
   }>()
 
-  let showIconLib = $state(true)
+  let showIconLib = $state(false)
 
   const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
 
@@ -64,30 +65,41 @@
         options={$optionsStore.ACCORDION_TYPE_OPTIONS}
         onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
       />
-      <div class="relative w-full">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = !showIconLib)} />
+      <div class="relative flex w-full gap-2">
+        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
-          <Modal isOpen={true}>
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-150">
             {#snippet main()}
-              <div class="flex">
-                {#each ICONS as icon}
-                  <button
-                    class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
-                    onclick={() => {
-                      updateProperty('label.icon', icon as string, component, onPropertyChange)
-                    }}
-                  >
-                    {@html icon}
-                  </button>
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-[var(--border-color)] p-3">
+                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{category[0]}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('label.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
                 {/each}
               </div>
             {/snippet}
           </Modal>
-
-          <div
-            transition:fly={{ duration: 350 }}
-            class="emoji-container absolute right-6 bottom-full z-10 m-2 flex max-h-60 max-w-md flex-wrap gap-1 overflow-auto rounded-2xl bg-[var(--field-color)] p-2 shadow-lg"
-          ></div>
+        {/if}
+        {#if component.properties.label.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('label.icon', '', component, onPropertyChange)
+            }}
+          />
         {/if}
       </div>
     </div>

package/dist/Accordion/IconsLib/iconsLib.js

@@ -21,15 +21,15 @@ const scanAllIcons = async () => {
         }
         categories[category].push(svgContent);
     });
-    const entries = Object.entries(categories)
+    const content = `export const ICONS: [string, string[]][] = [
+${Object.entries(categories)
         .map(([category, svgs]) => {
         const svgArray = svgs.map((svg) => JSON.stringify(svg)).join(',\n    ');
-        return `  ${JSON.stringify(category)}: [\n    ${svgArray}\n  ]`;
+        return `  [${JSON.stringify(category)}, [\n    ${svgArray}\n  ]]`;
     })
-        .join(',\n');
-    const content = `export const ICONS: Record<string, string[]> = {
-${entries}
-}
+        .join(',\n')}
+]
+
 `;
     fs.writeFileSync('src/lib/Accordion/icons.ts', content);
     console.log('icons.ts создан:', Object.keys(categories));

package/dist/Accordion/icons.d.ts

@@ -1 +1 @@
-export declare const ICONS: Record<string, string[]>;
+export declare const ICONS: [string, string[]][];

package/dist/Accordion/icons.js

@@ -1,9 +1,88 @@
-export const ICONS = {
-    "access": [
-        "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M3 8.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.5 3c1.56 0 2.94.794 3.75 2h5.26a1 1 0 0 1 .807.409l1.49 2.04a.99.99 0 0 1 .033 1.13l-1.26 1.95a.997.997 0 0 1-1.41.276L12.02 10l-1.19.812a1 1 0 0 1-1.13 0L8.51 10h-.258c-.808 1.21-2.18 2-3.75 2a4.5 4.5 0 0 1 0-9zm3.75 6a1 1 0 0 0-.832.444c-.63.94-1.7 1.56-2.91 1.56c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5c1.21 0 2.28.616 2.91 1.56c.186.277.498.444.832.444h5.26L15 8.048l-1.26 1.95l-1.15-.805a1 1 0 0 0-1.14-.005L10.26 10l-1.19-.812a1 1 0 0 0-.566-.175h-.258z\" clip-rule=\"evenodd\"/></svg>",
-        "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 8a.997.997 0 0 1 1-1h10a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H3a.997.997 0 0 1-1-1zm3-4c0-.796.316-1.56.879-2.12s1.33-.879 2.12-.879A3 3 0 0 1 10.998 4v2h-6V4zm7 0v2h1a2 2 0 0 1 1.996 1.996v6c0 .53-.211 1.04-.586 1.41s-.884.586-1.41.586H3a2 2 0 0 1-1.996-1.996v-6A2 2 0 0 1 3 6h1V4c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0C11.58 1.92 12 2.94 12 4\" clip-rule=\"evenodd\"/></svg>"
-    ],
-    "common": [
-        "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z\" clip-rule=\"evenodd\"/></svg>"
-    ]
-};
+export const ICONS = [
+    [
+        'access',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M9.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM9 9.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-2.39-3C6.61 7.328 5.891 8 5 8s-1.61-.672-1.61-1.5S4.109 5 5 5s1.61.672 1.61 1.5M5 8h-.04c-.92 0-1.72.585-1.94 1.42c-.08.295.16.582.485.582h3c.326 0 .565-.286.486-.582C6.768 8.586 5.971 8 5.051 8h-.04z"/><path fill="currentColor" fill-rule="evenodd" d="M.327 3.64C0 4.282 0 5.12 0 6.8v2.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31c.642.327 1.48.327 3.16.327h6.4c1.68 0 2.52 0 3.16-.327a3 3 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16V6.8c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327h-6.4c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31m10.9-.638h-6.4c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819c-.037.45-.038 1.03-.038 1.89v2.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18c.45.036 1.03.037 1.89.037h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-2.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18c-.45-.037-1.03-.038-1.89-.038" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M4.5 3c1.56 0 2.94.794 3.75 2h5.26a1 1 0 0 1 .807.409l1.49 2.04a.99.99 0 0 1 .033 1.13l-1.26 1.95a.997.997 0 0 1-1.41.276L12.02 10l-1.19.812a1 1 0 0 1-1.13 0L8.51 10h-.258c-.808 1.21-2.18 2-3.75 2a4.5 4.5 0 0 1 0-9zm3.75 6a1 1 0 0 0-.832.444c-.63.94-1.7 1.56-2.91 1.56c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5c1.21 0 2.28.616 2.91 1.56c.186.277.498.444.832.444h5.26L15 8.048l-1.26 1.95l-1.15-.805a1 1 0 0 0-1.14-.005L10.26 10l-1.19-.812a1 1 0 0 0-.566-.175h-.258z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 8a.997.997 0 0 1 1-1h10a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H3a.997.997 0 0 1-1-1zm3-4c0-.796.316-1.56.879-2.12s1.33-.879 2.12-.879A3 3 0 0 1 10.998 4v2h-6V4zm7 0v2h1a2 2 0 0 1 1.996 1.996v6c0 .53-.211 1.04-.586 1.41s-.884.586-1.41.586H3a2 2 0 0 1-1.996-1.996v-6A2 2 0 0 1 3 6h1V4c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0C11.58 1.92 12 2.94 12 4" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+    [
+        'common',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z"/><path fill="currentColor" fill-rule="evenodd" d="M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 3.2c0-1.12 0-1.68.218-2.11c.192-.376.498-.682.874-.874c.428-.218.988-.218 2.11-.218h.6c1.12 0 1.68 0 2.11.218c.376.192.682.498.874.874c.218.428.218.988.218 2.11v.6c0 1.12 0 1.68-.218 2.11a2 2 0 0 1-.874.874c-.428.218-.988.218-2.11.218h-.6c-1.12 0-1.68 0-2.11-.218a2 2 0 0 1-.874-.874C9 5.482 9 4.922 9 3.8zM12.2 1h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-.6c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422a17 17 0 0 1-.024-1.23v-.6c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085C11.253 1 11.626 1 12.2 1M.218 4.09C0 4.518 0 5.078 0 6.2v6.6c0 1.12 0 1.68.218 2.11c.192.376.498.682.874.874c.428.218.988.218 2.11.218h6.6c1.12 0 1.68 0 2.11-.218c.376-.192.682-.498.874-.874c.218-.428.218-.988.218-2.11v-.6c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-2.8v-2.8c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-.6c-1.12 0-1.68 0-2.11.218a2 2 0 0 0-.874.874zm5.78 2.11V9h-5V6.2c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085c.283-.023.656-.024 1.23-.024h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23zm-5 3.8h5v5h-2.8c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422C1 13.749 1 13.376 1 12.802v-2.8zm6 0h2.8c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-2.8v-5z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"\r\n  ><path\r\n    fill="none"\r\n    stroke="currentColor"\r\n    stroke-linecap="round"\r\n    stroke-linejoin="round"\r\n    stroke-width="1.5"\r\n    d="M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"\r\n  /></svg\r\n>\r\n',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M0 2c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C1.302.001 1.534.001 2 .001s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 2.697 0 2.465 0 2m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 2.389 1 2.24 1 2s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354c-.004.001.021-.007.128-.012C1.611 1 1.759 1 2 1s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354c-.001-.004.007.021.012.128C3 1.611 3 1.759 3 2s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354c.004-.001-.021.007-.128.012C2.389 3 2.241 3 2 3M0 8c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06c.191-.051.423-.051.888-.051s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 8.697 0 8.465 0 8m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 8.389 1 8.241 1 8s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354s.028-.007.128-.012C1.611 7 1.759 7 2 7s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354s.007.028.012.128C3 7.611 3 7.759 3 8s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354s-.028.007-.128.012C2.389 9 2.241 9 2 9M.051 13.1C0 13.291 0 13.523 0 13.988s0 .698.051.888a1.5 1.5 0 0 0 1.06 1.06c.191.051.423.051.888.051s.697 0 .888-.051a1.5 1.5 0 0 0 1.06-1.06c.051-.191.051-.423.051-.888s0-.698-.05-.888a1.5 1.5 0 0 0-1.06-1.06c-.192-.051-.424-.051-.889-.051s-.697 0-.888.051a1.5 1.5 0 0 0-1.06 1.06m1.45 1.88c.112.005.26.005.501.005s.39 0 .501-.005a.6.6 0 0 0 .128-.012a.5.5 0 0 0 .353-.354c0-.003.007-.034.012-.128c.005-.112.005-.26.005-.5s0-.39-.005-.502c-.005-.1-.012-.128-.012-.128a.5.5 0 0 0-.353-.353s-.028-.007-.128-.011c-.112-.005-.26-.006-.501-.006s-.389 0-.501.006a1 1 0 0 0-.128.011a.5.5 0 0 0-.353.354s-.007.028-.012.128c-.005.112-.005.26-.005.501s0 .39.005.501c.005.107.013.132.012.128a.5.5 0 0 0 .354.354a1 1 0 0 0 .128.012z" clip-rule="evenodd"/><path fill="currentColor" d="M6.5 2a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM6 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m.5 5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.5 11.9a6.005 6.005 0 0 1-9.48-4.89c0-3.31 2.69-6 6-6a6.005 6.005 0 0 1 4.89 9.48l2.82 2.82a.996.996 0 0 1 0 1.41a.994.994 0 0 1-1.41 0zm1.52-4.89c0 2.76-2.24 5-5 5s-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5m3.5.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0z"/><path fill="currentColor" fill-rule="evenodd" d="M8.12 0h-.241c-.402 0-.735 0-1.01.022c-.281.023-.539.072-.782.196a2 2 0 0 0-.874.874c-.124.243-.173.501-.196.782c-.022.271-.022.603-.022 1.01v.121h-3.5a.5.5 0 0 0 0 1h.54l.597 7.16c.063.758.113 1.36.192 1.84c.08.492.196.9.41 1.27c.354.604.88 1.09 1.51 1.39c.386.184.803.265 1.3.304c.487.038 1.09.038 1.85.038h.21c.76 0 1.36 0 1.85-.038c.497-.039.913-.12 1.3-.304a3.5 3.5 0 0 0 1.51-1.39c.216-.368.33-.777.41-1.27c.08-.48.129-1.08.193-1.84l.597-7.16h.54a.5.5 0 0 0 0-1h-3.5v-.12c0-.403 0-.736-.022-1.01c-.023-.282-.072-.54-.196-.783a2 2 0 0 0-.874-.874C9.669.094 9.41.045 9.13.022C8.859 0 8.527 0 8.12 0M3.04 4l.588 7.06c.065.784.112 1.34.184 1.78c.07.432.159.705.287.924a2.5 2.5 0 0 0 1.08.992c.229.11.509.175.945.21c.442.035 1 .035 1.79.035h.167c.787 0 1.35 0 1.79-.035c.436-.034.716-.1.945-.21a2.5 2.5 0 0 0 1.08-.992c.128-.219.217-.493.288-.924c.071-.438.118-.997.184-1.78L12.956 4h-9.91zM6 3h4v-.1c0-.428 0-.719-.019-.944c-.018-.219-.05-.331-.09-.41a1 1 0 0 0-.437-.437c-.078-.04-.19-.072-.41-.09A13 13 0 0 0 8.1 1h-.2c-.428 0-.719 0-.944.019c-.219.018-.331.05-.41.09a1 1 0 0 0-.437.437c-.04.078-.072.19-.09.41C6 2.181 6 2.472 6 2.9z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 9a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5A.75.75 0 0 1 8 9m-1 3a1 1 0 1 1 2 0a1 1 0 0 1-2 0"/><path fill="currentColor" fill-rule="evenodd" d="m.325 11.6l5.02-9.99c1.1-2.19 4.21-2.19 5.31 0l5.02 9.99c1 2-.436 4.36-2.66 4.36h-10c-2.22 0-3.66-2.36-2.66-4.36zm.894.449l5.02-9.99c.733-1.46 2.79-1.46 3.52 0l5.02 9.99c.676 1.35-.301 2.91-1.76 2.91h-10c-1.46 0-2.44-1.57-1.76-2.91z" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+    [
+        'control',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z"/><path fill="currentColor" d="M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z"/></svg>',
+        ],
+    ],
+    [
+        'electronic',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z" clip-rule="evenodd"/><path fill="currentColor" d="M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z"/><path fill="currentColor" d="M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m2.56 3.42l-1.55 9c-.045.263.165.577.546.577h11.3a.54.54 0 0 0 .546-.423l1.55-9c.045-.263-.165-.577-.546-.577h-11.3a.54.54 0 0 0-.546.423M.02 12.25C-.138 13.164.592 14 1.55 14h11.3c.759 0 1.41-.53 1.53-1.25l1.55-9C16.088 2.836 15.358 2 14.4 2H3.1c-.759 0-1.41.53-1.53 1.25z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m7 11l.167-1h5L12 11zM5.09 4.53a.746.746 0 0 0-1.05-.117a.746.746 0 0 0-.117 1.05l1.54 1.93l-2.44 2.03a.754.754 0 0 0-.096 1.06a.754.754 0 0 0 1.06.096l3-2.5a.745.745 0 0 0 .106-1.04l-2-2.5z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+    [
+        'image',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+    [
+        'info',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="m14.9 11.1l-.062-.07a4 4 0 0 1-.201-.255l-.16-.233a7 7 0 0 1-.48-.865c-.47-1-.952-2.55-.952-4.72a4.97 4.97 0 0 0-1.43-3.49a5 5 0 0 0-3.46-1.5a4.97 4.97 0 0 0-3.52 1.35a5 5 0 0 0-1.58 3.43l-.005.217c0 2.17-.482 3.73-.952 4.72c-.236.5-.47.864-.64 1.1l-.06.082l-.171.208l-.032.035a.5.5 0 0 0 .354.852h13a.498.498 0 0 0 .354-.852zM4 5.36l.005-.404c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0c.75.75 1.17 1.77 1.17 2.83c0 2.33.518 4.02 1.05 5.15c.157.334.314.617.46.85h-11a9 9 0 0 0 .46-.85c.498-1.06.987-2.62 1.04-4.75zm6.4 9.4a.497.497 0 0 0-.1-.7a.5.5 0 0 0-.7.1a1.995 1.995 0 0 1-2.495.589a2 2 0 0 1-.705-.59a.501.501 0 0 0-.895.23a.5.5 0 0 0 .095.37a3 3 0 0 0 2.4 1.2a3 3 0 0 0 2.4-1.2z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .276.447l3 1.5a.5.5 0 0 0 .447-.895l-2.72-1.36v-4.19z"/><path fill="currentColor" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8M1 8c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7s-7-3.13-7-7" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M.75.75v22.5h22.5"/><path d="M14.15 17.358a5.5 5.5 0 0 0 1.487 1.623l.713.519m-12.6 0l.713-.519A5.39 5.39 0 0 0 6.7 14.939l.4-6.979a2.92 2.92 0 0 1 2.95-2.71h.137"/><path d="m9.15 19.5l.713-.519a5.39 5.39 0 0 0 2.237-4.042l.4-6.979a2.92 2.92 0 0 1 2.95-2.71a2.92 2.92 0 0 1 2.955 2.71l.4 6.979a5.39 5.39 0 0 0 2.232 4.042l.713.519"/></g></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M8 16c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8m0-1c3.87 0 7-3.13 7-7s-3.13-7-7-7s-7 3.13-7 7s3.13 7 7 7" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+    [
+        'network',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from\r\n    Huge Icons by Hugeicons - undefined -->\r\n    <g fill="none" stroke="currentColor" stroke-width="1.5">\r\n        <path stroke-linecap="round" d="M12 11v9" />\r\n        <path d="M14 9a2 2 0 1 1-4 0a2 2 0 0 1 4 0Z" />\r\n        <path stroke-linecap="round" stroke-linejoin="round"\r\n            d="M16.959 6C17.619 6.87 18 7.898 18 9s-.381 2.13-1.041 3M7.04 6C6.381 6.87 6 7.898 6 9s.381 2.13 1.041 3m13.275-8C21.38 5.43 22 7.15 22 9s-.62 3.57-1.684 5M3.684 4C2.62 5.43 2 7.15 2 9s.62 3.57 1.684 5" />\r\n    </g>\r\n</svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M0 6c0-3.31 2.69-6 6-6c2.62 0 4.84 1.68 5.66 4.01q.166-.014.337-.014c2.21 0 4 1.79 4 4c0 1.63-.97 3.03-2.36 3.65c-.312.14-.636-.11-.636-.452c0-.222.142-.415.34-.514a2.999 2.999 0 0 0-1.931-5.622a.5.5 0 0 1-.581-.36a5.002 5.002 0 1 0-8.942 4.15a.6.6 0 0 1 .112.346c0 .495-.566.732-.857.332a5.97 5.97 0 0 1-1.14-3.52z"/><path fill="currentColor" d="M5 15.5V8.71L3.85 9.86a.5.5 0 0 1-.707-.707l2-2a.5.5 0 0 1 .35-.147h.006a.5.5 0 0 1 .351.146l2 2a.5.5 0 0 1-.707.707l-1.15-1.15v6.79a.5.5 0 0 1-1 0zM10.5 7a.5.5 0 0 1 .5.5v6.79l1.15-1.15a.5.5 0 0 1 .707.707l-2 2a.5.5 0 0 1-.351.146H10.5a.5.5 0 0 1-.35-.147l-2-2a.5.5 0 0 1 .707-.707l1.15 1.15V7.5a.5.5 0 0 1 .5-.5z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0c2.12 0 4.16.843 5.66 2.34C15.16 3.84 16 5.88 16 8a8.02 8.02 0 0 1-2.34 5.66A8 8 0 0 1 8 16a8.02 8.02 0 0 1-5.66-2.34A8 8 0 0 1 0 8c0-2.12.843-4.16 2.34-5.66C3.84.84 5.88 0 8 0m1.76 11H6.23l.05.305c.119.655.266 1.24.43 1.75l.127.365c.365.988.792 1.58 1.16 1.58s.792-.59 1.16-1.58l.126-.365q.274-.863.43-1.75l.05-.305zm-4.54 0H1.68a7.14 7.14 0 0 0 1.94 2.46a7.1 7.1 0 0 0 2.82 1.37c-.531-.868-.953-2.16-1.2-3.71l-.017-.114zm9.11 0h-3.55l-.016.114c-.245 1.54-.667 2.84-1.2 3.71a7 7 0 0 0 2.82-1.37a6.9 6.9 0 0 0 1.94-2.46v-.001zM5.1 6H1.3a7 7 0 0 0-.29 2c0 .695.101 1.37.29 2l3.8-.001l-.038-.459Q4.932 7.77 5.1 6m4.8 0H6.11a19.4 19.4 0 0 0 0 4H9.9c.138-1.33.138-2.67 0-4m4.81 0h-3.8l.04.459q.129 1.77-.04 3.54h3.8a7 7 0 0 0 0-4zM6.43 1.18l-.071.018a7.1 7.1 0 0 0-2.78 1.37a6.9 6.9 0 0 0-1.91 2.43h3.55l.017-.114c.245-1.54.667-2.84 1.2-3.71l-.001-.001zM8 1.005c-.365 0-.792.59-1.16 1.58l-.126.365a14 14 0 0 0-.43 1.75l-.051.305h3.53l-.05-.305a13 13 0 0 0-.43-1.75l-.126-.365c-.341-.922-.736-1.5-1.08-1.57l-.074-.007zm1.57.176l.065.108c.5.866.898 2.12 1.13 3.6l.016.114h3.55a7.14 7.14 0 0 0-1.94-2.46a7.1 7.1 0 0 0-2.82-1.37z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\r\n<path     stroke-width="1" fill="currentColor" d="M17 17h5.142a4 4 0 1 0 0-2H17V7h5.142a4 4 0 1 0 0-2H17a2 2 0 0 0-2 2v8H9.858a4 4 0 1 0 0 2H15v8a2 2 0 0 0 2 2h5.142a4 4 0 1 0 0-2H17Zm9-3a2 2 0 1 1-2 2a2 2 0 0 1 2-2m0-10a2 2 0 1 1-2 2a2 2 0 0 1 2-2M6 18a2 2 0 1 1 2-2a2 2 0 0 1-2 2m20 6a2 2 0 1 1-2 2a2 2 0 0 1 2-2"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M13 7.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0zM10.5 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5m-7.42.62c-.076.184-.076.417-.076.883s0 .699.076.883c.101.245.296.44.541.541c.184.076.417.076.883.076h2c.466 0 .699 0 .883-.076a1 1 0 0 0 .541-.541c.076-.184.076-.417.076-.883s0-.699-.076-.883a1 1 0 0 0-.541-.541c-.184-.076-.417-.076-.883-.076h-2c-.466 0-.699 0-.883.076a1 1 0 0 0-.541.541"/><path fill="currentColor" fill-rule="evenodd" d="M12.9.223a.5.5 0 0 1-.139.693l-4.63 3.08h3.05c1.68 0 2.52 0 3.16.327a3.02 3.02 0 0 1 1.31 1.31c.327.642.327 1.48.327 3.16v1.4c0 1.68 0 2.52-.327 3.16a3 3 0 0 1-1.31 1.31c-.642.327-1.48.327-3.16.327h-6.4c-1.68 0-2.52 0-3.16-.327a3 3 0 0 1-1.31-1.31c-.327-.642-.327-1.48-.327-3.16v-1.4c0-1.68 0-2.52.327-3.16a3.02 3.02 0 0 1 1.31-1.31c.642-.327 1.48-.327 3.16-.327h1.55l5.87-3.92a.5.5 0 0 1 .693.139zm-8.12 4.78c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819c-.037.45-.038 1.03-.038 1.89v1.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18c.45.036 1.03.037 1.89.037h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-1.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18c-.45-.037-1.03-.038-1.89-.038z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 3a2.996 2.996 0 0 1-5.34 1.87L5.83 7c.111.313.171.649.171 1s-.06.687-.171 1l3.83 2.13A2.996 2.996 0 0 1 15 13c0 1.66-1.34 3-3 3a2.996 2.996 0 0 1-2.829-4l-3.83-2.13A2.996 2.996 0 0 1 .001 8a2.996 2.996 0 0 1 5.34-1.87L9.171 4A2.996 2.996 0 0 1 12 0c1.66 0 3 1.34 3 3m-1 0a2 2 0 1 1-4.001.001A2 2 0 0 1 14 3M5 8a2 2 0 1 1-4.001.001A2 2 0 0 1 5 8m7 7a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 15" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M.9 6.55C2.52 4.39 5.1 3 8 3s5.48 1.39 7.1 3.55a.5.5 0 0 0 .8-.6A9.85 9.85 0 0 0 8 2C4.77 2 1.9 3.55.1 5.95a.5.5 0 0 0 .799.6z"/><path fill="currentColor" d="M2.9 8.55A6.36 6.36 0 0 1 8 6c2.09 0 3.94 1 5.1 2.55a.5.5 0 0 0 .8-.6A7.36 7.36 0 0 0 8 5C5.59 5 3.44 6.16 2.1 7.95a.5.5 0 0 0 .799.6z"/><path fill="currentColor" d="M8 9c-1.27 0-2.39.608-3.1 1.55a.5.5 0 0 1-.8-.6A4.87 4.87 0 0 1 8 8c1.6 0 3.01.767 3.9 1.95a.5.5 0 0 1-.799.6A3.87 3.87 0 0 0 8.001 9zm0 5a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/></svg>',
+        ],
+    ],
+    [
+        'power',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M15.8.195a.664.664 0 0 0-.94 0l-.293.293a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l.293-.293c.26-.26.26-.68 0-.94zM13.3 1.78a.25.25 0 0 1 .354 0l.587.587a.25.25 0 0 1 0 .354l-.587.587a.25.25 0 0 1-.354 0l-.586-.587a.25.25 0 0 1 0-.354zm-1.5 1.88a.25.25 0 0 0-.354 0l-1.53 1.53a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l1.53-1.53a.25.25 0 0 0 0-.354zM8.52 6.07a.994.994 0 0 0-1.41 0L3.59 9.59a1.994 1.994 0 1 0 2.82 2.82l3.52-3.52a.994.994 0 0 0 0-1.41zM2.78 13.9a.5.5 0 1 0-.554-.832c-1.31.874-.692 2.92.883 2.92h8.39a.5.5 0 0 0 0-1h-8.39c-.585 0-.815-.759-.328-1.08z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 17.25a6 6 0 0 1-6-6v-4.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 1.5 1.5v4.5a6 6 0 0 1-6 6"/><path d="M9 16.447v2.3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-2.3M9 5.25V.75m6 4.5V.75m-3 19.5v3"/></g></svg>',
+        ],
+    ],
+    [
+        'settings',
+        [
+            '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"\r\n>\r\n  <path\r\n    fill="currentColor"\r\n    fill-rule="evenodd"\r\n    d="M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572"\r\n    clip-rule="evenodd"\r\n  />\r\n</svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8.39 1c.699 0 1.4.2 2 .7l2.1 1.8c.1.1.1.3 0 .4s-.1.3 0 .4l.51.45c.098.094.259.08.388-.05c.158-.158.2-.173.399 0l1 .911c.185.181.196.289.096.389l-1.6 1.9c-.11.139-.27.198-.4.1l-.897-.8c-.1-.1-.088-.276 0-.4s.107-.304 0-.4l-.522-.431c-.156-.121-.226-.148-.45.031c-.15.121-.251.105-.351.031c-.1-.073-.086-.062-.195-.152c-.135-.11-.238-.132-.38.021l-2.6 3.2c.3.2.3.6.1.9l-3.79 4.5c-.398.3-.798.5-1.2.5s-.698-.1-.997-.4c-.7-.6-.7-1.5-.2-2.2l3.79-4.5c.1-.1.299-.2.499-.2c.1 0 .299 0 .399.1l2.2-2.6c.399-.4.25-.9-.15-1.3l-.23-.215C7.412 3.185 6.69 3 5.89 3h-.398c-.1 0-.154-.12-.1-.2l.599-.7c.599-.7 1.5-1.1 2.4-1.1zm0-1c-1.2 0-2.4.5-3.09 1.5l-.599.7c-.299.3-.399.8-.2 1.2c.2.4.599.6.998.6h.499c.499 0 .998.2 1.3.5l.2.2l-1.8 2h-.1q-.748 0-1.2.6l-3.79 4.5c-.898 1.1-.799 2.7.3 3.6c.498.4.997.6 1.7.6c.798 0 1.5-.3 1.9-.9l3.79-4.5c.298-.4.398-.9.298-1.4l1.9-2.2c.105-.119.3-.113.3 0c0 .3.2.7.5.9l.897.8q.45.3.898.3c.4 0 .8-.2.998-.5l1.6-1.9c.5-.5.33-1.32-.2-1.8l-.898-.8q-.3-.3-.898-.3h-.1c0-.3-.2-.7-.499-.9l-2.1-1.8c-.699-.7-1.6-1-2.6-1z"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8.2 1H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 3.36.999 3.94.999 4.8v5.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18c.25.02.54.03.895.034c.13.36.328.702.596 1c-1.42-.002-2.17-.027-2.76-.327a3 3 0 0 1-1.31-1.31c-.327-.642-.327-1.48-.327-3.16V4.8c0-1.68 0-2.52.327-3.16A3.02 3.02 0 0 1 1.641.33c.642-.327 1.48-.327 3.16-.327h3.4c1.68 0 2.52 0 3.16.327a3.02 3.02 0 0 1 1.31 1.31c.24.47.304 1.05.321 1.99a3 3 0 0 0-.359.015a3.1 3.1 0 0 0-.664-.607l-.009-.12c-.036-.438-.1-.663-.18-.82a2 2 0 0 0-.874-.873c-.156-.08-.38-.145-.819-.18c-.45-.037-1.03-.038-1.89-.038z"/><path fill="currentColor" d="M8.07 3H2.5a.5.5 0 0 0 0 1h3.07a3.1 3.1 0 0 1 1.8-.362c.202-.247.441-.463.71-.638zM2.5 6h1.31a3 3 0 0 0-.183 1h-1.12a.5.5 0 0 1 0-1zm.09 3h-.094a.5.5 0 0 0 0 1v-.238q0-.395.094-.762"/><path fill="currentColor" fill-rule="evenodd" d="M10 12c1.1 0 2-.895 2-2c0-1.1-.895-2-2-2c-1.1 0-2 .895-2 2c0 1.1.895 2 2 2m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.2 4h-.474c-.79 0-1.45.575-1.57 1.33a5 5 0 0 0-.211.087a1.59 1.59 0 0 0-2.05.173l-.337.337a1.594 1.594 0 0 0-.173 2.05q-.046.105-.087.211a1.596 1.596 0 0 0-1.33 1.57v.474c0 .793.577 1.45 1.33 1.58q.04.104.085.206a1.6 1.6 0 0 0 .171 2.06l.33.33c.562.562 1.44.62 2.07.168q.098.045.198.083a1.6 1.6 0 0 0 1.58 1.34h.458c.8 0 1.46-.584 1.59-1.35q.098-.039.194-.081c.628.454 1.51.398 2.08-.167l.321-.321c.565-.565.621-1.45.167-2.08q.043-.097.081-.194a1.61 1.61 0 0 0 1.35-1.59v-.458c0-.797-.581-1.46-1.34-1.58a5 5 0 0 0-.082-.2c.45-.625.394-1.5-.17-2.07l-.328-.328a1.6 1.6 0 0 0-2.06-.171a5 5 0 0 0-.206-.086a1.596 1.596 0 0 0-1.58-1.33zM9.13 5.6c0-.329.266-.595.595-.595h.474c.33 0 .598.268.598.598c0 .282.199.521.466.613q.236.081.458.191c.254.125.566.097.766-.103a.6.6 0 0 1 .847 0l.329.329a.603.603 0 0 1 0 .852c-.201.201-.23.513-.106.768q.105.217.184.447c.093.27.334.472.619.472c.333 0 .603.27.603.603v.458a.606.606 0 0 1-.606.606c-.286 0-.528.202-.622.471q-.078.226-.182.439c-.125.257-.097.572.106.774a.605.605 0 0 1 0 .857l-.321.321a.605.605 0 0 1-.857 0c-.202-.202-.517-.231-.774-.106q-.213.104-.439.182c-.27.094-.472.336-.472.622a.606.606 0 0 1-.606.606h-.458a.603.603 0 0 1-.603-.603c0-.285-.202-.527-.472-.619a4 4 0 0 1-.447-.184c-.255-.124-.567-.095-.768.105a.603.603 0 0 1-.852 0l-.329-.329a.6.6 0 0 1 0-.847c.2-.2.228-.512.103-.766a4 4 0 0 1-.191-.458c-.092-.267-.331-.466-.613-.466a.6.6 0 0 1-.598-.598v-.474c0-.329.266-.595.595-.595c.282 0 .52-.199.611-.466a4 4 0 0 1 .193-.466c.124-.252.096-.561-.103-.76a.596.596 0 0 1 0-.842l.337-.337a.596.596 0 0 1 .842 0c.199.199.508.227.76.103q.225-.11.466-.193c.267-.09.466-.329.466-.611z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"\r\n  ><path\r\n    fill="currentColor"\r\n    d="M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z"\r\n  /></svg\r\n>\r\n',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M8 0C6.9 0 6 .895 6 2v.068a.46.46 0 0 1-.285.423a.45.45 0 0 1-.492-.096a1.924 1.924 0 0 0-2.72 0l-.109.11a1.924 1.924 0 0 0 0 2.72a.45.45 0 0 1 .096.491a.46.46 0 0 1-.424.285h-.068a2 2 0 1 0 0 4h.068c.183 0 .352.112.424.285a.45.45 0 0 1-.096.492a1.924 1.924 0 0 0 0 2.72l.109.11c.751.75 1.97.75 2.72 0a.45.45 0 0 1 .492-.097c.172.072.285.24.285.424v.068a2 2 0 1 0 4 0v-.068c0-.183.112-.352.285-.424a.45.45 0 0 1 .492.096c.751.751 1.97.751 2.72 0l.109-.109a1.924 1.924 0 0 0 0-2.72a.45.45 0 0 1-.096-.492a.46.46 0 0 1 .424-.285H14a2 2 0 1 0 0-4h-.067a.46.46 0 0 1-.424-.285a.45.45 0 0 1 .096-.492a1.924 1.924 0 0 0 0-2.72l-.109-.109a1.924 1.924 0 0 0-2.72 0a.45.45 0 0 1-.492.096a.46.46 0 0 1-.285-.424V2c0-1.1-.895-2-2-2M7 2a1 1 0 0 1 2 0v.068c0 .59.359 1.12.902 1.35c.54.223 1.17.102 1.58-.314a.917.917 0 0 1 1.3 0l.109.11a.93.93 0 0 1 0 1.31a1.45 1.45 0 0 0-.313 1.58c.225.543.756.902 1.35.902h.067a1 1 0 0 1 0 2h-.067a1.47 1.47 0 0 0-1.35.902c-.224.54-.103 1.17.313 1.58c.36.36.36.945 0 1.3l-.109.109a.917.917 0 0 1-1.3 0a1.45 1.45 0 0 0-1.58-.313A1.46 1.46 0 0 0 9 13.934V14a1 1 0 0 1-2 0v-.067a1.47 1.47 0 0 0-.902-1.35a1.45 1.45 0 0 0-1.58.313a.917.917 0 0 1-1.3 0l-.109-.11a.93.93 0 0 1 0-1.31a1.45 1.45 0 0 0 .313-1.58a1.46 1.46 0 0 0-1.35-.901h-.068a1 1 0 0 1 0-2h.068a1.47 1.47 0 0 0 1.35-.902c.224-.54.103-1.17-.313-1.58a.917.917 0 0 1 0-1.3l.109-.11a.93.93 0 0 1 1.31 0a1.45 1.45 0 0 0 1.58.314c.543-.225.902-.756.902-1.35V2z" clip-rule="evenodd"/></svg>',
+            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.1 3.12a1 1 0 0 1 .706.71c.452 1.71.032 3.62-1.32 4.97a5.14 5.14 0 0 1-4.87 1.36a.34.34 0 0 0-.148-.006l-.025.008l-5.08 5.08a2.563 2.563 0 0 1-3.62 0a2.563 2.563 0 0 1 0-3.62l5.08-5.08l.008-.025a.34.34 0 0 0-.006-.148a5.16 5.16 0 0 1 1.366-4.88a5.11 5.11 0 0 1 4.97-1.32a1 1 0 0 1 .452 1.674l-2.1 2.1l.383 1.15l1.15.383l2.1-2.1a1 1 0 0 1 .968-.258zM5.81 6.55l.001-.002zm3.62 3.62l.002-.001zm4.34-2.07a4.16 4.16 0 0 1-3.93 1.1c-.396-.096-.827-.023-1.12.265l-5.08 5.08c-.607.608-1.6.608-2.21 0a1.57 1.57 0 0 1 0-2.21l5.08-5.08c.288-.288.361-.721.265-1.12a4.2 4.2 0 0 1-.043-1.78a4.2 4.2 0 0 1 1.14-2.15c.76-.76 1.74-1.16 2.73-1.2a4.3 4.3 0 0 1 1.28.137l-2.1 2.1a1 1 0 0 0-.242 1.02l.383 1.15c.1.299.334.533.632.632l1.15.383a.99.99 0 0 0 1.02-.242l2.1-2.1c.11.418.156.849.137 1.28a4.1 4.1 0 0 1-1.2 2.73z" clip-rule="evenodd"/></svg>',
+        ],
+    ],
+];

package/dist/Button/ButtonProps.svelte

@@ -60,16 +60,17 @@
             updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
           }}
         />
-      {/if}
-      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
+
         <UI.Input
-          wrapperClass={Header.value === 'SET' ? 'mt-1' : ''}
-          label={{ name: Header.value === 'SET' ? '' : $t('constructor.props.argument') }}
+          wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
           value={component.properties.eventHandler.Argument}
-          help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
           maxlength={32}
+          disabled={component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave'}
+          help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
           onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
         />
+      {/if}
+      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
           value={component.properties.eventHandler.Value}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -8,7 +8,7 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
   const DeviceVariables = getContext<string[]>('DeviceVariables')
@@ -38,7 +38,7 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />

package/dist/ColorPicker/ColorPickerProps.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IColorPickerProps>;
     };
-    onPropertyChange: (value: string | object) => void;
+    onPropertyChange: (value: string | object, name?: string) => void;
 };
 declare const ColorPickerProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type ColorPickerProps = ReturnType<typeof ColorPickerProps>;

package/dist/Input/Input.svelte

@@ -68,7 +68,7 @@
               ${disabled ? 'opacity-50' : 'hover:shadow-md'} 
               ${readonly ? '' : 'hover:shadow-md'}
               ${help?.info ? 'pl-8' : ''} 
-              ${help.copyButton || type === 'password' || type === 'number' ? 'pr-8' : ''}`,
+              ${help.copyButton || type === 'password' || (type === 'number' && !readonly) ? 'pr-8' : ''}`,
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"

package/dist/Modal.svelte

@@ -21,7 +21,10 @@
   } = $props()
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') isOpen = false
+    if (event.key === 'Escape') {
+      isOpen = false
+      onCancel()
+    }
   }
 
   onMount(() => {

package/dist/Select/SelectProps.svelte

@@ -126,7 +126,15 @@
         type="buttons"
         options={$optionsStore.COLOR_OPTIONS}
         value={initialColor}
-        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+          console.log(component.properties.wrapperClass, component.properties.options)
+        }}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -194,7 +202,9 @@
           label={{ name: $t('constructor.props.colors') }}
           type="buttons"
           options={$optionsStore.COLOR_OPTIONS}
-          value={initialColor}
+          value={$optionsStore.COLOR_OPTIONS.find((c) =>
+            (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+          )}
           onUpdate={(option) => {
             const options = [...(component.properties?.options || [])]
             options[index]['class'] = option.value

package/dist/types.d.ts

@@ -2,9 +2,10 @@ import type { Component, Snippet } from 'svelte';
 import type { Writable } from 'svelte/store';
 export declare const updateProperty: (path: string, value: string | number | boolean | object | string[], component: UIComponent & {
     properties: Partial<UIComponent["properties"]>;
-}, onPropertyChange: (value: string | object) => void) => void;
+}, onPropertyChange: (value: string | object, name?: string) => void, name?: string) => void;
 export interface UIComponent {
     id: string;
+    name?: string;
     type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table';
     component: Component<IButtonProps> | Component<IInputProps> | Component<ISelectProps> | Component<ISwitchProps> | Component<IColorPickerProps> | Component<ISliderProps> | Component<ITextFieldProps> | Component<IProgressBarProps> | Component<IGraphProps> | Component<ITableProps<object>> | null;
     properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object>;

package/dist/types.js

@@ -1,4 +1,4 @@
-export const updateProperty = (path, value, component, onPropertyChange) => {
+export const updateProperty = (path, value, component, onPropertyChange, name) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties));
     const parts = path.split('.');
     let obj = newProperties;
@@ -9,5 +9,5 @@ export const updateProperty = (path, value, component, onPropertyChange) => {
         obj = obj[part];
     }
     obj[parts[parts.length - 1]] = value;
-    onPropertyChange(newProperties);
+    onPropertyChange(newProperties, name);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -36,7 +36,7 @@
     "@tailwindcss/vite": "^4.1.14",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.6",
@@ -48,9 +48,9 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.7.2",
     "publint": "^0.3.14",
-    "svelte": "^5.39.12",
+    "svelte": "^5.40.0",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.9",
+    "vite": "^7.1.10",
     "vite-plugin-compression": "^0.5.1"
   }
 }