refactor!: change component type props to snippets (#17)

Author: stabldev

README.md

@@ -32,6 +32,9 @@ npm install --save svelte-medium-image-zoom
 
 ## API
 
+Note: component type props are rendered as `snippets`, check [this](https://svelte.dev/docs/svelte/snippet) for more.  
+[example use](https://github.com/moonlitgrace/svelte-medium-image-zoom/pull/17)
+
 ```typescript
 export interface ZoomProps {
   // Accessible label text for when you want to unzoom.
@@ -50,11 +53,11 @@ export interface ZoomProps {
 
   // Provide your own unzoom button icon.
   // Default: ICompress
-  IconUnzoom?: Component | Snippet;
+  icon_unzoom?: Snippet;
 
   // Provide your own zoom button icon.
   // Default: IEnlarge
-  IconZoom?: Component | Snippet;
+  icon_zoom?: Snippet;
 
   // Tell the component whether or not it should be zoomed
   // Default: false

src/lib/components/zoom.svelte

@@ -53,8 +53,8 @@
     a11y_name_button_zoom = 'Expand image',
     children,
     dialog_class,
-    IconUnzoom = ICompress,
-    IconZoom = IEnlarge,
+    icon_unzoom,
+    icon_zoom,
     is_zoomed,
     on_zoom_change,
     wrap_element = 'div',
@@ -408,7 +408,11 @@
         onclick={handle_zoom}
         type="button"
       >
-        <IconZoom />
+        {#if icon_zoom}
+          {@render icon_zoom()}
+        {:else}
+          <IEnlarge />
+        {/if}
       </button>
     </svelte:element>
     <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
@@ -444,7 +448,11 @@
           onclick={handle_unzoom_btn_click}
           type="button"
         >
-          <IconUnzoom />
+          {#if icon_unzoom}
+            {@render icon_unzoom()}
+          {:else}
+            <ICompress />
+          {/if}
         </button>
       </div>
     </dialog>

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { Component, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 
 // ==================================================
 
@@ -18,8 +18,8 @@ export interface ZoomProps {
   a11y_name_button_zoom?: string;
   children: Snippet;
   dialog_class?: string;
-  IconUnzoom?: Component;
-  IconZoom?: Component;
+  icon_unzoom?: Snippet;
+  icon_zoom?: Snippet;
   is_zoomed?: boolean;
   on_zoom_change?: (value: boolean) => void;
   wrap_element?: 'div' | 'span';