Replace font-awesome with tabler icons using iconify

Iapetus-11 · Iapetus-11 · commit ec5c97c5bc05 · 2025-11-10T07:46:58.000-05:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -7,9 +7,6 @@ on:
         outputs:
             artifact-name:
                 value: ${{ jobs.build.outputs.artifact-name }}
-        secrets:
-            NPM_FONTAWESOME_TOKEN:
-                required: true
 
 jobs:
     build:
@@ -31,16 +28,7 @@ jobs:
                   cache: npm
 
             - name: Install NPM dependencies
-              # Skip post-install scripts for now to prevent token theft
-              run: |
-                  npm config set '//npm.fontawesome.com/:_authToken' '${NPM_FONTAWESOME_TOKEN}'
-                  npm ci --ignore-scripts
-                  npm config delete '//npm.fontawesome.com/:_authToken'
-              env:
-                  NPM_FONTAWESOME_TOKEN: ${{ secrets.NPM_FONTAWESOME_TOKEN }}
-
-            - name: Run post-install scripts
-              run: npm rebuild
+              run: npm ci
 
             - name: Build project
               run: npm run build
diff --git a/.npmrc b/.npmrc
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,18 +12,12 @@
         "format": "prettier --write . --list-different"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.7.1",
-        "@fortawesome/free-brands-svg-icons": "^6.7.1",
-        "@fortawesome/pro-duotone-svg-icons": "^6.7.1",
-        "@fortawesome/pro-light-svg-icons": "^6.7.1",
-        "@fortawesome/pro-regular-svg-icons": "^6.7.1",
-        "@fortawesome/pro-solid-svg-icons": "^6.7.1",
-        "@fortawesome/pro-thin-svg-icons": "^6.7.1",
-        "@fortawesome/vue-fontawesome": "^3.0.8",
         "vue": "^3.5.22",
         "vue-router": "^4.6.3"
     },
     "devDependencies": {
+        "@iconify-json/tabler": "^1.2.23",
+        "@iconify/tailwind4": "^1.1.0",
         "@tailwindcss/vite": "^4.1.16",
         "@tsconfig/node22": "^22.0.2",
         "@types/node": "^22.18.11",
diff --git a/src/main.css b/src/main.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 
+@plugin "@iconify/tailwind4";
+
 @layer base {
     * {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -69,3 +71,7 @@
     @apply pointer-events-none fixed;
     animation: taco-confetti ease-out 750ms both;
 }
+
+@utility icon-* {
+    @apply block aspect-square;
+}
diff --git a/src/views/about/FaqDisclosure.vue b/src/views/about/FaqDisclosure.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
     import { computed, useId } from 'vue';
-    import { faChevronDown } from '@fortawesome/pro-solid-svg-icons';
-    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
     const props = defineProps<{ title: string; openId: string | undefined }>();
     const emit = defineEmits<{ (evt: 'update:openId', openId: string | undefined): void }>();
@@ -21,14 +19,14 @@
             type="button"
             class="flex w-full items-center justify-between bg-violet-700/90 p-5 text-left text-lg text-gray-100 shadow-md transition hover:bg-violet-700/80 md:text-xl"
         >
-            {{ title }}
+            <span class="mr-4">
+                {{ title }}
+            </span>
 
             <span
-                class="mr-0.5 ml-4 transition-all duration-500"
+                class="icon-[tabler--chevron-down] ml-4 origin-center text-2xl transition-all duration-500"
                 :class="open ? 'rotate-0' : '-rotate-450'"
-            >
-                <FontAwesomeIcon :icon="faChevronDown" class="scale-[80%]" />
-            </span>
+            ></span>
         </button>
 
         <div
diff --git a/src/views/game/panels/PanelSection.vue b/src/views/game/panels/PanelSection.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
     import { onBeforeMount, onUnmounted, ref, watch } from 'vue';
-    import { faChevronRight } from '@fortawesome/pro-solid-svg-icons';
-    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
     import { useTailwindBreakpoint } from '@/utils';
 
     defineProps<{
@@ -56,9 +54,7 @@
                 <p v-if="description" class="text-xs text-gray-50">{{ description }}</p>
             </div>
 
-            <button type="button" class="p-1 lg:hidden">
-                <FontAwesomeIcon :icon="faChevronRight" class="text-gray-200" />
-            </button>
+            <span class="icon-[tabler--chevron-right] ml-2 text-3xl text-gray-200 lg:hidden"></span>
         </div>
 
         <!-- Desktop view content -->
@@ -100,9 +96,11 @@
                 <button
                     @click="mobileTrayOpen = false"
                     type="button"
-                    class="absolute top-1/2 left-0 -translate-y-1/2 rounded-r-full bg-gray-300 py-2 pr-2 pl-1 opacity-75 shadow-sm"
+                    class="absolute top-1/2 left-0 flex -translate-y-1/2 rounded-r-full bg-gray-300 py-2 pr-1.5 pl-0.5 opacity-75 shadow-sm"
                 >
-                    <FontAwesomeIcon :icon="faChevronRight" size="lg" class="text-gray-500" />
+                    <span
+                        class="icon-[tabler--chevron-right] -mr-1.5 -ml-1 text-3xl text-gray-500 lg:hidden"
+                    ></span>
                 </button>
 
                 <div class="h-full w-full min-w-[85vw] overflow-y-auto pb-24">
diff --git a/src/views/game/panels/achievements/AchievementsPanel.vue b/src/views/game/panels/achievements/AchievementsPanel.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
     import { ACHIEVEMENTS, type GameState } from '@/game';
     import { computed } from 'vue';
-    import { faCheck } from '@fortawesome/pro-solid-svg-icons';
-    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
     import PanelSection from '../PanelSection.vue';
 
     const props = defineProps<{ state: GameState }>();
@@ -36,12 +34,10 @@
                     :class="{ 'text-gray-600/50': !unlockedAchievements.has(achievementName) }"
                 >
                     <span>{{ achievementName }}</span>
-                    <FontAwesomeIcon
+                    <span
                         v-if="unlockedAchievements.has(achievementName)"
-                        :icon="faCheck"
-                        size="lg"
-                        class="-mt-0.5 ml-1.5 text-purple-600"
-                    />
+                        class="icon-[tabler--check] -mt-0.5 ml-1 text-xl text-purple-600"
+                    ></span>
                 </span>
                 <p
                     class="text-xs text-gray-500"
diff --git a/src/views/game/panels/skins/SkinsPanel.vue b/src/views/game/panels/skins/SkinsPanel.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
     import { type GameState, type SkinDefinition, SKINS } from '@/game';
-    import { faCheck } from '@fortawesome/pro-solid-svg-icons';
-    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
     import NotEnoughTacosForSkinModal from '@/views/game/panels/skins/NotEnoughTacosForSkinModal.vue';
     import PanelSection from '@/views/game/panels/PanelSection.vue';
     import { ref } from 'vue';
@@ -73,13 +71,11 @@
                     <span class="text-xs text-gray-600">{{ tacoProps.description }}</span>
                 </span>
 
-                <FontAwesomeIcon
+                <span
                     v-if="state.ownedSkins.includes(tacoName)"
-                    :icon="faCheck"
-                    :size="state.selectedSkin === tacoName ? 'lg' : '1x'"
-                    class="mr-4! ml-auto! text-gray-700/50"
-                    :class="{ 'text-gray-700/70!': state.selectedSkin === tacoName }"
-                />
+                    class="icon-[tabler--check] mr-4! ml-auto! text-2xl text-gray-700/50 transition-all"
+                    :class="{ 'scale-105 text-purple-600!': state.selectedSkin === tacoName }"
+                ></span>
             </button>
         </div>
     </PanelSection>
