Skip to content

feat: replace FontAwesome with Lucide icons #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tarunsinghofficial wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

feat: replace FontAwesome with Lucide icons #589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
69e8387
chore: swap FontAwesome for Lucide packages
tarunsinghofficial Aug 8, 2026
d0a732d
feat: use Lucide icons and remove FontAwesome icons from whole app
tarunsinghofficial Aug 10, 2026
b541959
feat: remove FA chevronup direction icon and inline SVG
tarunsinghofficial Aug 13, 2026
6acbd5d
chore: merge develop and migrate SurveyBanner, TripPlan to Lucide
tarunsinghofficial Aug 13, 2026
77b68b1
fix: prettier formatting and add rotate-rtl to directional icons
tarunsinghofficial Aug 13, 2026
cb67aa4
fix: restore direction caret box size and unify recents icon
tarunsinghofficial Aug 15, 2026
c3ac90c
fix: bump svelte to 5.16.0 so Lucide array class prop renders correctly
tarunsinghofficial Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ When writing tests, the setup file already mocks `$env/static/public`, `$env/sta
## Styling

- Tailwind CSS with Flowbite components
- FontAwesome icons via `@fortawesome/svelte-fontawesome`
- Lucide icons via `@lucide/svelte`
- Brand colors configurable via `COLOR_*` env vars (processed at build time)
- Dark mode support via theme system

Expand Down
129 changes: 40 additions & 89 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 3 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@
"validate-env": "node scripts/validate-env.js"
},
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/svelte-fontawesome": "^0.2.2",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^5.2.9",
"@sveltejs/kit": "^2.5.27",
Expand All @@ -38,29 +35,29 @@
"eslint-plugin-svelte": "^2.45.1",
"flowbite": "^2.5.2",
"flowbite-svelte": "^0.47.2",
"flowbite-svelte-icons": "^1.6.2",
"globals": "^15.0.0",
"jsdom": "^26.0.0",
"msw": "^2.10.2",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6",
"prettier-plugin-tailwindcss": "^0.6.4",
"svelte": "^5.0.0",
"svelte": "^5.16.0",
"tailwindcss": "^3.4.4",
"vite": "^5.4.4",
"vitest": "^2.1.8"
},
"type": "module",
"dependencies": {
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@googlemaps/js-api-loader": "^1.16.8",
"@lucide/svelte": "^1.30.0",

@aaronbrethorst aaronbrethorst Sep 2, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dropping @fortawesome/* here is now a build break against current develop, because #585 landed after this branch was last pushed and brought six new files that import it:

src/components/favorites/FavoriteToggle.svelte
src/components/favorites/FavoritesFloatingControl.svelte
src/components/favorites/FavoritesList.svelte
src/components/favorites/__tests__/FavoriteToggle.test.js
src/components/favorites/__tests__/FavoritesFloatingControl.test.js
src/components/favorites/__tests__/FavoritesList.test.js

That's my fault for merging #585 first without waiting on your answer about ordering. Merge develop in and convert those six the same way as the other 35 — the components want Lucide's Star (it takes fill the same way, so the filled/unfilled toggle carries over), and the tests should slot into the LucideStub.svelte mock you already built.

"@maplibre/maplibre-gl-leaflet": "^0.0.22",
"@tailwindcss/forms": "^0.5.9",
"dotenv": "^16.4.7",
"gtfs-realtime-bindings": "^1.1.1",
"leaflet": "^1.9.4",
"leaflet-polylinedecorator": "^1.6.0",
"lucide": "^1.30.0",
"onebusaway-sdk": "^1.6.0",
"polyline-encoded": "^0.0.9",
"prom-client": "^15.1.3",
Expand Down
12 changes: 6 additions & 6 deletions src/components/ArrivalDeparture.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import { t } from 'svelte-i18n';
import { msToLocalArrivalDepartureTimeString } from '$lib/dateTimeFormat';
import RouteBadge from '$components/RouteBadge.svelte';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import { faClock, faRss } from '@fortawesome/free-solid-svg-icons';
import { Clock, Rss } from '@lucide/svelte';
let {
arrivalDeparture,
includeArrivalDepartureInStatusLabel = true,
Expand Down Expand Up @@ -248,10 +247,11 @@
<div class="flex shrink-0 flex-col items-center gap-1">
<div class="flex items-start gap-0.5">
<span class="text-xl font-bold leading-none {arrivalInfo.color}">{arrivalInfo.timeText}</span>
<FontAwesomeIcon
icon={arrivalInfo.isPredicted ? faRss : faClock}
class="text-xs {arrivalInfo.color}"
/>
{#if arrivalInfo.isPredicted}
<Rss class="h-3 w-3 {arrivalInfo.color}" />
{:else}
<Clock class="h-3 w-3 {arrivalInfo.color}" />
{/if}
</div>
<!-- Expand/collapse chevron, stacked under the ETA (AccordionItem's own
chevron is hidden via hideChevron). -->
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/ArrivalDeparture.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ describe('ArrivalDeparture', () => {
});

test('renders its own chevron that rotates only when expanded', async () => {
// the chevron is the plain svg with `transition-transform` (not a FontAwesome icon)
// the chevron is the plain svg with `transition-transform` (not the status icon)
const chevronOf = (container) =>
[...container.querySelectorAll('svg')].find((s) =>
s.getAttribute('class')?.includes('transition-transform')
Expand Down
Loading
Loading