docs: change icon field to select

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/docs/src/components/doc/Playground.svelte

@@ -100,10 +100,22 @@
               class="mt-4"
               mandatory={controls[label].mandatory}
               bind:value={values[label]}
-              items={controls[label].items}>
+              items={controls[label].items}
+              format={(val) =>
+                controls[label].format
+                  ? controls[label].format(val)
+                  : Array.isArray(val)
+                  ? val.join(', ')
+                  : val}>
               {label}
               <div slot="item" let:item>
-                <ListItem value={item}>{item}</ListItem>
+                {#if controls[label].format}
+                  <ListItem value={item.value}>
+                    {item.name}
+                  </ListItem>
+                {:else}
+                  <ListItem value={item}>{item}</ListItem>
+                {/if}
               </div>
             </Select>
           {:else if controls[label].type === 'text'}

packages/docs/src/playground/Chip.svelte

@@ -1,15 +1,21 @@
 <script>
   import Playground from '@/components/doc/Playground.svelte';
   import { Chip, Avatar, Icon } from 'svelte-materialify/src';
-  import { mdiAccountCircle } from '@mdi/js';
+  import { mdiPlus, mdiMagnet, mdiAccount, mdiViewDashboard } from '@mdi/js';
 
   const variants = ['label', 'link', 'outlined', 'pill'];
 
+  const items = [{ mdiPlus }, { mdiMagnet }, { mdiAccount }, { mdiViewDashboard }].map(
+    (mdi) => {
+      return { name: Object.keys(mdi)[0], value: Object.values(mdi)[0] };
+    },
+  );
+
   const controls = {
     close: { type: 'switch' },
     active: { type: 'switch' },
     avatar: { type: 'switch' },
-    icon: { type: 'text' },
+    icon: { type: 'select', items, format: (val) => items.find((i) => i.value == val).name },
     size: {
       type: 'select',
       items: ['x-small', 'small', 'default', 'large', 'x-large'],
@@ -23,7 +29,7 @@
     close: false,
     active: true,
     avatar: false,
-    icon: mdiAccountCircle,
+    icon: items[0].value,
     size: ['default'],
   };
 </script>

packages/docs/src/playground/Icon.svelte

@@ -1,11 +1,21 @@
 <script>
   import Playground from '@/components/doc/Playground.svelte';
   import { Icon } from 'svelte-materialify/src';
-  import { mdiPlus } from '@mdi/js';
+  import { mdiPlus, mdiMagnet, mdiAccount, mdiViewDashboard } from '@mdi/js';
+
+  const items = [{ mdiPlus }, { mdiMagnet }, { mdiAccount }, { mdiViewDashboard }].map(
+    (mdi) => {
+      return { name: Object.keys(mdi)[0], value: Object.values(mdi)[0] };
+    },
+  );
 
   const controls = {
     size: { type: 'slider' },
-    icon: { type: 'text' },
+    icon: {
+      type: 'select',
+      items,
+      format: (val) => items.find((i) => i.value == val).name,
+    },
     color: { type: 'select', items: ['red', 'green', 'blue', 'indigo', 'purple'] },
   };