use the svelte-cloudinary

src/components/Image.svelte

@@ -1,34 +0,0 @@
-<script context="module">
-  const defaultOptions = {
-    fetchFormat: 'auto',
-    quality: 'auto:good',
-  }
-</script>
-
-<script>
-  import { Cloudinary } from 'cloudinary-core'
-  import { onMount } from 'svelte'
-
-  export let src = ''
-  export let options = {}
-  export let alt = ''
-  export let crop = false
-
-  let img
-  let attrs = {}
-
-  onMount(() => {
-    if (crop) {
-      let { width, height } = window.getComputedStyle(img)
-      width = (parseInt(width) * window.devicePixelRatio) | 0
-      height = (parseInt(height) * window.devicePixelRatio) | 0
-      options = { ...options, width, gravity: 'auto', crop: 'fill' }
-    }
-    const cl = Cloudinary.new({ cloud_name: 'cupcakearmy' })
-    const cleaned = src.replace('https://api.nicco.io', '/nicco')
-    const all = { ...defaultOptions, ...options }
-    attrs = cl.imageTag(cleaned, all).attributes()
-  })
-</script>
-
-<img bind:this={img} {...$$restProps} {alt} {...attrs} />

src/components/ImageFrame.svelte

@@ -1,12 +1,20 @@
+<script context="module">
+  import { initialize } from 'svelte-cloudinary'
+
+  initialize({ cloud_name: 'cupcakearmy' })
+</script>
+
 <script>
-  import Image from './Image.svelte'
+  import { image } from 'svelte-cloudinary'
 
   export let src
   export let alt
+
+  $: cleaned = src.replace('https://api.nicco.io', '/nicco')
 </script>
 
 <style>
-  :global(img.cdn) {
+  img {
     width: calc(100% - 0.25em);
     object-fit: cover;
     object-position: center;
@@ -16,10 +24,10 @@
     margin: 0;
   }
 
-  :global(img.cdn:hover) {
+  img {
     transform: scale(1.1);
     margin: 1em 0;
   }
 </style>
 
-<Image crop class="cdn" {src} {alt} />
+<img use:image={{ src: cleaned, bind: { width: true } }} {alt} />