docs: replace webfonts in doc-components

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

Author: Florian-Schoenherr

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

@@ -1,14 +1,17 @@
+<svelte:options immutable={true} />
+
 <script context="module">
   const icons = {
-    info: 'information',
-    danger: 'alert',
-    warning: 'alert-octagram',
-    success: 'check',
+    info: mdiInformation,
+    danger: mdiAlert,
+    warning: mdiAlertOctagram,
+    success: mdiCheck,
   };
 </script>
 
 <script>
   import { Alert, Icon } from 'svelte-materialify/src';
+  import { mdiInformation, mdiAlert, mdiAlertOctagram, mdiCheck } from '@mdi/js';
 
   export let type = 'info';
   const icon = icons[type];
@@ -20,11 +23,9 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <Alert class="s-alert--doc {type}-text" border="left" text>
   <div slot="icon">
-    <Icon class="mdi mdi-{icon}" />
+    <Icon path={icon} />
   </div>
   <slot />
 </Alert>

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

@@ -1,10 +1,13 @@
+<svelte:options immutable={true} />
+
 <script>
   import { theme } from '@/util/stores';
   import links from '@/util/links';
   import { onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import Markup from './Markup.svelte';
   import { Icon, Button } from 'svelte-materialify/src';
+  import { mdiInvertColors, mdiGithub, mdiCodeTags } from '@mdi/js';
 
   export let file = '';
   export let style = null;
@@ -35,8 +38,6 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <div class="example">
   <div class="example-toolbar text-right pa-1">
     {#if colorInvertable}
@@ -46,7 +47,7 @@
         size="small"
         aria-label="invert color"
         on:click={() => (codeThemeDark = !codeThemeDark)}>
-        <Icon class="mdi mdi-invert-colors" />
+        <Icon path={mdiInvertColors} />
       </Button>
     {/if}
     <a
@@ -55,7 +56,7 @@
       rel="noopener noreferrer"
       target="_blank">
       <Button fab icon size="small" aria-label="GitHub" class="text--primary">
-        <Icon class="mdi mdi-github" />
+        <Icon path={mdiGithub} />
       </Button>
     </a>
     <Button
@@ -64,7 +65,7 @@
       size="small"
       aria-label="Show Code"
       on:click={() => (codeVisible = !codeVisible)}>
-      <Icon class="mdi mdi-code-tags" />
+      <Icon path={mdiCodeTags} />
     </Button>
   </div>
   {#if codeVisible}

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

@@ -1,6 +1,9 @@
+<svelte:options immutable={true} />
+
 <script>
   import Clipboard from 'clipboard';
   import { Button, Icon } from 'svelte-materialify/src';
+  import { mdiContentCopy } from '@mdi/js';
 
   export let lang = '';
   function copy(node) {
@@ -50,17 +53,16 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <div class="code-block" use:copy>
-  <pre class="language-{lang}">
+  <pre
+    class="language-{lang}">
     <code
       class="language-{lang}">
       <slot />
     </code>
   </pre>
   <Button fab depressed size="small" style="position:absolute" aria-label="Copy">
-    <Icon size="20px" class="mdi mdi-content-copy" />
+    <Icon size="20px" path={mdiContentCopy} />
   </Button>
   <span aria-hidden="true">{lang}</span>
 </div>

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

@@ -13,6 +13,7 @@
     Ripple,
     ListItem,
   } from 'svelte-materialify/src';
+  import { mdiInvertColors } from '@mdi/js';
 
   export let values;
   export let controls;
@@ -82,7 +83,7 @@
       <div class="playground__toolbar justify-space-between pl-2 pr-2">
         <div class="text-h6">Options</div>
         <Button icon on:click={toggleTheme}>
-          <Icon class="mdi mdi-invert mdi-invert-colors" />
+          <Icon path={mdiInvertColors} />
         </Button>
       </div>
       <div class="pa-2">

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

@@ -1,5 +1,14 @@
+<svelte:options immutable={true} />
+
 <script>
   import { Row, Col, ListItem, Icon } from 'svelte-materialify/src';
+  import {
+    mdiViewDashboardOutline,
+    mdiSpeedometer,
+    mdiPaletteOutline,
+    mdiFlaskEmptyOutline,
+    mdiFunction,
+  } from '@mdi/js';
 
   export let related;
   const items = related.map((x) => x.split('/'));
@@ -12,11 +21,14 @@
   }
 
   const icons = {
-    components: 'view-dashboard-outline indigo-text',
-    'getting-started': 'speedometer green-text',
-    styles: 'palette-outline deep-purple-text',
-    api: 'flask-empty-outline amber-text',
-    actions: 'function indigo-text',
+    components: {
+      path: mdiViewDashboardOutline,
+      color: 'view-dashboard-outline indigo-text',
+    },
+    'getting-started': { path: mdiSpeedometer, color: 'speedometer green-text' },
+    styles: { path: mdiPaletteOutline, color: 'palette-outline deep-purple-text' },
+    api: { path: mdiFlaskEmptyOutline, color: 'flask-empty-outline amber-text' },
+    actions: { path: mdiFunction, color: 'function indigo-text' },
   };
 </script>
 
@@ -26,8 +38,6 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <section>
   <h2 class="text-h4 mb-3">Ready For More?</h2>
   <p>
@@ -39,7 +49,7 @@
         <a href="/{dir}/{page}/">
           <ListItem ripple class="rounded ready-for-more">
             <div slot="prepend">
-              <Icon class="mdi mdi-{icons[dir]}" />
+              <Icon path={icons[dir].path} class={icons[dir].color} />
             </div>
             {fmt(page)}
             <span slot="subtitle">{fmt(dir)}</span>

packages/docs/src/components/navigation/LeftNavigationDrawer.svelte

@@ -7,6 +7,7 @@
 <script>
   import { stores } from '@sapper/app';
   import { ListGroup, ListItem, Icon } from 'svelte-materialify/src';
+  import { mdiChevronDown } from '@mdi/js';
 
   const { page } = stores();
   export let item;
@@ -31,12 +32,12 @@
 <ListGroup class="secondary-text" eager {offset} bind:active={expanded}>
   <div slot="prepend">
     {#if item.icon}
-      <Icon class="mdi mdi-{expanded ? item.openIcon : item.icon}" />
+      <Icon path={expanded ? item.openIcon : item.icon} />
     {/if}
   </div>
   <slot slot="activator">{item.text}</slot>
   <div slot="append">
-    <Icon class="mdi mdi-chevron-down" rotate={expanded ? 180 : 0} />
+    <Icon path={mdiChevronDown} rotate={expanded ? 180 : 0} />
   </div>
   {#each item.items as children}
     {#if children.items}

packages/docs/src/components/navigation/SiteNavigation.svelte

@@ -26,11 +26,7 @@
     {/each}
   </List>
 </NavigationDrawer>
-<Overlay
-  index="3"
-  active={mobile && sidenav}
-  on:click={() => (sidenav = false)}
-  fadeOptions={{ duration: 250 }} />
+<Overlay index="3" active={mobile && sidenav} on:click={() => (sidenav = false)} />
 
 {#if !mobile}
   <NavigationDrawer

packages/docs/src/playground/Alert.svelte

@@ -1,6 +1,7 @@
 <script>
   import Playground from '@/components/doc/Playground.svelte';
   import { Alert, Icon } from 'svelte-materialify/src';
+  import { mdiHome } from '@mdi/js';
 
   const variants = ['dense', 'outlined', 'text', 'tile'];
 
@@ -43,10 +44,10 @@
     {...formatVariant(values.variants)}>
     <span slot="icon">
       {#if values.icon}
-        <Icon class="mdi mdi-home" />
+        <Icon path={mdiHome} />
       {/if}
     </span>
-    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis itaque excepturi
-    suscipit possimus blanditiis, illum libero sequi a deleniti sapiente.
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis itaque excepturi suscipit
+    possimus blanditiis, illum libero sequi a deleniti sapiente.
   </Alert>
 </Playground>

packages/docs/src/playground/AppBar.svelte

@@ -1,6 +1,7 @@
 <script>
   import Playground from '@/components/doc/Playground.svelte';
   import { AppBar, Button, Icon } from 'svelte-materialify/src';
+  import { mdiMenu, mdiMagnify } from '@mdi/js';
 
   const variants = ['dense', 'prominent', 'flat'];
   const controls = {
@@ -27,13 +28,13 @@
     {...formatVariant(values.variants)}>
     <span slot="icon">
       <Button text fab>
-        <Icon class="mdi mdi-menu" />
+        <Icon path={mdiMenu} />
       </Button>
     </span>
     <span slot="title"> Title </span>
     <div style="flex-grow:1" />
     <Button text fab>
-      <Icon class="mdi mdi-magnify" />
+      <Icon path={mdiMagnify} />
     </Button>
   </AppBar>
 </Playground>

packages/docs/src/playground/Avatar.svelte

@@ -1,6 +1,7 @@
 <script>
   import Playground from '@/components/doc/Playground.svelte';
   import { Avatar, Icon } from 'svelte-materialify/src';
+  import { mdiHome } from '@mdi/js';
 
   const controls = {
     size: { type: 'slider' },
@@ -24,7 +25,7 @@
 <Playground {controls} bind:values>
   <Avatar tile={values.tile} size="{values.size}px" class="{values.color[0]}-color">
     {#if values.icon}
-      <Icon class="mdi mdi-home" />
+      <Icon path={mdiHome} />
     {:else}MS{/if}
   </Avatar>
 </Playground>