https://github.com/svonic/svonic
Svonic is a UI component library for Svelte based on the Ionic Framework.
https://github.com/svonic/svonic
ionic ionic-framework svelte svelte-kit sveltejs sveltekit svonic svonicui ui
Last synced: 8 months ago
JSON representation
Svonic is a UI component library for Svelte based on the Ionic Framework.
- Host: GitHub
- URL: https://github.com/svonic/svonic
- Owner: svonic
- Created: 2022-05-22T03:57:57.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T00:58:44.000Z (over 1 year ago)
- Last Synced: 2024-09-29T12:06:13.138Z (over 1 year ago)
- Topics: ionic, ionic-framework, svelte, svelte-kit, sveltejs, sveltekit, svonic, svonicui, ui
- Language: Svelte
- Homepage: https://www.svonic.dev
- Size: 5.63 MB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 👷 ⚠️ 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](https://ionicframework.com). 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 ](https://developer.microsoft.com/en-us/fluentui#/controls/web) and [Mantine](https://github.com/mantinedev/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](https://dynamics.microsoft.com/en-us/sales/overview/) or [NetSuite](https://www.netsuite.com/portal/products/erp/order-management.shtml). Coming from Angular I wanted something similar to [Angular Material Form Fields.](https://material.angular.io/components/form-field/overview) 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](https://ionicframework.com/docs/components).
## ⬇️ 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.
```svelte
import { Application, Content, Footer, Header, Title, Toolbar } from '@svonic/core';
Header
Main Content
Footer
```
## 📦 Packages
### Currently Svonic has these packages.
[Svonic Core](https://github.com/svonic/svonic/tree/main/packages/core)
[Svonic Forms](https://github.com/svonic/svonic/tree/main/packages/forms)
[Svonic UI](https://github.com/svonic/svonic/tree/main/packages/ui)
## 🏫 Example Apps
The [Ionic Conference App](https://github.com/svonic/svonic/tree/main/examples/ionic-conference-app) example app developed as a SvelteKit MPA.
## 📘 Documentation
The Svonic Documentation can be found here...
💻 [Github](https://github.com/svonic/test/tree/main/documentation)
📚 [Docs](https://www.svonic.dev/)
There are demos for most Svonic Core components.
## 💔 Not what you are looking for?
### 💡 Try these other great libraries!
#### DaisyUI
💻 [Github](https://github.com/saadeghi/daisyui)
📚 [Docs](https://daisyui.com/)
#### SvelteUI
💻 [GitHub](https://github.com/svelteuidev/svelteui)
📚 [Docs](https://www.svelteui.org)
#### Carbon Components
💻 [Github](https://carbon-components-svelte.onrender.com/)
📚 [Docs](https://carbon-components-svelte.onrender.com/)
## 🥶 Stop. Collaborate. Listen.
If you have feedback, ideas, questions, feature requests we can discuss all these and more in the [Github discussions](https://github.com/svonic/svonic/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](https://github.com/tanhauhau)
📺 [Youtube](https://www.youtube.com/c/lihautan)
### Other great resources that helped me a lot...
#### Johnny Magrippis
💻 [Github](https://github.com/jmagrippis)
📺 [Youtube](https://www.youtube.com/channel/UCm1ALyg61uhPoTnZBm7mY2g/featured)
#### Joy of Code
💻 [Github](https://github.com/mattcroat)
📺 [Youtube](https://www.youtube.com/c/JoyofCodeDev/featured)
#### Tommertom
Thank you to Tommertom for showing the possibilities of using Ionic together with Svelte.
💻 [Github](https://github.com/Tommertom/svelte-ionic-app)
#### twMVC
Special thanks to the Taiwan MVC Group. ☕ 🇹🇼
🧑🎓 [Facebook](https://www.facebook.com/twmvc)