remove inlineSvg

src/docs/package.json

@@ -32,8 +32,6 @@
     "vite": "^4.4.10"
   },
   "dependencies": {
-    "@svelte-put/inline-svg": "^3.0.0",
-    "@svelte-put/preprocess-inline-svg": "^2.1.3",
     "colord": "^2.9.3",
     "daisyui": "^3.9.1",
     "lodash.debounce": "^4.0.8",

src/docs/src/routes/(docs)/+page.svelte

@@ -1,7 +1,5 @@
 <script>
   import { onMount } from "svelte"
-  import { inlineSvg } from "@svelte-put/inline-svg"
-
   import Countup from "svelte-countup"
   import SEO from "@components/SEO.svelte"
   import Ads from "@components/Ads.svelte"
@@ -1250,7 +1248,8 @@
         <div />
 
         {#each ["vue", "react", "svelte", "qwik", "remix", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "laravel"] as logo, index}
-          <svg
+          <img
+            loading="lazy"
             width="96"
             height="96"
             class="aspect-square w-full will-change-auto motion-reduce:!opacity-100 motion-reduce:!filter-none motion-reduce:![scale:1]"
@@ -1271,7 +1270,8 @@
               [-70 + index * 5, -60 + index * 5],
               [1.05, 1]
             )}`}
-            use:inlineSvg={`/logos/${logo}.svg`} />
+            alt={`daisyUI ${logo}`}
+            src={`/logos/${logo}.svg`} />
         {/each}
       </div>
     </div>
@@ -1703,11 +1703,13 @@
       <div class="h-16" />
       <div class="pointer-events-none mx-auto flex max-w-xl flex-wrap justify-center gap-10 px-6">
         {#each ["svelte", "vue", "react", "solidjs", "preact", "angular", "qwik", "nextjs", "nuxtjs", "remix", "11ty", "vite", "astro"] as logo, index}
-          <svg
+          <img
+            loading="lazy"
             width="96"
             height="96"
             class="aspect-square h-10 w-10"
-            use:inlineSvg={`/logos/${logo}.svg`} />
+            src={`/logos/${logo}.svg`}
+            alt={`daisyUI ${logo}`} />
         {/each}
       </div>
       <div class="h-16" />

src/docs/src/routes/(docs)/docs/install/+page.svelte.md

@@ -5,7 +5,6 @@ published: true
 ---
 
 <script>
-  import { inlineSvg } from "@svelte-put/inline-svg"
   import InstallTabs from "@components/InstallTabs.svelte"
   import Translate from "@components/Translate.svelte"
   import { exampleRepos } from "@src/lib/data.js"
@@ -41,11 +40,11 @@ module.exports = {
 
 <figure class="px-12 pt-6 pb-2 w-full aspect-[2/1] items-end overflow-visible">
 {#if logos.length === 1}
-<svg use:inlineSvg={logos[0]} width="96" height="96" class="aspect-square w-full h-auto" />
+<img loading="lazy" alt={logos[0]} src={logos[0]} width="96" height="96" class="aspect-square w-full h-auto" />
 {:else}
 <div class="grid w-full">
-<svg use:inlineSvg={logos[0]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-full h-auto" />
-<svg use:inlineSvg={logos[1]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-3/5 -mr-4 -mb-4 place-self-end justify-self-end drop-shadow-md h-auto" />
+<img loading="lazy" alt={logos[0]} src={logos[0]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-full h-auto" />
+<img loading="lazy" alt={logos[1]} src={logos[1]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-3/5 -mr-4 -mb-4 place-self-end justify-self-end drop-shadow-md h-auto" />
 </div>
 {/if}
 </figure>

src/docs/svelte.config.js

@@ -3,7 +3,6 @@ import adapter from "@sveltejs/adapter-static"
 import preprocess from "svelte-preprocess"
 import headingSlugs from "rehype-slug"
 import linkHeadings from "rehype-autolink-headings"
-import { inlineSvg } from "@svelte-put/preprocess-inline-svg"
 
 const rehypePlugins = [
   headingSlugs,
@@ -43,7 +42,6 @@ export default {
         _: "src/lib/mdsvex.svelte",
       },
     }),
-    inlineSvg(),
     preprocess({
       postcss: true,
     }),