Add support for icons in notifications (beyonk-group#35)

feat: Add Icon Support
feat: Add option to hide progress bar
Co-authored-by: Antony Jones <ant@enzy.org>

Author: Th3-S1lenc3

README.md

@@ -46,7 +46,9 @@ You can call multiple types of notification:
 ```js
 const options = {
   timeout: 3000, // milliseconds
-  persist: false // automatic timeout (ignores above)
+  persist: false, // automatic timeout (ignores above)
+  showProgess: true, // Show (or Hide) the progress bar
+  icon: null // Add svelte component to render an icon
 }
 
 notifier.show('danger', message, options)
@@ -153,6 +155,25 @@ function someFunction () {
 </script>
 ```
 
+##### Show Progress:
+
+You can show or hide the progress bar per message
+
+```svelte
+<NotificationDisplay />
+
+<button on:click={someFunction}>Show message</button>
+
+<script>
+import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
+
+function someFunction () {
+  notifier.success('Notifications work!', { showProgress: false }) // built in theme
+  notifier.send('custom-theme', 'Notifications work!', { showProgress: true }) // custom theme
+}
+</script>
+```
+
 ##### Persist
 
 You can make a message persist and never timeout, having a close button that the user can click to remove it.
@@ -172,6 +193,34 @@ function someFunction () {
 </script>
 ```
 
+##### Icons
+
+You can include custom svelte components to render icons (or anything).
+
+```svelte
+<NotificationDisplay />
+
+<button on:click={someFunction}>Show message</button>
+
+<script>
+import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
+impoer Icon from 'somewhere/Icon.svelte'
+
+function someFunction () {
+  notifier.success('Notifications work!', { icon: Icon })
+}
+</script>
+
+// Icon.svelte
+
+<svg width="1em" height="1em" viewBox="0 0 36 36">
+  <path
+    fill="currentColor"
+    d="M18 34a16 16 0 1 1 16-16a16 16 0 0 1-16 16Zm0-30a14 14 0 1 0 14 14A14 14 0 0 0 18 4Z"
+  </path>
+</svg>
+```
+
 ## Credits
 
 * Original code by [Antony Jones](https://github.com/antony)

pnpm-lock.yaml

@@ -0,0 +1,40 @@
+<!-- Example of an icon component -->
+<!-- Icon: times-circle-line -->
+<!-- Source: iconify -->
+<!-- URL: https://icon-sets.iconify.design/clarity/times-circle-line/ -->
+
+<style>
+  .demo-icon {
+  	font-size: 1.25rem;
+  	line-height: 1.5rem;
+  	padding-right: 0.25rem;
+  }
+</style>
+
+<div class="demo-icon">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 36 36"
+  >
+    <path
+      fill="currentColor"
+      d="m19.61 18l4.86-4.86a1 1 0 0 0-1.41-1.41l-4.86 4.81l-4.89-4.89a1 1 0 0 0-1.41 1.41L16.78 18L12 22.72a1 1 0 1 0 1.41 1.41l4.77-4.77l4.74 4.74a1 1 0 0 0 1.41-1.41Z"
+      class="clr-i-outline clr-i-outline-path-1">
+    </path>
+    <path
+      fill="currentColor"
+      d="M18 34a16 16 0 1 1 16-16a16 16 0 0 1-16 16Zm0-30a14 14 0 1 0 14 14A14 14 0 0 0 18 4Z"
+      class="clr-i-outline clr-i-outline-path-2">
+    </path>
+    <path
+      fill="none"
+      d="M0 0h36v36H0z">
+    </path>
+  </svg>
+</div>