Replace font-awesome icons with unocss

package.json

@@ -11,10 +11,6 @@
         "lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "6.5.1",
-        "@fortawesome/free-brands-svg-icons": "6.5.1",
-        "@fortawesome/free-solid-svg-icons": "6.5.1",
-        "@fortawesome/vue-fontawesome": "3.0.6",
         "dompurify": "3.0.9",
         "fast-xml-parser": "4.3.4",
         "hotkeys-js": "3.13.6",

pnpm-lock.yaml

@@ -5,18 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@fortawesome/fontawesome-svg-core':
-    specifier: 6.5.1
-    version: 6.5.1
-  '@fortawesome/free-brands-svg-icons':
-    specifier: 6.5.1
-    version: 6.5.1
-  '@fortawesome/free-solid-svg-icons':
-    specifier: 6.5.1
-    version: 6.5.1
-  '@fortawesome/vue-fontawesome':
-    specifier: 3.0.6
-    version: 3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.4.19)
   dompurify:
     specifier: 3.0.9
     version: 3.0.9
@@ -1615,46 +1603,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@fortawesome/fontawesome-common-types@6.5.1:
-    resolution: {integrity: sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dev: false
-
-  /@fortawesome/fontawesome-svg-core@6.5.1:
-    resolution: {integrity: sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.5.1
-    dev: false
-
-  /@fortawesome/free-brands-svg-icons@6.5.1:
-    resolution: {integrity: sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.5.1
-    dev: false
-
-  /@fortawesome/free-solid-svg-icons@6.5.1:
-    resolution: {integrity: sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.5.1
-    dev: false
-
-  /@fortawesome/vue-fontawesome@3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.4.19):
-    resolution: {integrity: sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==}
-    peerDependencies:
-      '@fortawesome/fontawesome-svg-core': ~1 || ~6
-      vue: '>= 3.0.0 < 4'
-    dependencies:
-      '@fortawesome/fontawesome-svg-core': 6.5.1
-      vue: 3.4.19(typescript@5.3.3)
-    dev: false
-
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}

src/components/ChannelItem.vue

@@ -6,14 +6,14 @@
             </div>
             <p>
                 <span v-text="item.name" />
-                <font-awesome-icon v-if="item.verified" class="ml-1.5" icon="check" />
+                <i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
             </p>
         </router-link>
         <p v-if="item.description" v-text="item.description" />
         <router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
             <p>
                 <span v-text="item.uploader" />
-                <font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
+                <i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
             </p>
         </router-link>
 

src/components/ChannelPage.vue

@@ -13,7 +13,7 @@
                 <img height="48" width="48" class="m-1 rounded-full" :src="channel.avatarUrl" />
                 <div class="flex items-center gap-1">
                     <h1 class="!text-xl" v-text="channel.name" />
-                    <font-awesome-icon v-if="channel.verified" class="!text-xl" icon="check" />
+                    <i v-if="channel.verified" class="i-fa6-solid:check !text-xl" />
                 </div>
             </div>
 
@@ -45,7 +45,7 @@
                     target="_blank"
                     class="btn flex-col"
                 >
-                    <font-awesome-icon icon="rss" />
+                    <i class="i-fa6-solid:rss" />
                 </a>
             </div>
         </div>

src/components/CommentItem.vue

@@ -12,7 +12,7 @@
         <div class="comment-content pl-2">
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned">
-                    <font-awesome-icon icon="thumbtack" />
+                    <i class="i-fa6-solid:thumbtack" />
                     <span
                         v-t="{
                             path: 'comment.pinned_by',
@@ -24,7 +24,7 @@
 
                 <div class="comment-author">
                     <router-link class="link font-bold" :to="comment.commentorUrl">{{ comment.author }}</router-link>
-                    <font-awesome-icon v-if="comment.verified" class="ml-1.5" icon="check" />
+                    <i v-if="comment.verified" class="i-fa6-solid:check ml-1.5" />
                 </div>
                 <div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
             </div>
@@ -33,19 +33,19 @@
             <div class="comment-footer my-1 flex items-center gap-3">
                 <div class="i-fa6-solid:thumbs-up" />
                 <span v-text="numberFormat(comment.likeCount)" />
-                <font-awesome-icon v-if="comment.hearted" icon="heart" />
+                <i v-if="comment.hearted" class="i-fa6-solid:heart" />
                 <img v-if="comment.creatorReplied" :src="uploaderAvatarUrl" class="h-5 w-5 rounded-full" />
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div class="cursor-pointer" @click="loadReplies">
                     <a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />
-                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
+                    <i class="i-fa6-solid:level-down-alt ml-1.5" />
                 </div>
             </template>
             <template v-if="showingReplies">
                 <div class="cursor-pointer" @click="hideReplies">
                     <a v-t="'actions.hide_replies'" />
-                    <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
+                    <i class="i-fa6-solid:level-up-alt ml-1.5" />
                 </div>
             </template>
             <div v-show="showingReplies" v-if="replies" class="replies">
@@ -54,7 +54,7 @@
                 </div>
                 <div v-if="nextpage" class="cursor-pointer" @click="loadReplies">
                     <a v-t="'actions.load_more_replies'" />
-                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
+                    <i class="i-fa6-solid:level-down-alt ml-1.5" />
                 </div>
             </div>
         </div>

src/components/FeedPage.vue

@@ -41,7 +41,7 @@
     <span class="flex gap-2">
         <router-link v-t="'titles.subscriptions'" class="btn" to="/subscriptions" />
         <a :href="getRssUrl" class="btn">
-            <font-awesome-icon icon="rss" />
+            <i class="i-fa6-solid:rss" />
         </a>
     </span>
     <hr />

src/components/FooterComponent.vue

@@ -1,27 +1,27 @@
 <template>
     <footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
         <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
-            <font-awesome-icon :icon="['fab', 'github']" />
+            <i class="i-fa6-brands:github" />
             <span v-t="'actions.source_code'" class="ml-2" />
         </a>
         <a href="https://docs.piped.video/" target="_blank">
-            <font-awesome-icon :icon="['fa', 'book']" />
+            <i class="i-fa6-solid:book" />
             <span v-t="'actions.documentation'" class="ml-2" />
         </a>
         <a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
-            <font-awesome-icon :icon="['fab', 'bitcoin']" />
+            <i class="i-fa6-brands:bitcoin" />
             <span v-t="'actions.donations'" class="ml-2" />
         </a>
         <a v-if="statusPageHref" :href="statusPageHref">
-            <font-awesome-icon :icon="['fa', 'server']" />
+            <i class="i-fa6-solid:server" />
             <span v-t="'actions.status_page'" class="ml-2" />
         </a>
         <a v-if="donationHref" :href="donationHref">
-            <font-awesome-icon :icon="['fa', 'donate']" />
+            <i class="i-fa6-solid:donate" />
             <span v-t="'actions.instance_donations'" class="ml-2" />
         </a>
         <a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
-            <font-awesome-icon :icon="['fa', 'eye']" />
+            <i class="i-fa6-solid:eye" />
             <span v-t="'actions.instance_privacy_policy'" class="ml-2" />
         </a>
     </footer>

src/components/ModalComponent.vue

@@ -2,7 +2,7 @@
     <div class="modal">
         <div @click="handleClick">
             <div class="modal-container">
-                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
+                <button @click="$emit('close')"><i class="i-fa6-solid:xmark" /></button>
                 <slot></slot>
             </div>
         </div>

src/components/PlaylistItem.vue

@@ -6,7 +6,7 @@
             </div>
             <p>
                 <span v-text="props.item.name" />
-                <font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
+                <i v-if="props.item.verified" class="i-fa6-solid:check ml-1.5" />
             </p>
         </router-link>
         <p v-if="props.item.description" v-text="props.item.description" />
@@ -14,7 +14,7 @@
         <router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
             <p>
                 <span v-text="props.item.uploaderName" />
-                <font-awesome-icon v-if="props.item.uploaderVerified" class="ml-1.5" icon="check" />
+                <i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
             </p>
         </router-link>
         <a v-else-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />

src/components/PlaylistPage.vue

@@ -17,16 +17,16 @@
                 <strong class="mr-2" v-text="`${playlist.videos} ${$t('video.videos')}`" />
                 <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
                     {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
-                    }}<font-awesome-icon class="ml-3" icon="bookmark" />
+                    }}<i class="i-fa6-solid:bookmark ml-3" />
                 </button>
                 <button v-if="authenticated && !isPipedPlaylist" class="btn mr-1" @click="clonePlaylist">
-                    {{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
+                    {{ $t("actions.clone_playlist") }}<i class="i-fa6-solid:clone ml-3" />
                 </button>
                 <button class="btn mr-1" @click="downloadPlaylistAsTxt">
                     {{ $t("actions.download_as_txt") }}
                 </button>
                 <a class="btn mr-1" :href="getRssUrl">
-                    <font-awesome-icon icon="rss" />
+                    <i class="i-fa6-solid:rss" />
                 </a>
                 <WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" />
             </div>

src/components/PlaylistsPage.vue

@@ -76,7 +76,7 @@
             <div class="relative text-sm">
                 <span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
                 <div class="absolute bottom-100px right-5px z-100 px-5px" @click.prevent="removeBookmark(index)">
-                    <font-awesome-icon class="ml-3" icon="bookmark" />
+                    <i class="i-fa6-solid:bookmark ml-3" />
                 </div>
             </div>
             <p

src/components/PreferencesPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex">
         <button @click="$router.go(-1) || $router.push('/')">
-            <font-awesome-icon icon="chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
+            <i class="i-fa6-solid:chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
         </button>
     </div>
     <h1 v-t="'titles.preferences'" class="text-center font-bold" />

src/components/SubscriptionsPage.vue

@@ -52,12 +52,12 @@
         >
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
             <div v-if="group.groupName != '' && selectedGroup == group">
-                <font-awesome-icon class="mx-2" icon="edit" @click="showEditGroupModal = true" />
+                <i class="i-fa6-solid:edit mx-2" @click="showEditGroupModal = true" />
-                <font-awesome-icon class="mx-2" icon="circle-minus" @click="deleteGroup(group)" />
+                <i class="i-fa6-solid:circle-minus mx-2" @click="deleteGroup(group)" />
             </div>
         </button>
         <button class="btn mx-1" @click="showCreateGroupModal = true">
-            <font-awesome-icon icon="circle-plus" />
+            <i class="i-fa6-solid:circle-plus" />
         </button>
     </div>
     <br />

src/components/VideoItem.vue

@@ -43,7 +43,7 @@
                     v-text="timeFormat(item.duration)"
                 />
                 <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
-                    <font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" />
+                    <i class="i-fa6-solid:tower-broadcast w-3" />
                 </i18n-t>
                 <span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
             </div>
@@ -78,12 +78,12 @@
                     :title="item.uploaderName"
                 >
                     <span v-text="item.uploaderName" />
-                    <font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
+                    <i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
                 </router-link>
 
                 <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
                     <span v-if="item.views >= 0">
-                        <font-awesome-icon icon="eye" />
+                        <i class="i-fa6-solid:eye" />
                         <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
                     </span>
                     <span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
@@ -105,13 +105,13 @@
                     :aria-label="'Listen to ' + title"
                     :title="'Listen to ' + title"
                 >
-                    <font-awesome-icon icon="headphones" />
+                    <i class="i-fa6-solid:headphones" />
                 </router-link>
                 <button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
-                    <font-awesome-icon icon="circle-plus" />
+                    <i class="i-fa6-solid:circle-plus" />
                 </button>
                 <button :title="$t('actions.share')" @click="showShareModal = !showShareModal">
-                    <font-awesome-icon icon="share" />
+                    <i class="i-fa6-solid:share" />
                 </button>
                 <button
                     v-if="admin"
@@ -119,7 +119,7 @@
                     :title="$t('actions.remove_from_playlist')"
                     @click="showConfirmRemove = true"
                 >
-                    <font-awesome-icon icon="circle-minus" />
+                    <i class="i-fa6-solid:circle-minus" />
                 </button>
                 <ConfirmModal
                     v-if="showConfirmRemove"

src/components/WatchOnButton.vue

@@ -19,11 +19,13 @@ export default {
         <!-- For large screens -->
         <a :href="link" class="btn flex items-center lt-lg:hidden">
             <i18n-t keypath="player.watch_on" tag="strong">{{ platform }}</i18n-t>
-            <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
+            <i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
+            <i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
         </a>
         <!-- For small screens -->
         <a :href="link" class="btn flex items-center lg:hidden">
-            <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
+            <i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
+            <i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
         </a>
     </template>
 </template>

src/components/WatchVideo.vue

@@ -84,7 +84,7 @@
                         video.uploader
                     }}</router-link>
                     <!-- Verified Badge -->
-                    <font-awesome-icon v-if="video.uploaderVerified" class="ml-1" icon="check" />
+                    <i v-if="video.uploaderVerified" class="i-fa6-solid:check ml-1" />
                 </div>
                 <PlaylistAddModal
                     v-if="showModal"
@@ -106,7 +106,7 @@
                         {{ $t("actions.download_frame") }}<i class="i-fa6-solid:download" />
                     </button>
                     <button class="btn flex items-center" @click="showModal = !showModal">
-                        {{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
+                        {{ $t("actions.add_to_playlist") }}<i class="i-fa6-solid:circle-plus ml-1" />
                     </button>
                     <button
                         class="btn"
@@ -128,12 +128,12 @@
                             target="_blank"
                             class="btn flex items-center"
                         >
-                            <font-awesome-icon class="mx-1.5" icon="rss" />
+                            <i class="i-fa6-solid:rss mx-1.5" />
                         </a>
                         <!-- Share Dialog -->
                         <button class="btn flex items-center" @click="showShareModal = !showShareModal">
                             <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
-                            <font-awesome-icon class="mx-1.5" icon="fa-share" />
+                            <i class="i-fa6-solid:share mx-1.5" />
                         </button>
                         <!-- YouTube -->
                         <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
@@ -150,7 +150,7 @@
                             :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                             class="btn flex items-center"
                         >
-                            <font-awesome-icon class="mx-1.5" :icon="isListening ? 'tv' : 'headphones'" />
+                            <i :class="isListening ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'" class="mx-1.5" />
                         </router-link>
                     </div>
                 </div>

src/main.js

@@ -1,58 +1,4 @@
 import { createApp } from "vue";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faEye,
-    faThumbtack,
-    faCheck,
-    faHeart,
-    faHeadphones,
-    faRss,
-    faChevronLeft,
-    faLevelDownAlt,
-    faTv,
-    faLevelUpAlt,
-    faBroadcastTower,
-    faCirclePlus,
-    faCircleMinus,
-    faXmark,
-    faClone,
-    faShare,
-    faBook,
-    faServer,
-    faDonate,
-    faBookmark,
-    faEdit,
-} from "@fortawesome/free-solid-svg-icons";
-import { faGithub, faBitcoin, faYoutube, faOdysee } from "@fortawesome/free-brands-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-library.add(
-    faEye,
-    faGithub,
-    faBitcoin,
-    faThumbtack,
-    faCheck,
-    faHeart,
-    faHeadphones,
-    faYoutube,
-    faOdysee,
-    faRss,
-    faChevronLeft,
-    faLevelDownAlt,
-    faLevelUpAlt,
-    faTv,
-    faBroadcastTower,
-    faCirclePlus,
-    faCircleMinus,
-    faXmark,
-    faClone,
-    faShare,
-    faBook,
-    faServer,
-    faDonate,
-    faBookmark,
-    faEdit,
-);
-
 import router from "@/router/router.js";
 import App from "./App.vue";
 
@@ -657,5 +603,4 @@ const app = createApp(App);
 app.use(i18n);
 app.use(router);
 app.mixin(mixin);
-app.component("FontAwesomeIcon", FontAwesomeIcon);
 app.mount("#app");

uno.config.js

@@ -12,7 +12,12 @@ export default defineConfig({
         presetUno({
             dark: "media",
         }),
-        presetIcons(),
+        presetIcons({
+            extraProperties: {
+                display: "inline-block",
+                "vertical-align": "middle",
+            },
+        }),
         presetWebFonts({
             provider: "none",
             fonts: {