Skip to content

Commit 8cc7a09

Browse files
sean-zlaitechniq
sean-zlai
and
techniq
authored
Replace svelte-hero-icons and @zipline-ai/icons with unplugin-icons (#133)
## Summary Replace `svelte-hero-icons` and `@zipline-ai/icons` with `unplugin-icons` which improve: - Simplifies using other icon sets (ex. Lucide) - Simplifies adding custom icons (see: [vite.confg.ts](https://github.com/zipline-ai/chronon/pull/133/files#diff-97c6e2c429ec483132c584137a18a1ade2ff6c3f4f6485f4a83db604d0323d7cR11-R17) - Is well maintained - [unplugin-icons](https://www.npmjs.com/package/svelte-hero-icons) last released 2 days ago - [svelte-hero-icons](https://www.npmjs.com/package/svelte-hero-icons) last released 5 months ago) - Used by many frameworks using Vite including Svelte, Vue, and React. - Installing the `vscode-iconify` [plugin](https://github.com/antfu/vscode-iconify) makes the experience 1000% better. Also browsing iconsets using [icones.js.org](https://icones.js.org/collection/heroicons) which have quick copy/paste for "Unplugin Icons". Before | After --- | --- ![image](https://github.com/user-attachments/assets/cd37165c-ea91-410c-9802-8bfbd8aa0e97) | ![image](https://github.com/user-attachments/assets/cc9ff123-173d-41ed-bfc8-a4e5fec82347) ## Checklist - [ ] Added Unit Tests - [ ] Covered by existing CI - [ ] Integration tested - [ ] Documentation update <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced new icon packages for enhanced visual elements in the application. - **Improvements** - Updated multiple components to utilize new icon imports, streamlining icon rendering and improving maintainability. - **Bug Fixes** - Removed outdated icon dependencies to prevent potential conflicts and ensure compatibility with new imports. - **Documentation** - Added type exports from the new icon plugin for better type accessibility across the application. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- av pr metadata This information is embedded by the av CLI when creating PRs to track the status of stacks when using Aviator. Please do not delete or edit this section of the PR. ``` {"parent":"main","parentHead":"","trunk":"main"} ``` --> --------- Co-authored-by: Sean Lynch <[email protected]>
1 parent 5ecda19 commit 8cc7a09

File tree

18 files changed

+321
-104
lines changed

18 files changed

+321
-104
lines changed

‎frontend/package-lock.json

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

‎frontend/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"test:unit:once": "vitest --run"
2121
},
2222
"devDependencies": {
23+
"@iconify-json/heroicons": "^1.2.2",
2324
"@internationalized/date": "^3.5.6",
2425
"@playwright/test": "^1.28.1",
2526
"@sveltejs/adapter-auto": "^3.0.0",
@@ -44,12 +45,12 @@
4445
"prettier-plugin-svelte": "^3.1.2",
4546
"svelte": "^5.0.4",
4647
"svelte-check": "^4.0.0",
47-
"svelte-hero-icons": "^5.2.0",
4848
"svelte-intersection-observer": "^1.0.0",
4949
"svelte-radix": "^1.1.1",
5050
"tailwindcss": "^3.4.13",
5151
"typescript": "^5.0.0",
5252
"typescript-eslint": "^8.0.0",
53+
"unplugin-icons": "^0.22.0",
5354
"vite": "^5.0.3",
5455
"vitest": "^2.0.0"
5556
},
@@ -59,7 +60,6 @@
5960
"@creditkarma/thrift-typescript": "^3.7.6",
6061
"@types/echarts": "^4.9.22",
6162
"@types/thrift": "^0.10.17",
62-
"@zipline-ai/icons": "^1.0.2",
6363
"clsx": "^2.1.1",
6464
"d3": "^7.9.0",
6565
"dotenv": "^16.4.5",

‎frontend/src/app.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
export * from 'unplugin-icons/types/svelte';
2+
13
// See https://kit.svelte.dev/docs/types#app
24
// for information about these interfaces
35
declare global {

‎frontend/src/lib/components/ActionButtons/ActionButtons.svelte

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<script lang="ts">
22
import { Button } from '$lib/components/ui/button';
33
import { cn } from '$lib/utils';
4-
import { Icon, Plus, ArrowsUpDown, Square3Stack3d, XMark } from 'svelte-hero-icons';
4+
5+
import IconArrowsUpDown from '~icons/heroicons/arrows-up-down-16-solid';
6+
import IconPlus from '~icons/heroicons/plus-16-solid';
7+
import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
8+
import IconXMark from '~icons/heroicons/x-mark-16-solid';
9+
510
import { goto } from '$app/navigation';
611
import { page } from '$app/stores';
712
import {
@@ -41,14 +46,14 @@
4146
{#if activeCluster}
4247
<div class="flex flex-wrap gap-[1px]">
4348
<Button variant="secondaryAlt" size="sm" icon="leading" disabled>
44-
<Icon src={Square3Stack3d} micro size="16" />
49+
<IconSquare3Stack3d />
4550
Cluster by
4651
</Button>
4752
<Button variant="secondaryAlt" size="sm" disabled>
4853
{activeCluster}
4954
</Button>
5055
<Button variant="secondaryAlt" size="sm" class="p-2" disabled>
51-
<Icon src={XMark} micro size="16" />
56+
<IconXMark />
5257
</Button>
5358
</div>
5459
{/if}
@@ -57,17 +62,17 @@
5762
<div class="flex gap-3">
5863
{#if showSort}
5964
<Button variant="secondary" size="sm" icon="leading" on:click={handleSort}>
60-
<Icon src={ArrowsUpDown} micro size="16" />
65+
<IconArrowsUpDown />
6166
Sort {currentSort === 'asc' ? 'A-Z' : 'Z-A'}
6267
</Button>
6368
{/if}
6469
<Button variant="secondary" size="sm" icon="leading" disabled>
65-
<Icon src={Plus} micro size="16" />
70+
<IconPlus />
6671
Filter
6772
</Button>
6873
{#if showCluster}
6974
<Button variant="secondary" size="sm" icon="leading" disabled>
70-
<Icon src={Square3Stack3d} micro size="16" />
75+
<IconSquare3Stack3d />
7176
Cluster
7277
</Button>
7378
{/if}

‎frontend/src/lib/components/BreadcrumbNav/BreadcrumbNav.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
} from '$lib/components/ui/breadcrumb';
99
import BreadcrumbList from '$lib/components/ui/breadcrumb/breadcrumb-list.svelte';
1010
import { cn } from '$lib/utils';
11-
import { Icon, Slash } from 'svelte-hero-icons';
11+
import IconSlash from '~icons/heroicons/slash';
1212
1313
const { breadcrumbs, class: className }: { breadcrumbs: string[]; class?: string } = $props();
1414
</script>
@@ -20,7 +20,7 @@
2020
</BreadcrumbItem>
2121
{#each breadcrumbs as crumb, index}
2222
<BreadcrumbSeparator>
23-
<Icon src={Slash} />
23+
<IconSlash />
2424
</BreadcrumbSeparator>
2525
<BreadcrumbItem>
2626
{#if index === breadcrumbs.length - 1}

‎frontend/src/lib/components/CollapsibleSection/CollapsibleSection.svelte

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
CollapsibleTrigger
66
} from '$lib/components/ui/collapsible';
77
import type { Snippet } from 'svelte';
8-
import { Icon, ChevronDown } from 'svelte-hero-icons';
8+
import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
9+
910
let {
1011
collapsibleContent,
1112
headerContentLeft,
@@ -41,11 +42,8 @@
4142
<Collapsible bind:open class={sizeClasses.wrapper}>
4243
<div class="flex mb-3">
4344
<CollapsibleTrigger class="flex items-center space-x-4">
44-
<Icon
45-
src={ChevronDown}
46-
micro
47-
size="16"
48-
class="transition-transform duration-200 {open ? '' : 'rotate-180'}"
45+
<IconChevronDown
46+
class="size-4 transition-transform duration-200 {open ? '' : 'rotate-180'}"
4947
/>
5048
<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>
5149
</CollapsibleTrigger>

‎frontend/src/lib/components/CustomEChartLegend/CustomEChartLegend.svelte

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script lang="ts">
22
import { Button } from '$lib/components/ui/button';
33
import type { EChartsType } from 'echarts';
4-
import { Icon, ChevronDown, ChevronUp } from 'svelte-hero-icons';
4+
import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
5+
56
import { getSeriesColor, handleChartHighlight } from '$lib/util/chart';
7+
import { cn } from '$lib/utils';
68
79
type LegendItem = { feature: string };
810
type Props = {
@@ -118,7 +120,9 @@
118120
<div class="transition-opacity duration-150 absolute" class:opacity-0={!isExpanded}>
119121
collapse
120122
</div>
121-
<Icon src={isExpanded ? ChevronUp : ChevronDown} micro size="16" class="ml-2" />
123+
<IconChevronDown
124+
class={cn('ml-2 transition-transform duration-200', isExpanded && '-rotate-180')}
125+
/>
122126
</Button>
123127
{/if}
124128
</div>

‎frontend/src/lib/components/DateRangeSelector/DateRangeSelector.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
} from '$lib/constants/date-ranges';
1111
import { Button } from '$lib/components/ui/button';
1212
import { Popover, PopoverContent, PopoverTrigger } from '$lib/components/ui/popover';
13-
import { Icon, CalendarDateRange } from 'svelte-hero-icons';
13+
import IconCalendarDateRange from '~icons/heroicons/calendar-date-range-16-solid';
1414
import type { DateRange } from 'bits-ui';
1515
import { DateFormatter, getLocalTimeZone, fromAbsolute } from '@internationalized/date';
1616
import { cn } from '$lib/utils';
@@ -131,7 +131,7 @@
131131
)}
132132
builders={[builder]}
133133
>
134-
<Icon src={CalendarDateRange} micro size="16" />
134+
<IconCalendarDateRange />
135135
</Button>
136136
</PopoverTrigger>
137137
<PopoverContent class="w-auto p-0" align="start">

‎frontend/src/lib/components/InfoTooltip/InfoTooltip.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts">
22
import { Tooltip, TooltipContent, TooltipTrigger } from '$lib/components/ui/tooltip';
3-
import { Icon, InformationCircle } from 'svelte-hero-icons';
3+
import IconInformationCircle from '~icons/heroicons/information-circle-16-solid';
44
55
let { text, maxWidth = '321px' }: { text: string; maxWidth?: string } = $props();
66
</script>
77

88
<Tooltip openDelay={100} closeOnPointerDown={false}>
99
<TooltipTrigger>
10-
<Icon src={InformationCircle} micro size="16" class="text-muted-icon-neutral" />
10+
<IconInformationCircle class="text-muted-icon-neutral" />
1111
</TooltipTrigger>
1212
<TooltipContent side="bottom" align="start" style="max-width: {maxWidth};">
1313
<p style="max-width: {maxWidth};">

‎frontend/src/lib/components/NavigationBar/NavigationBar.svelte

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,19 @@
2020
DropdownMenuContent,
2121
DropdownMenuItem
2222
} from '$lib/components/ui/dropdown-menu/';
23-
import {
24-
Icon,
25-
ChevronDown,
26-
MagnifyingGlass,
27-
User,
28-
DocumentText,
29-
ExclamationTriangle,
30-
AdjustmentsHorizontal,
31-
ArrowsUpDown
32-
} from 'svelte-hero-icons';
3323
import { goto } from '$app/navigation';
3424
import { isMacOS } from '$lib/util/browser';
3525
import { Badge } from '$lib/components/ui/badge';
3626
import { getEntity, type Entity } from '$lib/types/Entity/Entity';
3727
28+
import IconArrowsUpDown from '~icons/heroicons/arrows-up-down-16-solid';
29+
import IconAdjustmentsHorizontal from '~icons/heroicons/adjustments-horizontal-16-solid';
30+
import IconChevronDown from '~icons/heroicons/chevron-down';
31+
import IconDocumentText from '~icons/heroicons/document-text-16-solid';
32+
import IconExclamationTriangle from '~icons/heroicons/exclamation-triangle-16-solid';
33+
import IconMagnifyingGlass from '~icons/heroicons/magnifying-glass-16-solid';
34+
import IconUser from '~icons/heroicons/user';
35+
3836
type Props = {
3937
navItems: Entity[];
4038
user: { name: string; avatar: string };
@@ -101,7 +99,7 @@
10199
onclick={() => (open = true)}
102100
icon="leading"
103101
>
104-
<Icon src={MagnifyingGlass} micro size="16" class="text-foreground" />
102+
<IconMagnifyingGlass class="text-foreground" />
105103
<span class="text-muted-foreground">Search</span>
106104
{#if isMac !== undefined}
107105
<span class="ml-auto text-xs text-muted-foreground">
@@ -124,7 +122,7 @@
124122
rel="noopener noreferrer"
125123
icon="leading"
126124
>
127-
<Icon src={DocumentText} micro size="16" class="text-muted-icon-neutral" />
125+
<IconDocumentText class="text-muted-icon-neutral" />
128126
<span class="text-muted-foreground">Chronon docs</span>
129127
</Button>
130128
<span class="mb-[10px] px-2 text-xs-medium text-muted-foreground">Observability</span>
@@ -137,10 +135,7 @@
137135
href={item.path}
138136
icon="leading"
139137
>
140-
<Icon
141-
src={item.icon}
142-
micro
143-
size="16"
138+
<item.icon
144139
class={isActiveRoute(item.path) ? 'text-muted-icon-primary' : 'text-muted-icon-neutral'}
145140
/>
146141
{item.label}
@@ -155,11 +150,11 @@
155150
<Avatar class="h-4 w-4">
156151
<AvatarImage src={user.avatar} alt={user.name} />
157152
<AvatarFallback>
158-
<Icon src={User} />
153+
<IconUser />
159154
</AvatarFallback>
160155
</Avatar>
161156
<span class="ml-3">{user.name}</span>
162-
<Icon src={ChevronDown} size="16" class="ml-3" />
157+
<IconChevronDown class="ml-3" />
163158
</Button>
164159
</DropdownMenuTrigger>
165160
<DropdownMenuContent>
@@ -182,21 +177,21 @@
182177
{#if input === ''}
183178
<CommandGroup heading="Quick actions">
184179
<CommandItem disabled>
185-
<Icon src={ExclamationTriangle} micro size="16" />
180+
<IconExclamationTriangle />
186181
Show only models with alerts</CommandItem
187182
>
188183
<CommandItem disabled>
189-
<Icon src={AdjustmentsHorizontal} micro size="16" />
184+
<IconAdjustmentsHorizontal />
190185
Filter by...</CommandItem
191186
>
192187
<CommandItem disabled>
193-
<Icon src={ArrowsUpDown} micro size="16" />
188+
<IconArrowsUpDown />
194189
Sort by...</CommandItem
195190
>
196191
</CommandGroup>
197192
<CommandGroup heading="Learn">
198193
<CommandItem onSelect={() => window.open('https://docs.chronon.ai', '_blank')}>
199-
<Icon src={DocumentText} micro size="16" />
194+
<IconDocumentText />
200195
Chronon docs</CommandItem
201196
>
202197
</CommandGroup>
@@ -210,8 +205,8 @@
210205
onSelect={() =>
211206
handleSelect(`${getEntity('joins').path}/${encodeURIComponent(entity.name)}`)}
212207
>
213-
<Icon src={getEntity('joins').icon} micro size="16" />
214-
{entity.name}
208+
{@const IconJoins = getEntity('joins').icon}
209+
<IconJoins />
215210
</CommandItem>
216211
{/each}
217212
</CommandGroup>

‎frontend/src/lib/components/PageHeader/PageHeader.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import type { Snippet } from 'svelte';
33
import Button from '$lib/components/ui/button/button.svelte';
4-
import { Icon, BookOpen } from 'svelte-hero-icons';
4+
import IconBookOpen from '~icons/heroicons/book-open-16-solid';
55
66
let { title, children }: { title: string; children?: Snippet } = $props();
77
@@ -17,7 +17,7 @@
1717
{@render children()}
1818
{/if}
1919
<Button variant="outline" onclick={openChronon} icon="leading" size="sm">
20-
<Icon src={BookOpen} micro size="16" class="text-neutral-800" />
20+
<IconBookOpen class="text-neutral-800" />
2121
<span class="text-neutral-800">Learn</span>
2222
</Button>
2323
</div>

‎frontend/src/lib/components/ResetZoomButton/ResetZoomButton.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
22
import { Button } from '$lib/components/ui/button';
33
import { cn } from '$lib/utils';
4-
import { Icon, ArrowUturnLeft } from 'svelte-hero-icons';
4+
import IconArrowUturnLeft from '~icons/heroicons/arrow-uturn-left-16-solid';
55
66
const { onClick, class: className }: { onClick: () => void; class?: string } = $props();
77
</script>
88

99
<Button on:click={onClick} variant="outline" icon="leading" class={cn('', className)} size="sm">
10-
<Icon src={ArrowUturnLeft} micro size="16" />
10+
<IconArrowUturnLeft />
1111
Reset Zoom
1212
</Button>

‎frontend/src/lib/components/SplitView/SplitView.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 { quintOut } from 'svelte/easing';
3-
import { Icon, XMark } from 'svelte-hero-icons';
3+
import IconXMark from '~icons/heroicons/x-mark';
44
55
import { tweened } from 'svelte/motion';
66
import type { Snippet } from 'svelte';
@@ -59,7 +59,7 @@
5959
class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
6060
onclick={() => (sidebarOpen = false)}
6161
>
62-
<Icon src={XMark} size="16" />
62+
<IconXMark class="text-sm" />
6363
<span class="sr-only">Close</span>
6464
</button>
6565
<div class="overflow-hidden">

‎frontend/src/lib/icons/chart-line.svg

Lines changed: 12 additions & 0 deletions
Loading

‎frontend/src/lib/icons/chart-skew.svg

Lines changed: 5 additions & 0 deletions
Loading

‎frontend/src/lib/types/Entity/Entity.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
import { Cube, PuzzlePiece, Square3Stack3d } from 'svelte-hero-icons';
1+
import IconCube from '~icons/heroicons/cube-16-solid';
2+
import IconPuzzlePiece from '~icons/heroicons/puzzle-piece-16-solid';
3+
import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
24

35
export const entityConfig = [
46
{
57
label: 'Models',
68
path: '/models',
7-
icon: Cube,
9+
icon: IconCube,
810
id: 'models'
911
},
1012
{
1113
label: 'GroupBys',
1214
path: '/groupbys',
13-
icon: PuzzlePiece,
15+
icon: IconPuzzlePiece,
1416
id: 'groupbys'
1517
},
1618
{
1719
label: 'Joins',
1820
path: '/joins',
19-
icon: Square3Stack3d,
21+
icon: IconSquare3Stack3d,
2022
id: 'joins'
2123
}
2224
] as const;

0 commit comments

Comments
 (0)