Skip to content

Commit 8389da2

Browse files
techniqtechniq
authored
Icons overhaul (#616)
* Remove use of `$$props` (class, style) * Fix CI * feat: Support component icons (Unplugin icons, etc) and setup default icons on settings() for easy overriding. Change default to lucide * Remove unneeded @ts-expect-error * Update more locations * Update remaining components * Adjust Checkbox sizes * Update more examples * Update more examples * Update most remaining examples * Use app/state instead of app/store for page * Replace remaining @mdi/js usage and remove package * Cleanup * Fix types * Fix types * Increase the size of icon-only buttons * Update bluesky and discord icons * Switch back to page from `$app/stores` until full Svelte 5 migration occurs
1 parent 23dfd88 commit 8389da2

File tree

123 files changed

+1341
-955
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+1341
-955
lines changed

‎.changeset/common-bushes-move.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': minor
3+
---
4+
5+
feat: Setup default icons on settings() for easy overriding. Change default to lucide (from mdi)

‎.changeset/true-fans-crash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': minor
3+
---
4+
5+
feat: Support component icons (Unplugin icons, etc)

‎packages/svelte-ux/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@
6161
"@layerstack/svelte-table": "1.0.1-next.12",
6262
"@layerstack/tailwind": "2.0.0-next.15",
6363
"@layerstack/utils": "2.0.0-next.12",
64-
"@mdi/js": "^7.4.47",
6564
"d3-array": "^3.2.4",
6665
"d3-scale": "^4.0.2",
6766
"esm-env": "^1.2.2",

‎packages/svelte-ux/src/app.d.ts

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
1-
// export * from 'unplugin-icons/types/svelte';
1+
import 'unplugin-icons/types/svelte';
22

33
// See https://kit.svelte.dev/docs/types#app
44
// for information about these interfaces
55
// and what to do when importing types
6-
declare namespace App {
7-
// interface Error {}
8-
// interface Locals {}
9-
10-
interface PageData {
11-
meta: {
12-
title?: string;
13-
description?: string;
14-
source?: string;
15-
pageSource?: string;
16-
api?: SveldJson;
17-
features?: string[];
18-
related?: string[];
19-
hideUsage?: boolean;
20-
hideTableOfContents?: boolean;
21-
status?: string;
22-
};
6+
declare global {
7+
namespace App {
8+
// interface Error {}
9+
// interface Locals {}
10+
11+
interface PageData {
12+
meta: {
13+
title?: string;
14+
description?: string;
15+
source?: string;
16+
pageSource?: string;
17+
api?: SveldJson;
18+
features?: string[];
19+
related?: string[];
20+
hideUsage?: boolean;
21+
hideTableOfContents?: boolean;
22+
status?: string;
23+
};
24+
}
25+
26+
// interface PageState {}
27+
// interface Platform {}
2328
}
2429

25-
// interface PageState {}
26-
// interface Platform {}
27-
}
28-
29-
// TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things?
30-
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
31-
declare namespace svelteHTML {
32-
interface HTMLAttributes<T> {
33-
// use:intersection
34-
'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
30+
// TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things?
31+
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
32+
namespace svelteHTML {
33+
interface HTMLAttributes<T> {
34+
// use:intersection
35+
'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
3536

36-
// use:mutate
37-
'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
37+
// use:mutate
38+
'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
3839

39-
// use:movable
40-
'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
41-
'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
42-
'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
40+
// use:movable
41+
'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
42+
'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
43+
'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
4344

44-
// use:popover
45-
'on:clickOutside'?: (event: CustomEvent) => void;
45+
// use:popover
46+
'on:clickOutside'?: (event: CustomEvent) => void;
4647

47-
// use:overflow
48-
'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
48+
// use:overflow
49+
'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
4950

50-
// use:longpress
51-
'on:longpress'?: (event: CustomEvent) => void;
51+
// use:longpress
52+
'on:longpress'?: (event: CustomEvent) => void;
53+
}
5254
}
5355
}

‎packages/svelte-ux/src/docs/Blockquote.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import { mdiInformation } from '@mdi/js';
3-
import Icon from '../lib/components/Icon.svelte';
42
import { cls } from '@layerstack/tailwind';
3+
4+
import LucideInfo from '~icons/lucide/info';
55
</script>
66

77
<div
@@ -10,6 +10,6 @@
1010
'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
1111
)}
1212
>
13-
<Icon data={mdiInformation} class="text-primary" />
13+
<LucideInfo class="text-primary" />
1414
<slot />
1515
</div>

‎packages/svelte-ux/src/docs/ViewSourceButton.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 type { ComponentProps } from 'svelte';
3-
import { mdiGithub } from '@mdi/js';
3+
import LucideGithub from '~icons/lucide/github.svelte';
44
55
import Button from '../lib/components/Button.svelte';
66
import Code from '../lib/components/Code.svelte';
@@ -29,7 +29,7 @@
2929
</div>
3030

3131
{#if href}
32-
<Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
32+
<Button icon={LucideGithub} variant="fill-light" color="primary" {href} target="_blank">
3333
View on Github
3434
</Button>
3535
{/if}

‎packages/svelte-ux/src/lib/components/ApiDocs.svelte

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
<script lang="ts">
2-
import {
3-
mdiBullhorn,
4-
mdiCodeBraces,
5-
mdiGoogleCirclesGroup,
6-
mdiInformationOutline,
7-
} from '@mdi/js';
2+
import LucideGroup from '~icons/lucide/group';
3+
import LucideRadio from '~icons/lucide/radio';
84
95
import Button from './Button.svelte';
106
import EmptyMessage from './EmptyMessage.svelte';
117
import Icon from './Icon.svelte';
128
import ListItem from './ListItem.svelte';
139
import Tooltip from './Tooltip.svelte';
10+
import { getSettings } from './settings.js';
1411
1512
export let api: SveldJson;
1613
14+
const { icons } = getSettings();
15+
1716
function parseSlotProps(slot_props: string) {
1817
return slot_props
1918
.slice(1, slot_props.length - 1) // remove '{' and '}'
@@ -32,7 +31,7 @@
3231
{#each api.props ?? [] as prop}
3332
<ListItem
3433
list="type"
35-
icon={mdiCodeBraces}
34+
icon={icons.codeBraces}
3635
avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }}
3736
>
3837
<div slot="title">{prop.name}</div>
@@ -78,7 +77,7 @@
7877

7978
{#if api.rest_props}
8079
<div class="text-surface-content/50 text-xs flex gap-2 mt-2 ml-4 items-center">
81-
<Icon data={mdiInformationOutline} />
80+
<Icon data={icons.info} />
8281
<span>
8382
Remaining props are passed to underlying
8483
{#if api.rest_props.type === 'InlineComponent'}
@@ -116,7 +115,7 @@
116115
{#each api.slots ?? [] as slot}
117116
<ListItem
118117
list="type"
119-
icon={mdiGoogleCirclesGroup}
118+
icon={LucideGroup}
120119
avatar={{ size: 'sm', class: 'text-xs text-white bg-purple-500' }}
121120
>
122121
<div slot="title">
@@ -159,7 +158,7 @@
159158
{#each api.events ?? [] as event}
160159
<ListItem
161160
list="type"
162-
icon={mdiBullhorn}
161+
icon={LucideRadio}
163162
avatar={{ size: 'sm', class: 'text-xs text-white bg-success-500' }}
164163
>
165164
<div slot="title">{event.name}</div>
@@ -196,7 +195,7 @@
196195
{#each api.moduleExports ?? [] as prop}
197196
<ListItem
198197
list="type"
199-
icon={mdiCodeBraces}
198+
icon={icons.codeBraces}
200199
avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }}
201200
>
202201
<div slot="title">{prop.name}</div>

‎packages/svelte-ux/src/lib/components/AppBar.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<script lang="ts">
22
import { BROWSER } from 'esm-env';
3-
import { mdiMenu } from '@mdi/js';
43
import { cls } from '@layerstack/tailwind';
54
65
import Breadcrumb from './Breadcrumb.svelte';
76
import Button from './Button.svelte';
87
import { getComponentClasses } from './theme.js';
98
import { getSettings } from './index.js';
9+
import type { IconProp } from '$lib/types/index.js';
10+
11+
const { showDrawer, icons } = getSettings();
12+
const settingsClasses = getComponentClasses('AppBar');
1013
1114
export let title: string | number | Array<string | number> = '';
12-
export let menuIcon: string | null = mdiMenu;
15+
export let menuIcon: IconProp | null = icons.menu;
1316
let className: string | undefined = undefined;
1417
export { className as class };
1518
@@ -18,9 +21,6 @@
1821
*/
1922
export let head = true;
2023
21-
const { showDrawer } = getSettings();
22-
const settingsClasses = getComponentClasses('AppBar');
23-
2424
$: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString();
2525
2626
$: if (BROWSER && head) {

‎packages/svelte-ux/src/lib/components/AppLayout.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
/** Control whether header should be full width (deafult) or nav should be full height */
1414
export let headerPosition: 'full' | 'inset' = 'full';
1515
16+
let className: string | undefined = undefined;
17+
export { className as class };
18+
1619
export let classes: {
1720
root?: string;
1821
aside?: string;
@@ -39,7 +42,7 @@
3942
'[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
4043
settingsClasses.root,
4144
classes.root,
42-
$$props.class
45+
className
4346
)}
4447
>
4548
<slot />

‎packages/svelte-ux/src/lib/components/Avatar.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
import { cls } from '@layerstack/tailwind';
33
import Icon from './Icon.svelte';
44
import { getComponentClasses } from './theme.js';
5+
import type { IconProp } from '$lib/types/index.js';
56
67
export let size: 'sm' | 'md' | 'lg' | 'unset' = 'md';
7-
export let icon: string | undefined = undefined;
8+
export let icon: IconProp | undefined = undefined;
89
let className: string | undefined = undefined;
910
export { className as class };
1011

0 commit comments

Comments
 (0)