https://github.com/twicpics/components-demo-svelte5
Demonstration of TwicPics components in a Svelte5 project.
https://github.com/twicpics/components-demo-svelte5
Last synced: about 2 months ago
JSON representation
Demonstration of TwicPics components in a Svelte5 project.
- Host: GitHub
- URL: https://github.com/twicpics/components-demo-svelte5
- Owner: TwicPics
- License: mit
- Created: 2024-03-01T17:29:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-11T11:28:35.000Z (3 months ago)
- Last Synced: 2025-02-11T12:32:03.545Z (3 months ago)
- Language: Svelte
- Size: 93.8 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TwicPics Components + Svelte + Vite
This project is a demonstration project of [TwicPics Components](https://www.twicpics.com/docs/components/svelte-5?utm_source=github&utm_medium=organic&utm_campaign=components) using [Svelte5](https://svelte.dev/).
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## How to build
### Using npm
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run preview
```
### Using yarn
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn serve
# build for production and launch server
$ yarn build
$ yarn preview
```
## Overview
### What is [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components)?
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) is a **Responsive Image Service Solution** (SaaS) that enables **on-demand responsive image generation**.
With [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components), developers only deal with high-resolution versions of their media while end-users receive **optimized, perfectly sized, device-adapted** versions **delivered from a server close to them**.
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) acts as an **image proxy**. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a **device-adapted** version with **best-in-class compression**, delivered directly to the end-user from the **closest delivery point** available.
### What is TwicPics Components?
TwicPics Components is a **collection of web components** that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) in your own projects.
Basically, TwicPics components replace `img` and `video` tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.
Simply replace this:
```html
```
With this:
```html
```
Thanks to the open source [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) Components, delivering responsive images in your [Svelte5](https://svelte.dev/) projects has never been easier.
## TwicPics configuration
### Requirement
The only requirement is to have a TwicPics account.
If you don't already have one, you can easily [create your own TwicPics account for free](https://account.twicpics.com/signup).
### Configuring `@twicpics/components`
TwicPics components for Svelte5 comes as an `ES module`.
An example of configuration is already set within `main.js` file.
All you have to do is set your configuration options to the desired values ([see documentation](https://www.twicpics.com/docs/components/svelte-3?utm_source=github&utm_medium=organic&utm_campaign=components#setup-options)).
## Examples
All the examples proposed in this project are located in the `lib` directory.
Feel free to inspire yourself from these different use cases to unleash the power of [TwicPics](https://www.twicpics.com/) in your own projects.
## Questions and feedback
Fell free to submit an [issue](https://github.com/TwicPics/components/issues) or to ask us anything by dropping an email at [[email protected]](mailto:[email protected]).
## Licence
[![License][license-image]][license-url]
[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square
[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE