Skip to content

refactor: switch icon library from tabler to phosphor#44

Merged
sjoerdbeentjes merged 1 commit into
mainfrom
refactor/icon-library-phosphor
Jun 23, 2026
Merged

refactor: switch icon library from tabler to phosphor#44
sjoerdbeentjes merged 1 commit into
mainfrom
refactor/icon-library-phosphor

Conversation

@sjoerdbeentjes

Copy link
Copy Markdown
Collaborator

Switches the design system's configured icon set from Tabler to Phosphor across both component packages and the docs.

What changed

React (@surfnet/react)

  • components.jsoniconLibrary: "phosphor"
  • Peer + dev dependency swapped from @tabler/icons-react to @phosphor-icons/react
  • Button stories use Phosphor's *Icon suffix (PlusIcon, ArrowRightIcon)

Angular (@surfnet/angular)

  • Dev dependency @ng-icons/tabler-icons@ng-icons/phosphor-icons
  • Button stories import phosphorPlus / phosphorArrowRight from @ng-icons/phosphor-icons/regular

Docs: README, AGENTS.md, and the add-component skill (react.md + angular.md).

Reviewer notes

  • React naming flips: Tabler prefixes (IconPlus), Phosphor suffixes (PlusIcon). v2 deprecates the bare Plus export.
  • Angular imports by weight: @ng-icons/phosphor-icons's main entry is empty — glyphs live under weight subpaths. /regular is used as the Tabler-equivalent default.
  • Upstream vendored shadcn skill files were left untouched (they reference tabler only as a generic example, and AGENTS.md says not to hand-edit them).
  • No changeset: both touched packages are private and never publish.

pnpm build, pnpm lint, and pnpm format all pass.

Swap the configured icon set in both component packages:
- React: iconLibrary -> "phosphor", peer/dev dep @phosphor-icons/react;
  stories use the *Icon suffix (PlusIcon/ArrowRightIcon).
- Angular: @ng-icons/phosphor-icons; stories import phosphor* glyphs from
  the /regular weight subpath.

Update README, AGENTS.md, and the add-component skill docs to match.
@sjoerdbeentjes sjoerdbeentjes linked an issue Jun 23, 2026 that may be closed by this pull request
@sjoerdbeentjes sjoerdbeentjes requested review from loofpc and oharsta June 23, 2026 08:56
@sjoerdbeentjes sjoerdbeentjes merged commit 3e39022 into main Jun 23, 2026
1 check passed
sjoerdbeentjes added a commit that referenced this pull request Jun 23, 2026
…cons

Follow PR #44: replace all @tabler/icons-react usages in the new components
and their stories with @phosphor-icons/react (`*Icon` suffix). The icon
library config and peer/dev deps already came in via the rebase onto main.
sjoerdbeentjes added a commit that referenced this pull request Jun 24, 2026
…cons

Follow PR #44: replace all @tabler/icons-react usages in the new components
and their stories with @phosphor-icons/react (`*Icon` suffix). The icon
library config and peer/dev deps already came in via the rebase onto main.
sjoerdbeentjes added a commit that referenced this pull request Jun 29, 2026
The vendored components shipped spartan's default @ng-icons/lucide glyphs
while the design system standardized on Phosphor (React migrated in PR #44)
and only the stories used it. Swap every component-side icon to its Phosphor
equivalent (matching React's choices, e.g. CaretUpDown on the select trigger),
promote @ng-icons/phosphor-icons to a runtime dependency, and remove
@ng-icons/lucide from package.json and ng-package.json.
loofpc pushed a commit that referenced this pull request Jun 30, 2026
…cons

Follow PR #44: replace all @tabler/icons-react usages in the new components
and their stories with @phosphor-icons/react (`*Icon` suffix). The icon
library config and peer/dev deps already came in via the rebase onto main.
loofpc pushed a commit that referenced this pull request Jun 30, 2026
The vendored components shipped spartan's default @ng-icons/lucide glyphs
while the design system standardized on Phosphor (React migrated in PR #44)
and only the stories used it. Swap every component-side icon to its Phosphor
equivalent (matching React's choices, e.g. CaretUpDown on the select trigger),
promote @ng-icons/phosphor-icons to a runtime dependency, and remove
@ng-icons/lucide from package.json and ng-package.json.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Icon library veranderen naar 'Phosphor'

2 participants