stanskrivanek/svonic

Svonic is a UI component library for Svelte based on the Ionic Framework.

👷 ⚠️ READ THIS FIRST!

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

Svonic

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

Svonic Core

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

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.

Svonic Forms

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.

🤔 Why use Ionic?

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.

⬇️ Installation

pnpm i -D @svonic/core

pnpm i -D @svonic/ui

pnpm i -D @svonic/forms

👩‍🚀 Getting Started

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>

📦 Packages

Currently Svonic has these packages.

Svonic Core

Svonic Forms

Svonic UI

🏫 Example Apps

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

📘 Documentation

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

There are demos for most Svonic Core components.

💔 Not what you are looking for?

💡 Try these other great libraries!

DaisyUI

💻 Github
📚 Docs

SvelteUI

💻 GitHub
📚 Docs

Carbon Components

💻 Github
📚 Docs

🥶 Stop. Collaborate. Listen.

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

🙏 Acknowledgments

Tan Li Hau 👋 👋

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

Other great resources that helped me a lot...

Johnny Magrippis

💻 Github
📺 Youtube

Joy of Code

💻 Github
📺 Youtube

Tommertom

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

💻 Github

twMVC

Special thanks to the Taiwan MVC Group. ☕ 🇹🇼

🧑‍🎓 Facebook