github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-05-07 12:37:14 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

[PR #2265] [CLOSED] feat: migrate from FontAwesome to Phosphor Icons #5564

New Issue
Closed
opened 2026-04-16 13:42:35 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-16 13:42:35 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2265
Author: @kolaente
Created: 2/19/2026
Status: ❌ Closed

Base: main ← Head: feat-phosphor-icons

📝 Commits (10+)

  • 8f468fa chore: swap FontAwesome for Phosphor Icons dependency
  • 70ada1d refactor: remove FontAwesome infrastructure and global Icon component
  • 820ba34 refactor: replace icon props with #icon slots in wrapper components
  • d0f18ff refactor: use Phosphor components in Subscription.vue
  • b963179 feat: migrate editor components from FontAwesome to Phosphor Icons
  • 288631f feat: migrate home/navigation components from FontAwesome to Phosphor Icons
  • 6ec5037 feat: migrate task partial components from FontAwesome to Phosphor Icons
  • 2083b2b feat: migrate task, project, and input components from FontAwesome to Phosphor Icons
  • b7d8f32 feat: migrate misc, sharing, notification, and date components from FontAwesome to Phosphor Icons
  • 75100df feat: migrate view pages from FontAwesome to Phosphor Icons

📊 Changes

73 files changed (+505 additions, -627 deletions)

View changed files

📝 frontend/package.json (+1 -4)
📝 frontend/pnpm-lock.yaml (+13 -53)
📝 frontend/src/components/date/DatepickerWithRange.vue (+7 -4)
📝 frontend/src/components/date/DatepickerWithValues.vue (+4 -2)
📝 frontend/src/components/home/AddToHomeScreen.vue (+3 -5)
📝 frontend/src/components/home/AppHeader.vue (+4 -6)
📝 frontend/src/components/home/ContentAuth.vue (+3 -2)
📝 frontend/src/components/home/DemoMode.vue (+2 -1)
📝 frontend/src/components/home/Navigation.vue (+7 -5)
📝 frontend/src/components/home/ProjectsNavigationItem.vue (+6 -11)
📝 frontend/src/components/input/Button.vue (+7 -15)
📝 frontend/src/components/input/DatepickerInline.vue (+7 -6)
📝 frontend/src/components/input/Multiselect.vue (+2 -1)
📝 frontend/src/components/input/Password.vue (+2 -1)
📝 frontend/src/components/input/Reactions.vue (+2 -1)
📝 frontend/src/components/input/editor/CommandsList.vue (+3 -3)
📝 frontend/src/components/input/editor/EditorToolbar.vue (+26 -19)
📝 frontend/src/components/input/editor/TipTap.vue (+8 -6)
📝 frontend/src/components/input/editor/suggestion.ts (+15 -11)
📝 frontend/src/components/misc/Card.vue (+2 -1)

...and 53 more files

📄 Description

Summary

  • Replaces all FontAwesome icons with Phosphor Icons across the entire frontend (73 files changed, net line reduction)
  • Removes @fortawesome/fontawesome-svg-core, @fortawesome/free-regular-svg-icons, @fortawesome/free-solid-svg-icons, and @fortawesome/vue-fontawesome dependencies
  • Adds @phosphor-icons/vue as the sole icon library
  • Removes the global Icon component registration, Icon.ts, and vue-fontawesome.ts infrastructure files
  • Refactors wrapper components (XButton, DropdownItem, CreateEdit, Dropdown) to use #icon named slots instead of icon string props
  • All icon imports are direct named imports from @phosphor-icons/vue for optimal tree-shaking

Migration patterns

Before (FontAwesome) After (Phosphor)
<Icon icon="plus" /> <PhPlus />
<Icon :icon="['far', 'calendar-alt']" /> <PhCalendarBlank />
<XButton icon="plus">Create</XButton> <XButton><template #icon><PhPlus /></template>Create</XButton>
<XButton :icon="isFavorite ? 'star' : ['far','star']"> <XButton><template #icon><PhStar :weight="isFavorite ? 'fill' : 'regular'" /></template></XButton>
primary-icon="" on CreateEdit :show-primary-icon="false"
primary-icon="paste" on CreateEdit <template #primary-icon><PhClipboard /></template>

Test plan

  • Visually verify all icons render correctly across the app
  • Check icon states: favorite star fill/regular toggle, bell/bell-slash subscription toggle, eye/eye-slash password toggle
  • Verify editor toolbar icons in the rich text editor
  • Verify dropdown trigger icons (three dots menu)
  • Check navigation sidebar icons (projects, filters, favorites)
  • Verify task detail view icons (all action buttons, labels, priority, etc.)
  • Confirm no FontAwesome references remain in the bundle
  • Check bundle size improvement from tree-shaking

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/2265 **Author:** [@kolaente](https://github.com/kolaente) **Created:** 2/19/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feat-phosphor-icons` --- ### 📝 Commits (10+) - [`8f468fa`](https://github.com/go-vikunja/vikunja/commit/8f468fa6f42d599278a1f2f6485b4524083baaa3) chore: swap FontAwesome for Phosphor Icons dependency - [`70ada1d`](https://github.com/go-vikunja/vikunja/commit/70ada1d20b5f0b49e4cf58b4ad7a8737d63e6212) refactor: remove FontAwesome infrastructure and global Icon component - [`820ba34`](https://github.com/go-vikunja/vikunja/commit/820ba348bb9242f0591ae13f306619d3a3a7cc40) refactor: replace icon props with #icon slots in wrapper components - [`d0f18ff`](https://github.com/go-vikunja/vikunja/commit/d0f18ffdfc7012450ef2cf266c2b93cd99896f8e) refactor: use Phosphor components in Subscription.vue - [`b963179`](https://github.com/go-vikunja/vikunja/commit/b9631794ee37f449d3975c391b0a047ea6688357) feat: migrate editor components from FontAwesome to Phosphor Icons - [`288631f`](https://github.com/go-vikunja/vikunja/commit/288631f08c5dd1978405de00e4589084b1c115a2) feat: migrate home/navigation components from FontAwesome to Phosphor Icons - [`6ec5037`](https://github.com/go-vikunja/vikunja/commit/6ec5037584a72824536b1dfed863cbd96c97d497) feat: migrate task partial components from FontAwesome to Phosphor Icons - [`2083b2b`](https://github.com/go-vikunja/vikunja/commit/2083b2bd2cb634f1c6ec76635bc4c598c9ae0ee1) feat: migrate task, project, and input components from FontAwesome to Phosphor Icons - [`b7d8f32`](https://github.com/go-vikunja/vikunja/commit/b7d8f326590bf9aa0e386f0b9557328cc7951822) feat: migrate misc, sharing, notification, and date components from FontAwesome to Phosphor Icons - [`75100df`](https://github.com/go-vikunja/vikunja/commit/75100df67476272e4142673f2cc94ccbe74ca1dc) feat: migrate view pages from FontAwesome to Phosphor Icons ### 📊 Changes **73 files changed** (+505 additions, -627 deletions) <details> <summary>View changed files</summary> 📝 `frontend/package.json` (+1 -4) 📝 `frontend/pnpm-lock.yaml` (+13 -53) 📝 `frontend/src/components/date/DatepickerWithRange.vue` (+7 -4) 📝 `frontend/src/components/date/DatepickerWithValues.vue` (+4 -2) 📝 `frontend/src/components/home/AddToHomeScreen.vue` (+3 -5) 📝 `frontend/src/components/home/AppHeader.vue` (+4 -6) 📝 `frontend/src/components/home/ContentAuth.vue` (+3 -2) 📝 `frontend/src/components/home/DemoMode.vue` (+2 -1) 📝 `frontend/src/components/home/Navigation.vue` (+7 -5) 📝 `frontend/src/components/home/ProjectsNavigationItem.vue` (+6 -11) 📝 `frontend/src/components/input/Button.vue` (+7 -15) 📝 `frontend/src/components/input/DatepickerInline.vue` (+7 -6) 📝 `frontend/src/components/input/Multiselect.vue` (+2 -1) 📝 `frontend/src/components/input/Password.vue` (+2 -1) 📝 `frontend/src/components/input/Reactions.vue` (+2 -1) 📝 `frontend/src/components/input/editor/CommandsList.vue` (+3 -3) 📝 `frontend/src/components/input/editor/EditorToolbar.vue` (+26 -19) 📝 `frontend/src/components/input/editor/TipTap.vue` (+8 -6) 📝 `frontend/src/components/input/editor/suggestion.ts` (+15 -11) 📝 `frontend/src/components/misc/Card.vue` (+2 -1) _...and 53 more files_ </details> ### 📄 Description ## Summary - Replaces all FontAwesome icons with [Phosphor Icons](https://phosphoricons.com/) across the entire frontend (73 files changed, net line reduction) - Removes `@fortawesome/fontawesome-svg-core`, `@fortawesome/free-regular-svg-icons`, `@fortawesome/free-solid-svg-icons`, and `@fortawesome/vue-fontawesome` dependencies - Adds `@phosphor-icons/vue` as the sole icon library - Removes the global `Icon` component registration, `Icon.ts`, and `vue-fontawesome.ts` infrastructure files - Refactors wrapper components (`XButton`, `DropdownItem`, `CreateEdit`, `Dropdown`) to use `#icon` named slots instead of `icon` string props - All icon imports are direct named imports from `@phosphor-icons/vue` for optimal tree-shaking ## Migration patterns | Before (FontAwesome) | After (Phosphor) | |---|---| | `<Icon icon="plus" />` | `<PhPlus />` | | `<Icon :icon="['far', 'calendar-alt']" />` | `<PhCalendarBlank />` | | `<XButton icon="plus">Create</XButton>` | `<XButton><template #icon><PhPlus /></template>Create</XButton>` | | `<XButton :icon="isFavorite ? 'star' : ['far','star']">` | `<XButton><template #icon><PhStar :weight="isFavorite ? 'fill' : 'regular'" /></template></XButton>` | | `primary-icon=""` on CreateEdit | `:show-primary-icon="false"` | | `primary-icon="paste"` on CreateEdit | `<template #primary-icon><PhClipboard /></template>` | ## Test plan - [ ] Visually verify all icons render correctly across the app - [ ] Check icon states: favorite star fill/regular toggle, bell/bell-slash subscription toggle, eye/eye-slash password toggle - [ ] Verify editor toolbar icons in the rich text editor - [ ] Verify dropdown trigger icons (three dots menu) - [ ] Check navigation sidebar icons (projects, filters, favorites) - [ ] Verify task detail view icons (all action buttons, labels, priority, etc.) - [ ] Confirm no FontAwesome references remain in the bundle - [ ] Check bundle size improvement from tree-shaking --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-16 13:42:35 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#5564
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?