From c9887814fe1e98d5512c8ac68ae6dbaebf2aee1b Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Fri, 18 Feb 2022 11:02:27 +0530
Subject: [PATCH] Convert from using iconfonts to SVG

---
 babel.config.js                 |  6 +++---
 package.json                    |  2 +-
 src/App.vue                     |  8 ++++++--
 src/components/VideoComment.vue | 19 +++++++++++++------
 src/main.js                     |  1 -
 src/plugins/vuetify.js          |  3 +++
 src/routes/Channel.vue          |  7 +++++--
 src/routes/FeedPage.vue         |  8 ++++++--
 src/routes/Playlist.vue         | 14 +++++++++-----
 src/routes/WatchVideo.vue       | 11 ++++++++---
 yarn.lock                       |  6 +++---
 11 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index e955840..414e4ac 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+	presets: [
+		'@vue/cli-plugin-babel/preset'
+	]
 }
diff --git a/package.json b/package.json
index c1cc698..6a0d18c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@fontsource/noto-sans-sc": "^4.5.3",
     "@fontsource/noto-sans-tc": "^4.5.3",
     "@fontsource/nunito-sans": "^4.5.2",
-    "@mdi/font": "^6.5.95",
+    "@mdi/js": "^6.5.95",
     "axios": "^0.25.0",
     "core-js": "^3.21.0",
     "dexie": "^3.2.0",
diff --git a/src/App.vue b/src/App.vue
index 96f1c69..36c4609 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@
             </v-btn>
             <AuthenticationModal />
             <v-btn icon @click="toggleDarkMode">
-                <v-icon>mdi-brightness-6</v-icon>
+                <v-icon>{{ mdiBrightness6 }}</v-icon>
             </v-btn>
             <v-select
                 class="mt-6"
@@ -97,6 +97,8 @@
 </style>
 
 <script>
+import { mdiBrightness6 } from '@mdi/js'
+
 import SearchMenu from '@/routes/SearchMenu'
 import { changeLocale } from '@/plugins/i18n'
 import AuthenticationModal from '@/components/AuthenticationModal'
@@ -186,7 +188,9 @@ export default {
 		].sort((a, b) => {
 			return a.text.localeCompare(b.text)
 		}),
-		drawer: false
+		drawer: false,
+
+		mdiBrightness6
 	}),
 
 	computed: {
diff --git a/src/components/VideoComment.vue b/src/components/VideoComment.vue
index cd62a74..96290a7 100644
--- a/src/components/VideoComment.vue
+++ b/src/components/VideoComment.vue
@@ -7,9 +7,9 @@
     </v-col>
     <v-col cols="12" md="11">
       <v-card-text>
-        <v-icon v-if="comment.pinned" class="mx-2">mdi-pin</v-icon>
+        <v-icon v-if="comment.pinned" class="mx-2">{{ mdiPin }}</v-icon>
         <router-link :to="comment.commentorUrl" class="text-decoration-none primary--text">
-          <b>{{ comment.author }}</b><v-icon v-if="comment.verified">mdi-account-check</v-icon>
+          <b>{{ comment.author }}</b><v-icon v-if="comment.verified">{{ mdiAccountCheck }}</v-icon>
         </router-link>
         {{ comment.commentedTime }}
 
@@ -17,8 +17,8 @@
 
         <v-divider class="my-2" />
 
-        <v-icon>mdi-thumb-up</v-icon> {{ this.$store.getters['i18n/fmtNumber'](comment.likeCount) }}
-        <v-icon v-if="comment.hearted" class="ml-4">mdi-heart</v-icon>
+        <v-icon>{{ mdiThumbUp }}</v-icon> {{ this.$store.getters['i18n/fmtNumber'](comment.likeCount) }}
+        <v-icon v-if="comment.hearted" class="ml-4">{{ mdiHeart }}</v-icon>
         <br />
         <v-btn class="mt-1" text :loading="requestInProgress" :disabled="requestInProgress" @click="loadReplies" v-if="!subComment && childComments.length === 0 && comment.repliesPage != null">Load Replies</v-btn>
         <div v-else-if="!subComment && childComments.length !== 0">
@@ -33,8 +33,10 @@
 </template>
 
 <script>
-import { LibPiped } from '@/tools/libpiped'
 import marked from 'marked'
+import { mdiPin, mdiAccountCheck, mdiHeart, mdiThumbUp } from '@mdi/js'
+
+import { LibPiped } from '@/tools/libpiped'
 
 export default {
 	name: 'VideoComment',
@@ -42,7 +44,12 @@ export default {
 	data: () => ({
 		requestInProgress: false,
 		showChildComments: true,
-		childComments: []
+		childComments: [],
+
+		mdiPin,
+		mdiAccountCheck,
+		mdiHeart,
+		mdiThumbUp
 	}),
 	methods: {
 		async loadReplies () {
diff --git a/src/main.js b/src/main.js
index e143ca5..c6fb862 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-import '@mdi/font/css/materialdesignicons.min.css'
 import '@/styles/main.scss'
 
 import { i18n, i18nInitialized } from '@/plugins/i18n'
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index fb06187..db6538f 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -4,6 +4,9 @@ import Vuetify from 'vuetify/lib/framework'
 Vue.use(Vuetify)
 
 export default new Vuetify({
+	icons: {
+		iconfont: 'mdiSvg'
+	},
 	theme: {
 		// There's apparently a race condition that causes components being rendered shortly before dark mode initialization unable to change to dark mode
 		dark: (() => {
diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue
index 1618dc7..2a5b243 100644
--- a/src/routes/Channel.vue
+++ b/src/routes/Channel.vue
@@ -9,7 +9,7 @@
                     <v-img :src="channel.avatarUrl" height="48" width="48" class="rounded-circle" />
                 </div>
                 <span class="text-h5 ml-4">{{ channel.name }}</span>
-                <v-icon class="ml-2" v-if="channel.verified">mdi-check-circle-outline</v-icon>
+                <v-icon class="ml-2" v-if="channel.verified">{{ mdiCheckCircleOutline }}</v-icon>
                 <SubscriptionButton :channel-id="channel.id" />
             </div>
             <v-card-text>
@@ -33,6 +33,7 @@
 
 <script>
 import marked from 'marked'
+import { mdiCheckCircleOutline } from '@mdi/js'
 
 import NGErrorHandler from '@/components/NGErrorHandler'
 import VideoItem from '@/components/VideoItem.vue'
@@ -46,7 +47,9 @@ export default {
 	data () {
 		return {
 			channel: null,
-			error: null
+			error: null,
+
+			mdiCheckCircleOutline
 		}
 	},
 	metaInfo () {
diff --git a/src/routes/FeedPage.vue b/src/routes/FeedPage.vue
index b7dfecb..c11d35c 100644
--- a/src/routes/FeedPage.vue
+++ b/src/routes/FeedPage.vue
@@ -9,7 +9,7 @@
             v-if="$store.getters['auth/isCurrentlyAuthenticated']"
             link :href="$store.getters['prefs/apiUrl'] + '/feed/rss?authToken=' + $store.getters['auth/authToken']"
         >
-            <v-icon>mdi-rss</v-icon>
+            <v-icon>{{ mdiRss }}</v-icon>
             {{ $t('actions.rss_of_subscriptions') }}
         </v-btn>
 
@@ -27,6 +27,8 @@
 <script>
 import axios from 'axios'
 
+import { mdiRss } from '@mdi/js'
+
 import VideoItem from '@/components/VideoItem.vue'
 import NGErrorHandler from '@/components/NGErrorHandler'
 import GridRow from '@/components/Grid/GridRow'
@@ -40,7 +42,9 @@ export default {
 			feedName: 'trending',
 			videos: [],
 			error: null,
-			errorIsJSON: false
+			errorIsJSON: false,
+
+			mdiRss
 		}
 	},
 
diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue
index 024d516..3ca73f6 100644
--- a/src/routes/Playlist.vue
+++ b/src/routes/Playlist.vue
@@ -26,8 +26,8 @@
               <h5 class="text-h5 ml-16">{{ $tc('counts.videos', playlist.videos) }}</h5>
             </v-card-text>
             <v-card-actions>
-                <v-btn icon x-large link :href="getRssUrl"><v-icon x-large>mdi-rss-box</v-icon></v-btn>
-                <v-btn icon x-large link :href="youtubeURL"><v-icon x-large>mdi-youtube</v-icon></v-btn>
+                <v-btn icon x-large link :href="getRssUrl"><v-icon x-large>{{ mdiRssBox }}</v-icon></v-btn>
+                <v-btn icon x-large link :href="youtubeURL"><v-icon x-large>{{ mdiYoutube }}</v-icon></v-btn>
             </v-card-actions>
           </v-card>
 
@@ -42,15 +42,19 @@
 </template>
 
 <script>
+import { chunk as _chunk } from 'lodash-es'
+import { mdiRssBox, mdiYoutube } from '@mdi/js'
+
 import ErrorHandler from '@/components/ErrorHandler.vue'
 import VideoItem from '@/components/VideoItem.vue'
 
-import { chunk as _chunk } from 'lodash-es'
-
 export default {
 	data () {
 		return {
-			playlist: null
+			playlist: null,
+
+			mdiRssBox,
+			mdiYoutube
 		}
 	},
 	metaInfo () {
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 9099942..6883021 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -30,12 +30,12 @@
                                 </span>
                             </v-col>
                             <v-col cols="12" md="6" :style="$vuetify.breakpoint.mdAndUp ? { textAlign: 'right' } : {}">
-                                <v-icon>mdi-thumb-up</v-icon>
+                                <v-icon>{{ mdiThumbUp }}</v-icon>
                                 <b class="ml-2">{{ $store.getters['i18n/fmtNumber'](video.likes) }}</b>
                                 <v-btn icon class="ml-2" link :href="'https://youtu.be/' + videoId"
                                        @click.prevent="onYTClick" target="_blank">
                                     <v-icon large>
-                                        mdi-youtube
+                                        {{ mdiYoutube }}
                                     </v-icon>
                                 </v-btn>
                                 <v-btn class="ml-2" link :href="'https://odysee.com/' + video.lbryId"
@@ -113,6 +113,8 @@
 
 <script>
 import { debounce } from 'lodash-es'
+import { mdiThumbUp, mdiYoutube } from '@mdi/js'
+
 import { LibPiped } from '@/tools/libpiped'
 
 import Player from '@/components/Player.vue'
@@ -140,7 +142,10 @@ export default {
 			channelId: null,
 
 			dbID: null,
-			lastWatch: null
+			lastWatch: null,
+
+			mdiThumbUp,
+			mdiYoutube
 		}
 	},
 	metaInfo () {
diff --git a/yarn.lock b/yarn.lock
index 8776889..8effcf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1076,10 +1076,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@mdi/font@^6.5.95":
+"@mdi/js@^6.5.95":
   version "6.5.95"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-6.5.95.tgz#203922f6dd46397de9eb1f5956b85339adb6344d"
-  integrity sha512-ES5rj6J39FUkHe/b3C9SJs8bqIungYhuU7rBINTBaHOv/Ce4RCb3Gw08CZVl32W33UEkgRkzyWaIedV4at+QHg==
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-6.5.95.tgz#2d895b013408f213252b77c30e0fdaaba6dc8b4b"
+  integrity sha512-x/bwEoAGP+Mo10Dfk5audNIPi7Yz8ZBrILcbXLW3ShOI/njpgodzpgpC2WYK3D2ZSC392peRRemIFb/JsyzzYQ==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"