Svonic

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

#ionic #svelte #sveltekit #ui #svonicui #ionic-framework #svelte-kit #sveltejs #svonic

👷 ⚠️ 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>