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

5558 ワード
tailwindcss UI icons SvelteKit Svelte UI テキストリンク

Svelte & TailwindCSS

今年になってSvelteとTailwindCSSをやってみたいと思いDocを読むだけではと思いFlowbite-Svelteを作ってみました。

今のところ以下のUI Componentが揃っています。

Flowbite-SvelteはFlowbiteというTailwindCSS component libraryのCSSを使っています。
当初はFlowbiteのJavaScriptを使っていたのですがそれではあまりSvelteを使っている意味がないのでInteractivityは全てSvelteで行うことにしました。
またこのサイトを作るのに必要な他のAppも作ったのでここに紹介しておきます。

Svelte-flow

Flowbite-Svelte GitHub Repo
Installationはここをみてください。

Images

このサイトで使っているImageはText to photoで作りました。このAppは去年作ったのですがSvelte-flow用にアップデートしました。TextをImageの上に貼れダウンロードできます。


accordions.jpg

Svelte-heroicons

アイコンが必要だったのでSvelte-heroiconsも作りました。

Svelte REPLはここ

Svelte-simpleicons

Social Media用のアイコンが必要だったのでsvelte-simpleiconsも作りました。

Svelte SVG Icon Creator (SSIC)

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

Image optimization

Imageをオプティマイズするためにconsizeをつくました。PNGからWebPに変えてResizeしました。
その結果Lighthouseでほぼ100％の結果が出ました。

Svelte-sidebar

トップメニューでは入りきれなくなったのでsvelte-sidebarを使っています。これはSvelte-flowの前に作ったのですが実際使えて満足です。

まだまだこれからもっとコンポーネントを増やしていく予定です。できればGitHubへのContribution願います。
また使ってみて何か改良するようなところがあればぜひ連絡ください。

***