コンテンツにスキップ
Zenn Dev Snowcait Articles 0e6cf8fd8df648

@tabler/icons-svelte を @tabler/icons-svelte-runes へ移行する

  • URL: https://zenn.dev/snowcait/articles/0e6cf8fd8df648
  • 日付: 2026-06-26
  • Tier: Tier 3
  • 要旨: Svelte 5 の Rune 対応に伴い @tabler/icons-svelte が @tabler/icons-svelte-runes へ改名・TypeScript対応された。移行には npm の再インストールと import パスの変更が必要で、ファイル数が多い場合に備えた移行シェルスクリプトが提供されている。スクリプトは git grep でアイコンをインポートしているファイルを特定し、perl で一括置換する構成になっている。

詳細

@tabler/icons-svelte から @tabler/icons-svelte-runes への移行手順

  • 移行理由: Svelte 5 の Rune 導入に伴うパッケージ名変更、TypeScript 対応が追加された
  • 変更点: import パスを ‘@tabler/icons-svelte’ から ‘@tabler/icons-svelte-runes’ へ変更するだけ(APIは同一)
  • 移行スクリプト(migration.sh)の処理手順:
    1. npm remove @tabler/icons-svelte
    2. npm install @tabler/icons-svelte-runes
    3. git grep -lz で対象ファイルを列挙 → xargs + perl -pi -e で正規表現一括置換
  • 注意点: 実行前に git commit でバックアップ必須。Windows では Git Bash を使用する
  • パフォーマンスや機能面の変化はなし(TypeScript対応のみ)