Ionic Svelte integration - npm package

Ionic Framework
1

Hey there

Just published Ionic-Svelte integration as NPM package. Should have done this earlier! Makes it dead-easy to integrate in a Svelte(Kit) application.

How to do this - SvelteKit example:

Start a new SvelteKit project (or Svelte with Vite, even though I prefer Kit)

npm create svelte@latest my-app
cd my-app
npm install

We need adapter static, because Ionic pages must run as SPA.

adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: 'index.html',
			precompress: false
		})
  • Pages that use Ionic must be a SPA - so these routes need to have ssr disabled in their layout files. Kit example: src/routes/+layout.ts and add export const ssr = false;

Integration of Ionic

  • npm i @ionic/core ionic-svelte
  • create a theme folder/file that contains the colours for Ionic (see starterfiles/theme)
  • the top-root layour file (Kit) or top root module (others) needs to run setupIonicSvelte() and import the theme stylesheet before anything else - also see starterfiles/+layout.svelte. Example:
<script lang="ts">
	import { setupIonicSvelte } from 'ionic-svelte';

	/* Theme variables */
	import '../theme/variables.css';

	setupIonicSvelte();
</script>

<ion-app>
	Hi there <ion-button>test</ion-button>
</ion-app>

If you get a 500 internal error-error then likely SSR is not disabled. Making a SvelteKit app a real SPA really requires two steps - adapter static and ssr=false

Starterfiles on github: svelte-ionic-npm/starterfiles at main · Tommertom/svelte-ionic-npm · GitHub Use these files as reference to see how to do the final steps integrating Ionic in your svelte project.

Code for NPM library - GitHub - Tommertom/svelte-ionic-npm: NPM package that goes along with Ionic Svelte integration demo

Demo of Ionic UI elements using this library - https://ionicsvelte.firebaseapp.com/
And its code: GitHub - Tommertom/svelte-ionic-app: Ionic UI showcase app - try Ionic UI and directly go to API or source code (Svelte, Angular, Vue, Vanilla and React)