lazy-svelte-image 0.0.2 → 1.0.3

package/README.md

@@ -1,58 +1,50 @@
-# create-svelte
+# lazy-image-loader
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+A custom Image component/tag like component with customizations, loader ...
 
-## Creating a project
+## Installing the Package
 
 If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
+npm i lazy-svelte-image
 ```
 
-## Developing
+## Usage
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've installed you can import the package and use just like ```<img>``` . an exaple is given below
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+import { Image } from 'lazy-svelte-image'
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
+<Image src="" alt="" />
 
-To create a production version of your showcase app:
+# or
 
-```bash
-npm run build
+<Image> <!-- slot--> </Image>
 ```
 
-You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## Customization
 
-## Publishing
+Currenlty you can provide custom loader nad broken image icon as slot. use slot like how you use it in svelte.
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+#### For custom Broken Images/Icons
 
-To publish your library to [npm](https://www.npmjs.com):
+```bash
+<span slot="boken">
+<!-- provide contents here -->
+</span>
+```
+#### For custom Loaders
 
 ```bash
-npm publish
+<span slot="loader">
+<!-- provide loader  -->
+</span>
 ```
+
+
+##### Looking forward for feature requests and usages 😃..

package/dist/{components → component}/Image.svelte

@@ -4,7 +4,7 @@ let loaded = false;
 let failed = false;
 let loading = false;
 let icons = {
-  loader: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="100" height="100" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-dasharray="117.80972450961724 41.269908169872416" r="25" stroke-width="7" stroke="#8996a0" fill="none" cy="50" cx="50"><animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1.6129032258064517s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>',
+  loader: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="80" height="80" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-dasharray="113.09733552923255 39.69911184307752" r="24" stroke-width="4" stroke="#629aa9" fill="none" cy="50" cx="50"><animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>',
   broken: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM116.6 187.9L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9zM220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3L220.9 270z"/></svg>'
 };
 onMount(() => {

package/dist/index.d.ts

@@ -1 +1 @@
-export { default as ImageLoader } from './components/Image.svelte';
+export { default as Image } from './component/Image.svelte';

package/dist/index.js

@@ -1,2 +1,2 @@
 // Reexport your entry components here
-export { default as ImageLoader } from './components/Image.svelte';
+export { default as Image } from './component/Image.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lazy-svelte-image",
-	"version": "0.0.2",
+	"version": "1.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",