Svonic so far is more of a proof of concept and very much in an Alpha state and under construction.

Svonic is a UI component library based on the Ionic Framework. Svonic so far consists of the following 3 ideas for packages.

Svonic Core attempts to make it easier to construct a Svelte application using Ionic Web Components. Svonic Core wraps the Ionic Web Components to make them easier to use in a Svelte application.

Svonic UI uses Svonic Core as a base to build components that Ionic has not created yet or is not interested in making. These missing components can take inspiration from other libraries like Microsoft FluentUI and Mantine.

By using a Svelte wrapper around the Ionic Web Components we could change or replace the underlying Ionic component in the future if necessary. Svonic UI can become a library of complex components, blocks and templates.

The Enterprise apps I normally build are very complex form applications with similar user interfaces to like Microsoft Dynamics 365 or NetSuite. Coming from Angular I wanted something similar to Angular Material Form Fields. Svonic Forms attempts to recreate these to make it easier to build complex forms UIs.

Ionic has a "particular set of features" that makes it a great component framework to build SPA and MPA applications.

Some of these features are...

• Dark Mode
• RTL support
• Adaptive Styling for iOS and Material Design
• Keyboard shortcuts for Desktop

The full list of Ionic components can be found here.

pnpm i -D @svonic/core

pnpm i -D @svonic/ui

pnpm i -D @svonic/forms

All Svonic components should be placed inside an Application component at the root of your application. The Application component helps bootstrap Ionic and make sure all the components are rendered correctly.

<script>
	import { Application, Content, Footer, Header, Title, Toolbar } from '@svonic/core';
</script>

<Application>
	<Header>
		<Toolbar>
			<Title>Header</Title>
		</Toolbar>
	</Header>

	<Content>
		<h1>Main Content</h1>
		<slot />
	</Content>

	<Footer>
		<Toolbar>
			<Title>Footer</Title>
		</Toolbar>
	</Footer>
</Application>

Svonic Core

Svonic Forms

Svonic UI

The Ionic Conference App example app developed as a SvelteKit MPA.

The Svonic Documentation can be found here...
💻 Github
📚 Docs

There are demos for most Svonic Core components.

💻 Github
📚 Docs

💻 GitHub
📚 Docs

💻 Github
📚 Docs

If you have feedback, ideas, questions, feature requests we can discuss all these and more in the Github discussions.

I really learn so much from Li Hau. I wouldn't be able to do any of this without this amazing Youtube Channel.

💻 Github
📺 Youtube

💻 Github
📺 Youtube

💻 Github
📺 Youtube

Thank you to Tommertom for showing the possibilities of using Ionic together with Svelte.

💻 Github

Special thanks to the Taiwan MVC Group. ☕ 🇹🇼

🧑‍🎓 Facebook