Ionic SvelteKit Demo

A showcase app for all Ionic UI elements. Supercharged by `ionic-svelte`, the unofficial Ionic Svelte integration.

With handy tool to see the actual code in all popular frameworks - Svelte, Vue, React, Stencil, VanillaJS and even Angular!

Click the PWA Launch button to see this app live in action - and install as PWA on your desktop or mobile!

Introduction
Want to start your own Ionic project?
What is next - API
Screenshots
Ionic starters - the Ionic CLI standard projects
How to contribute?
REPLS
Things to do maybe one day...
Acknowledgements

Introduction

A showcase app for all Ionic UI elements - up to Ionic 6!!! Use this app to try-out the elements you like for your app, and then navigate directly to the API docs or the source code.

Published as web app: https://ionicsvelte.firebaseapp.com

Open developer tools to see developer info in the console.log

Design objectives

Use all Ionic 6 UI elements
Integration with SvelteKit as framework (n.b. only SPA mode works, SSR won't fly with Ionic)
Ease PWA configuration with good documentation - using zero-config Vite (https://vite-plugin-pwa.netlify.app/)
Deployable as PWA
File based router (using SvelteKit's router)
aligned as much as possible to the Ionic documentation for other integrations
supporting other framework developers through source-code viewing

As far as I can see now, the current new version is getting there pretty close!

The original Svelte-Vite-Routify repo will continue to exist as separate branch (ViteSvelteIonic6) once the migration is completed. But I don't think I will upgrade that one anymore.

Hint: try responsive design of the app and ionic UI magic by using various devices or the Chrome developer view: iOS, Android's material design and fullscreen desktop responsiveness guaranteed!

Want to start your own Ionic project?

On the CLI just type npm create ionic-svelte-app@latest to spin a SvelteKit project from the CLI. This will do all the lifting for you to create a SvelteKit SPA app.

What is next - API

The aim of this project is to stay as close as possible to Ionic's documentation. https://ionicframework.com/docs/components

But in some cases, that won't work. Visit https://github.com/Tommertom/svelte-ionic-npm to get more info on how to develop with Ionic Svelte and some issues.

And special components such as IonPage, IonNav and IonTabs which have their own APIs

Questions - find me on Ionic's discord server, with a separate Ionic Svelte Channel - https://discordapp.com/channels/520266681499779082/1049388501629681675

Screenshots

Intro	Component menu	Sourcecode

Progress bar	Icons	PWA IOS install

More screens: https://ionicsvelte.firebaseapp.com

Ionic starters - the Ionic CLI standard projects

If you want to get started with Ionic, Svelte and Vite, just use one of the starters that you can normally get when spinning a new Ionic project using the CLI

PLEASE NOTE - THESE ARE NOT IN SVELTEKIT, BUT IN SVELTE+VITE+ROUTIFY

Blank demo
- https://github.com/Tommertom/svelte-ionic-blank-demo
- npx degit Tommertom/svelte-ionic-blank-demo svelte-ionic-blank-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-blank-demo
Tabs demo
- https://github.com/Tommertom/svelte-ionic-tabs-demo
- npx degit Tommertom/svelte-ionic-tabs-demo svelte-ionic-tabs-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-tabs-demo
Sidemenu demo
- https://github.com/Tommertom/svelte-ionic-sidemenu-demo
- npx degit Tommertom/svelte-ionic-sidemenu-demo svelte-ionic-sidemenu-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-sidemenu-demo
Mystarter demo - taking photo with Capacitor
- https://github.com/Tommertom/svelte-ionic-mystarter-demo
- npx degit Tommertom/svelte-ionic-mystarter-demo svelte-ionic-mystarter-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-mystarter-demo
List demo
- https://github.com/Tommertom/svelte-ionic-list-demo
- npx degit Tommertom/svelte-ionic-list-demo svelte-ionic-list-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-list-demo
Conference demo - (sort of...check its README)
- https://github.com/Tommertom/svelte-ionic-conference-demo
- npx degit Tommertom/svelte-ionic-conference-demo svelte-ionic-conference-demo
- Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-conference-demo

When using the online playground - make sure you pop-out the render window to see the demo in full size.

Would you like to start any of the above in your favorite framework (React, Vue or Angular), just use the Ionic CLI to start the app: ionic start --type=angular|vue|react. Ionic CLI is easy to install: npm i -g @ionic/cli. https://ionicframework.com/docs/cli/commands/start.

Or clone the repo of this full-demo-app to play with its code:

npx degit Tommertom/svelte-ionic-app svelte-ionic-app
cd svelte-ionic-app
npm i
npm run dev

How to contribute?

Would you like to contribute to this project? Great!

First and foremost - share you feedback!!!!!

For issues with ionic-svelte library - https://github.com/Tommertom/svelte-ionic-npm/issues
For issues related to this demo app - https://github.com/Tommertom/svelte-ionic-app/issues
Or find me on Ionic's discord server, with a separate Ionic Svelte Channel - https://discordapp.com/channels/520266681499779082/1049388501629681675

And if you want to do more - what is there to do:

EASY - fix typos (also great for your Github online profile - there are many), add examples for components
MEDIUM - fix some minor bugs ( e.g. SvelteSpring), improve layout of pages (e.g. SvelteTransition)
HARD - look at the open issues below

When you do a PR, make sure you explain what you did and why!