Skip to content

Commit 5e4fc05

Browse files
author
wec
committed
feat: icon custom color
1 parent 6ae906e commit 5e4fc05

File tree

4 files changed

+21
-7
lines changed

4 files changed

+21
-7
lines changed

src/lib/components/dashboard.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@
207207
class="h-full w-full rounded-full object-cover"
208208
/>
209209
{:else}
210-
<Icon color="gray" icon={item.icon} height={56} />
210+
<Icon color={item.iconColor ?? 'gray'} icon={item.icon} height={56} />
211211
{/if}
212212
</div>
213213
{/if}

src/lib/components/modalFormItem.svelte

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import type { Item } from '$lib/types';
3-
import { Button, Helper, Input, Label, Modal } from 'flowbite-svelte';
3+
import { Button, ButtonGroup, Helper, Input, InputAddon, Label, Modal } from 'flowbite-svelte';
44
import { slide } from 'svelte/transition';
55
66
const {
@@ -33,17 +33,29 @@
3333
placeholder="Description"
3434
/>
3535
</Label>
36-
<Label class="space-y-2">
37-
<span>Icon</span>
38-
<Input bind:value={form.icon} type="text" name="icon" placeholder="URL or Icon name" />
36+
<div>
37+
<Label for="input-addon" class="mb-2">Icon</Label>
38+
<ButtonGroup class="inline-flex w-full items-stretch">
39+
<Input bind:value={form.icon} type="text" name="icon" placeholder="URL or Icon name" />
40+
<span class="color-picker">
41+
<Input
42+
bind:value={form.iconColor}
43+
defaultValue="#808080"
44+
class="h-full w-20 !rounded-tl-none !rounded-bl-none border-l-0"
45+
type="color"
46+
name="iconColor"
47+
placeholder="URL or Icon name"
48+
/>
49+
</span>
50+
</ButtonGroup>
3951
<Helper class="text-sm">
4052
URL or Icon name from <a
4153
target="_blank"
4254
href="https://icon-sets.iconify.design/"
4355
class="text-primary-600 dark:text-primary-500 font-medium hover:underline">iconify</a
44-
>.
56+
>. The color is applied only to the icon from the iconify.
4557
</Helper>
46-
</Label>
58+
</div>
4759
<Label class="space-y-2">
4860
<span>Url</span>
4961
<Input bind:value={form.url} type="text" name="url" placeholder="Url" required />

src/lib/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface Item {
99
title: string;
1010
description?: string;
1111
icon?: string;
12+
iconColor?: string;
1213
url: string;
1314
}
1415

src/routes/+page.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
i.description = item.description;
102102
i.url = item.url;
103103
i.icon = item.icon;
104+
i.iconColor = item.iconColor;
104105
} else {
105106
group?.items.push(item);
106107
}

0 commit comments

Comments
 (0)