From 51e649813fb7fc3b10f6b0cacfd9acf4c04423b0 Mon Sep 17 00:00:00 2001 From: 0x24d Date: Wed, 6 Mar 2024 19:45:31 +0000 Subject: [PATCH] Replace font-awesome icons with unocss --- package.json | 4 -- pnpm-lock.yaml | 52 -------------------------- src/components/ChannelItem.vue | 4 +- src/components/ChannelPage.vue | 4 +- src/components/CommentItem.vue | 12 +++--- src/components/FeedPage.vue | 2 +- src/components/FooterComponent.vue | 12 +++--- src/components/ModalComponent.vue | 2 +- src/components/PlaylistItem.vue | 4 +- src/components/PlaylistPage.vue | 6 +-- src/components/PlaylistsPage.vue | 2 +- src/components/PreferencesPage.vue | 2 +- src/components/SubscriptionsPage.vue | 6 +-- src/components/VideoItem.vue | 14 +++---- src/components/WatchOnButton.vue | 6 ++- src/components/WatchVideo.vue | 10 ++--- src/main.js | 55 ---------------------------- uno.config.js | 7 +++- 18 files changed, 50 insertions(+), 154 deletions(-) diff --git a/package.json b/package.json index c5dfb308..1312a7c3 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 98604787..79a7e329 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue index 5cf6ed42..68c25fd1 100644 --- a/src/components/ChannelItem.vue +++ b/src/components/ChannelItem.vue @@ -6,14 +6,14 @@

- +

- +

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue index 77498b30..10b0a705 100644 --- a/src/components/ChannelPage.vue +++ b/src/components/ChannelPage.vue @@ -13,7 +13,7 @@

- +

@@ -45,7 +45,7 @@ target="_blank" class="btn flex-col" > - + diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue index 9a03d69b..f010a658 100644 --- a/src/components/CommentItem.vue +++ b/src/components/CommentItem.vue @@ -12,7 +12,7 @@
- + {{ comment.author }} - +
@@ -33,19 +33,19 @@
- +
@@ -54,7 +54,7 @@
- +
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue index cb8e11de..a94958b5 100644 --- a/src/components/FeedPage.vue +++ b/src/components/FeedPage.vue @@ -41,7 +41,7 @@ - +
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue index 38212347..fa2c2cf5 100644 --- a/src/components/FooterComponent.vue +++ b/src/components/FooterComponent.vue @@ -1,27 +1,27 @@ diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index 9204a46e..1578beac 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -84,7 +84,7 @@ video.uploader }} - +
@@ -150,7 +150,7 @@ :title="(isListening ? 'Watch ' : 'Listen to ') + video.title" class="btn flex items-center" > - + diff --git a/src/main.js b/src/main.js index f759255c..da46d9c1 100644 --- a/src/main.js +++ b/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"); diff --git a/uno.config.js b/uno.config.js index bf0d1e67..7603e384 100644 --- a/uno.config.js +++ b/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: {