SvelteとTailwindCSS を学ぶためにFlowbite-Svelte UI を作ってみた話

# Svelte & TailwindCSS
今年になってSvelteとTailwindCSSをやってみたいと思いDocを読むだけではと思い[Flowbite-Svelte](https://flowbite-svelte.vercel.app/)を作ってみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/a256aa21-7f6b-56c1-80b9-9bc554f0aefb.png)

今のところ以下のUI Componentが揃っています。(2022年4月6日更新）

- [Accordions](https://flowbite-svelte.vercel.app/accordions)
- [Alerts](https://flowbite-svelte.vercel.app/alerts)
- [Avatar](https://flowbite-svelte.vercel.app/avatar)
- [Badges](https://flowbite-svelte.vercel.app/badges)
- [Button Groups](https://flowbite-svelte.vercel.app/button-groups)
- [Buttons](https://flowbite-svelte.vercel.app/buttons)
- [Cards](https://flowbite-svelte.vercel.app/cards)
- [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
- [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
- [Forms](https://flowbite-svelte.vercel.app/forms)
- [Footer](https://flowbite-svelte.vercel.app/footer)
- [Icons](https://flowbite-svelte.vercel.app/icons)
- [List group](https://flowbite-svelte.vercel.app/list-group)
- [Modals](https://flowbite-svelte.vercel.app/modals)
- [Navbar](https://flowbite-svelte.app/navbar)
- [Pagination](https://flowbite-svelte.vercel.app/paginations)
- [Progress bar](https://flowbite-svelte.vercel.app/progressbars)
- [Sidebar](https://flowbite-svelte.vercel.app/sidebars)
- [Spinners](https://flowbite-svelte.vercel.app/spinners)
- [Tabs](https://flowbite-svelte.vercel.app/tabs)
- [Timeline](https://flowbite-svelte.vercel.app/timelines)
- [Toast](https://flowbite-svelte.vercel.app/toasts)
- [Tooltip](https://flowbite-svelte.vercel.app/tooltips)

Flowbite-Svelteは[Flowbite](https://flowbite.com/docs/getting-started/introduction/)というTailwindCSS component libraryのCSSを使っています。
当初はFlowbiteのJavaScriptを使っていたのですがそれではあまりSvelteを使っている意味がないのでInteractivityは全てSvelteで行うことにしました。
またこのサイトを作るのに必要な他のAppも作ったのでここに紹介しておきます。

## Flowbite-Svelte

[Flowbite-Svelte GitHub Repo](https://github.com/shinokada/flowbite-svelte)
[Installation](https://flowbite-svelte.vercel.app/getting-started)はここをみてください。

## Images

このサイトで使っているImageは[Text to photo](https://app.cecilieo.com/text-to-photo-editor)で作りました。このAppは去年作ったのですがSvelte-flow用にアップデートしました。TextをImageの上に貼れダウンロードできます。

![accordions.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/df5d1bb0-15cc-6a99-8fb7-00f1e96a4c3f.jpeg)
accordions.jpg

## Heroicons

アイコンが必要だったので[Svelte-Heros](https://github.com/shinokada/svelte-heros)も作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/6797ce8f-bee8-8748-f307-c1bd8ff5364b.png)

[Svelte REPLはここ](https://svelte.dev/repl/df3b6ab30a63489692ea8aa48617072a?version=3.46.4)

## Simpleicons

Social Media用のアイコンが必要だったので[svelte-simples](https://github.com/shinokada/svelte-simples)も作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/c424a410-e19d-3dbd-af2d-399072ca024f.png)

## Svelte SVG Icon Creator (SSIC)

[SSIC](https://github.com/shinokada/ssic)は上記のアイコンを作るために作りました。アイコンは何千もあるので手作業では無理なので。
Simple-iconsは色々他のcomponentを試したのですがどれも動かなくじゃ作ってしまおうと。

## Image optimization

Imageをオプティマイズするために[consize](https://github.com/shinokada/consize)をつくました。PNGからWebPに変えてResizeしました。
その結果Lighthouseでほぼ100％の結果が出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/3fed4a3a-2c36-cba1-de44-4ea61685385e.png)


## Svelte-Sidebar-Menu
トップメニューでは入りきれなくなったので[svelte-sidebar](https://github.com/shinokada/svelte-sidebar)を使っています。これはSvelte-flowの前に作ったのですが実際使えて満足です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30943/135a6a07-cfa7-82e2-0b0d-8ba109340da1.png)


まだまだこれからもっとコンポーネントを増やしていく予定です。できれば[GitHub](https://github.com/shinokada/svelte-flow)へのContribution願います。
また使ってみて何か改良するようなところがあればぜひ[連絡](https://github.com/shinokada/svelte-flow/issues)ください。