Skip to content

Commit b9d8a5b

Browse files
KATO-HiroKATO-Hiro
committed
💥 Replace from flowbite-svelte-icons to lucide (#1619)
1 parent 99199f9 commit b9d8a5b

18 files changed

+62
-69
lines changed

‎CONTRIBUTING.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@
2929
- [Svelte](https://svelte.dev/): v5.x。Runes mode で運用中
3030
- [SvelteKit](https://svelte.dev/): v2.x
3131
- UIライブラリ
32-
- [Svelte 5 UI lib](https://svelte-5-ui-lib.codewithshin.com/) - Svelte v5.xにおける[Flowbite Svelte](https://flowbite-svelte.com/)の代替ライブラリ。一部の属性名・値などが変更されていることに注意が必要。コンポーネントが未実装である場合は、主に[Flowbite](https://flowbite.com/)を暫定的に利用する
33-
- [Embla Carousel](https://github.com/davidjerleke/embla-carousel) - Svelte 5 UI lib ではカルーセルコンポーネントが未実装（2025年2月現在）なため、暫定的に導入している
32+
- [Svelte 5 UI lib](https://svelte-5-ui-lib.codewithshin.com/) - Svelte v5.xにおける[Flowbite Svelte](https://flowbite-svelte.com/)の代替ライブラリ。一部の属性名・値などが変更されていることに注意が必要
33+
- コンポーネントが未実装である場合は、主に[Flowbite](https://flowbite.com/)を暫定的に利用する
34+
- [Embla Carousel](https://github.com/davidjerleke/embla-carousel) - Svelte 5 UI lib ではカルーセルコンポーネントが未実装（2025年2月時点）なため、暫定的に導入している
35+
- Tailwind v4 に未対応（2025年2月時点）のため、[Skeleton](https://github.com/skeletonlabs/skeleton)などへ移行する可能性もある
3436
- [STWUI](https://stwui.vercel.app/): 開発が事実上終了した可能性が高いため、使用しているコンポーネントを調べて別のライブラリに移行する
37+
- [Lucide](https://github.com/lucide-icons/lucide) - アイコンライブラリ
3538
- テスティングフレームワーク
3639
- [Vitest](https://vitest.dev/): 単体テスト (ユーティリティ、コンポーネント)
3740
- [Playwright](https://playwright.dev/): e2eテスト

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"eslint": "9.20.0",
4949
"eslint-config-prettier": "10.0.1",
5050
"eslint-plugin-svelte": "2.46.1",
51-
"flowbite-svelte-icons": "2.0.2",
5251
"globals": "15.14.0",
5352
"husky": "9.1.7",
5453
"jsdom": "26.0.0",
@@ -61,9 +60,9 @@
6160
"stwui": "0.21.2-next",
6261
"super-sitemap": "1.0.3",
6362
"svelte": "5.19.9",
63+
"svelte-5-ui-lib": "0.12.2",
6464
"svelte-check": "4.1.4",
6565
"svelte-meta-tags": "4.1.0",
66-
"svelte-5-ui-lib": "0.12.2",
6766
"sveltekit-superforms": "2.23.1",
6867
"tslib": "2.8.1",
6968
"typescript": "5.6.3",
@@ -86,6 +85,7 @@
8685
"embla-carousel-svelte": "8.5.2",
8786
"flowbite": "2.5.2",
8887
"lucia": "2.7.7",
88+
"lucide-svelte": "^0.475.0",
8989
"playwright": "1.50.1",
9090
"pnpm": "10.2.1",
9191
"prisma-erd-generator": "2.0.4",

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/components/AtCoderUserValidationForm.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { Label, Input, P } from 'svelte-5-ui-lib';
3-
import ClipboardOutline from 'flowbite-svelte-icons/ClipboardOutline.svelte';
3+
import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
4+
45
// FIXME: stwui は事実上開発が終了しているので、別のライブラリに置き換える
56
import { copyToClipboard } from 'stwui/utils/copyToClipboard';
67
@@ -86,7 +87,7 @@
8687
<div>
8788
<Input size="md" bind:value={atcoder_validationcode}>
8889
{#snippet right()}
89-
<ClipboardOutline class="w-5 h-5" onclick={handleClick} />
90+
<ClipboardCopy class="w-5 h-5" onclick={handleClick} />
9091
{/snippet}
9192
</Input>
9293
</div>

‎src/lib/components/AuthForm.svelte‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
import { Card, Button, Label, Input, Hr } from 'svelte-5-ui-lib';
66
77
// 必要なコンポーネントだけを読み込んで、コンパイルを時間を短縮
8-
import UserOutlineSolid from 'flowbite-svelte-icons/UserCircleSolid.svelte';
9-
import EyeOutline from 'flowbite-svelte-icons/EyeOutline.svelte';
10-
import EyeSlashOutline from 'flowbite-svelte-icons/EyeSlashOutline.svelte';
8+
import CirCleUserRound from 'lucide-svelte/icons/circle-user-round';
9+
import Eye from 'lucide-svelte/icons/eye';
10+
import EyeOff from 'lucide-svelte/icons/eye-off';
1111
1212
import MessageHelperWrapper from '$lib/components/MessageHelperWrapper.svelte';
1313
@@ -94,8 +94,7 @@
9494
<!-- FIXME: コンポーネントが巨大になってきたと思われるので、分割しましょう -->
9595
<!-- TODO: containerのデフォルト値を設定できないか? -->
9696
<!-- See: -->
97-
<!-- https://flowbite-svelte.com/docs/components/card#Card_with_form_inputs -->
98-
<!-- https://github.com/themesberg/flowbite-svelte-icons/tree/main/src/lib -->
97+
<!-- https://github.com/lucide-icons/lucide -->
9998
<div class="container mx-auto py-8 w-5/6 flex flex-col items-center">
10099
<Card class="w-full max-w-md">
101100
<form id="auth-form" method="post" use:enhance class="flex flex-col space-y-6">
@@ -137,7 +136,7 @@
137136
class="ps-10"
138137
>
139138
{#snippet left()}
140-
<UserOutlineSolid class="w-5 h-5" tabindex={UNFOCUSABLE} />
139+
<CirCleUserRound class="w-5 h-5" tabindex={UNFOCUSABLE} />
141140
{/snippet}
142141
</Input>
143142

@@ -173,9 +172,9 @@
173172
class="pointer-events-auto"
174173
>
175174
{#if showPassword}
176-
<EyeOutline class="w-5 h-5" tabindex={UNFOCUSABLE} />
175+
<Eye class="w-5 h-5" tabindex={UNFOCUSABLE} />
177176
{:else}
178-
<EyeSlashOutline class="w-5 h-5" tabindex={UNFOCUSABLE} />
177+
<EyeOff class="w-5 h-5" tabindex={UNFOCUSABLE} />
179178
{/if}
180179
</button>
181180
{/snippet}

‎src/lib/components/Header.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616
NavUl,
1717
uiHelpers,
1818
} from 'svelte-5-ui-lib';
19-
// @ts-ignore
20-
import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
19+
import ChevronDown from 'lucide-svelte/icons/chevron-down';
2120
2221
import { PRODUCT_NAME } from '$lib/constants/product-info';
2322
import { navbarDashboardLinks, navbarLinks } from '$lib/constants/navbar-links';
@@ -94,7 +93,7 @@
9493
{onclick}
9594
>
9695
{description}
97-
<ChevronDownOutline class="w-3 h-3 ms-1 inline text-primary-800 dark:text-white" />
96+
<ChevronDown class="w-3 h-3 ms-1 inline text-primary-800 dark:text-white" />
9897
</NavLi>
9998
{/snippet}
10099

‎src/lib/components/LabelWithTooltips.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { Label, Tooltip } from 'svelte-5-ui-lib';
3-
import QuestionCircleOutline from 'flowbite-svelte-icons/QuestionCircleOutline.svelte';
3+
import CircleHelp from 'lucide-svelte/icons/circle-help';
44
55
import { TOOLTIP_CLASS_BASE } from '$lib/constants/tailwind-helper';
66
@@ -30,6 +30,7 @@
3030
{/each}
3131
{/if}
3232
</Tooltip>
33-
<QuestionCircleOutline id={tooltipId} />
33+
34+
<CircleHelp class="w-5 h-5" id={tooltipId} />
3435
</div>
3536
</Label>

‎src/lib/components/SubmissionStatus/IconForUpdating.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
2-
// @ts-ignore
3-
import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
2+
import ChevronDown from 'lucide-svelte/icons/chevron-down';
43
54
interface Props {
65
isLoggedIn: boolean;
@@ -12,11 +11,13 @@
1211
<!-- HACK: 以下のコンポーネントと類似しているが、差分が大きいため別コンポーネントとして用意 -->
1312
<!-- src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte -->
1413
{#if isLoggedIn}
15-
<div class="flex items-center justify-center text-sm">
14+
<div class="flex items-center justify-center text-sm space-x-1">
1615
<div class="dark:text-gray-300">
1716
{'更新'}
1817
</div>
1918

20-
<ChevronDownOutline class="w-4 h-4 text-primary-600 dark:text-gray-300 inline" />
19+
<div class="text-primary-600 dark:text-gray-300 inline">
20+
<ChevronDown size="16" />
21+
</div>
2122
</div>
2223
{/if}

‎src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { Img } from 'svelte-5-ui-lib';
3-
import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
3+
import ChevronDown from 'lucide-svelte/icons/chevron-down';
44
55
import type { TaskResult } from '$lib/types/task';
66
@@ -30,6 +30,6 @@
3030
<div class="pb-1 dark:text-gray-300">
3131
{'更新'}
3232
</div>
33-
<ChevronDownOutline class="w-3 h-3 text-primary-600 dark:text-gray-300 inline" />
33+
<ChevronDown class="w-3 h-3 text-primary-600 dark:text-white inline" />
3434
</div>
3535
{/if}

‎src/lib/components/TabItemWrapper.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { type Snippet, onMount } from 'svelte';
33
44
import { TabItem, Tooltip } from 'svelte-5-ui-lib';
5-
import QuestionCircleOutline from 'flowbite-svelte-icons/QuestionCircleOutline.svelte';
5+
import CircleHelp from 'lucide-svelte/icons/circle-help';
66
77
import { WorkBookType } from '$lib/types/workbook';
88
import { activeWorkbookTabStore } from '$lib/stores/active_workbook_tab';
@@ -39,7 +39,6 @@
3939
</script>
4040

4141
<!-- See: -->
42-
<!-- https://flowbite-svelte.com/docs/components/tooltip#Placement -->
4342
<!-- https://svelte-5-ui-lib.codewithshin.com/components/tooltip -->
4443
<div>
4544
{#if tooltipContent !== '' && titleId !== ''}
@@ -64,7 +63,7 @@
6463
</span>
6564

6665
{#if tooltipContent !== ''}
67-
<QuestionCircleOutline />
66+
<CircleHelp class="w-5 h-5" />
6867
{/if}
6968
</div>
7069
</span>

0 commit comments

Comments
 (0)