🐛 Integrate icons into build (#2088)

* 🐛 Work on inline icons * 🐛 Include icons in build * 🐛 Apply icon styles properly * ⬆️ Upgrade package * 📝 Update changelog
ViewTube · Jul 30, 2023 · d9da312 · d9da312
1 parent f42dba4
commit d9da312
Show file tree

Hide file tree

Showing 58 changed files with 935 additions and 591 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Create release on CHANGELOG.md edit [#2085](https://github.com/ViewTube/viewtube/pull/2085)
+- Switch to unocss icons and include in build [#2088](https://github.com/ViewTube/viewtube/pull/2088)
 
 ## [0.10.0] - 2023-01-30
 

diff --git a/client/assets/icon.svg b/client/assets/icon.svg
diff --git a/client/assets/styles/popup.scss b/client/assets/styles/popup.scss
@@ -52,13 +52,12 @@
       width: 38px;
       z-index: 5;
       cursor: pointer;
-      background-color: var(--bgcolor-alt);
       border-radius: 25px;
 
-      .material-design-icon__svg {
-        height: 38px !important;
-        width: 38px !important;
-        position: unset !important;
+      .vt-icon {
+        height: 38px;
+        width: 38px;
+        position: unset;
       }
     }
 
@@ -77,15 +76,10 @@
 
     h2 {
       padding: 40px 0 0 0;
+      display: flex;
 
-      span {
-        margin: 0 10px 0 0;
-
-        svg {
-          bottom: -0.2rem !important;
-          height: 1em !important;
-          width: 1em !important;
-        }
+      .vt-icon {
+        margin: auto 10px auto 0;
       }
     }
 

diff --git a/client/components/About.vue b/client/components/About.vue
@@ -25,7 +25,7 @@ const copyCommitHash = () => {
 <template>
   <div class="about popup">
     <div class="about-container popup-container">
-      <Icon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
+      <VTIcon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
       <h1>About</h1>
       <div class="logo-about">
         <img class="logo-about-img" src="@/assets/icon.svg" alt="ViewTube" />
@@ -47,13 +47,13 @@ const copyCommitHash = () => {
             :href="`https://github.com/ViewTube/viewtube/commit/${commit}`"
             target="_blank"
             rel="noreferrer noopener"
-            ><Icon name="mdi:open-in-new"
+            ><VTIcon name="mdi:open-in-new"
           /></a>
         </h4>
       </div>
       <div class="links-about">
         <BadgeButton :href="'https://github.com/viewtube/viewtube'">
-          <Icon name="mdi:github" />ViewTube
+          <VTIcon name="mdi:github" />ViewTube
         </BadgeButton>
       </div>
       <div class="external-service-container">
@@ -183,17 +183,11 @@ const copyCommitHash = () => {
     // Break text
     word-break: break-word;
 
-    .material-design-icon {
+    .vt-icon {
       width: 14px;
       height: 14px;
       padding: 2px 0 0 0;
       box-sizing: border-box;
-
-      .material-design-icon__svg {
-        width: 14px;
-        height: 14px;
-        display: block;
-      }
     }
   }
 }

diff --git a/client/components/Comment.vue b/client/components/Comment.vue
@@ -86,18 +86,18 @@ const loadMoreReplies = () => {
         </div>
 
         <div class="likes comment-property">
-          <Icon name="mdi:thumb-up" />
+          <VTIcon name="mdi:thumb-up" />
           <span>{{ comment.likeCount?.toLocaleString('en-US') }}</span>
         </div>
         <div
           v-if="comment.creatorHeart"
           v-tippy="`❤ by ${channelAuthorName}`"
           class="creatorHeart comment-property tooltip"
         >
-          <Icon name="mdi:heart" title="" />
+          <VTIcon name="mdi:heart" title="" />
         </div>
         <div v-if="comment.isEdited" class="edited comment-property">
-          <Icon name="mdi:pencil" />
+          <VTIcon name="mdi:pencil" />
           <span class="edited-text">edited</span>
         </div>
       </div>
@@ -108,15 +108,15 @@ const loadMoreReplies = () => {
           :click="loadReplies"
           :loading="loadingReplies"
         >
-          <Icon name="mdi:comment-outline" />
+          <VTIcon name="mdi:comment-outline" />
           <p>
             show
             {{ comment.replyCount?.toLocaleString('en-US') }}
             replies
           </p>
         </BadgeButton>
         <BadgeButton v-if="repliesLoaded" class="comment-reply-count" :click="hideReplies">
-          <Icon name="mdi:comment-remove-outline" />
+          <VTIcon name="mdi:comment-remove-outline" />
           <p>hide replies</p>
         </BadgeButton>
         <div v-if="repliesLoaded" class="comment-replies-list">
@@ -134,7 +134,7 @@ const loadMoreReplies = () => {
             :click="loadMoreReplies"
             :loading="repliesContinuationLoading"
           >
-            <Icon name="mdi:reload" />
+            <VTIcon name="mdi:reload" />
             <p>Show more</p>
           </BadgeButton>
         </div>
@@ -219,10 +219,9 @@ const loadMoreReplies = () => {
         gap: 4px;
         align-items: center;
 
-        .material-design-icon,
-        .material-design-icon__svg {
-          height: 1.2em !important;
-          width: 1.2em !important;
+        .vt-icon {
+          height: 1.2em;
+          width: 1.2em;
         }
 
         .edited-text {

diff --git a/client/components/CommunityPost.vue b/client/components/CommunityPost.vue
@@ -33,11 +33,11 @@ defineProps<{
     </div>
     <div class="post-info">
       <div class="info-item">
-        <Icon name="mdi:thumb-up" />
+        <VTIcon name="mdi:thumb-up" />
         <p>{{ communityPost.voteCount ?? 0 }}</p>
       </div>
       <div class="info-item">
-        <Icon name="mdi:comment-outline" />
+        <VTIcon name="mdi:comment-outline" />
         <p class="comments">{{ communityPost.commentCount ?? 0 }}</p>
       </div>
     </div>
@@ -80,8 +80,7 @@ defineProps<{
       gap: 5px;
       color: var(--subtitle-color-light);
 
-      .material-design-icon,
-      :deep(.material-design-icon__svg) {
+      :deep(.vt-icon) {
         width: 20px;
         height: 20px;
       }

diff --git a/client/components/MainSearchBox.vue b/client/components/MainSearchBox.vue
@@ -28,7 +28,7 @@
       class="search-btn tooltip"
       @click.self.prevent="onSearchButton"
     >
-      <Icon name="mdi:magnify" />
+      <VTIcon name="mdi:magnify" />
     </a>
     <span class="search-line-bottom line" />
     <SearchAutoComplete
@@ -194,7 +194,7 @@ export default defineComponent({
     display: flex;
     user-select: none;
 
-    .material-design-icon {
+    .vt-icon {
       margin: auto;
       left: -3px !important;
       display: flex;

diff --git a/client/components/SectionTitle.vue b/client/components/SectionTitle.vue
@@ -16,7 +16,7 @@ withDefaults(
   <div class="section-title">
     <nuxt-link v-if="link" class="title" :to="link">
       {{ title }}
-      <Icon name="mdi:chevron-right" />
+      <VTIcon name="mdi:chevron-right" />
     </nuxt-link>
     <h2 v-else class="title">
       {{ title }}
@@ -44,13 +44,12 @@ withDefaults(
     gap: 10px;
 
     &:hover {
-      .material-design-icon {
+      .vt-icon {
         transform: translateX(-10px);
       }
     }
 
-    .material-design-icon,
-    .material-design-icon__svg {
+    .vt-icon {
       height: 1.2em;
       width: 1.2em;
       transition: transform 300ms $intro-easing;

diff --git a/client/components/Settings.vue b/client/components/Settings.vue
@@ -24,20 +24,20 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
   <div class="settings popup">
     <div class="settings-container popup-container">
       <div class="settings-header">
-        <Icon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
+        <VTIcon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
         <h1 class="settings-title">
           Settings
           <div class="cloud-icon-container">
             <transition name="icon-switch" mode="out-in">
-              <Icon
+              <VTIcon
                 v-if="!settingsStore.settingsSaving"
                 v-tippy="'Settings synchronized'"
                 name="mdi:cloud-check-outline"
                 class="cloud-icon"
               />
             </transition>
             <transition name="icon-switch" mode="out-in">
-              <Icon
+              <VTIcon
                 v-if="settingsStore.settingsSaving"
                 v-tippy="'Saving settings'"
                 name="mdi:reload"
@@ -47,19 +47,19 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
           </div>
         </h1>
       </div>
-      <h2><Icon name="mdi:brightness-4" />Theme</h2>
+      <h2><VTIcon name="mdi:brightness-4" />Theme</h2>
       <div class="theme-selector-container">
         <ThemeSelector />
       </div>
-      <h2><Icon name="mdi:book-open-variant" />Chapters</h2>
+      <h2><VTIcon name="mdi:book-open-variant" />Chapters</h2>
       <SwitchButton
         :value="settingsStore.chapters"
         :label="'Show chapters on a video'"
         :disabled="false"
         :right="true"
         @valuechange="val => settingsStore.setChapters(val)"
       />
-      <h2><Icon name="mdi:history" />History</h2>
+      <h2><VTIcon name="mdi:history" />History</h2>
       <SwitchButton
         :value="settingsStore.saveVideoHistory"
         :label="'Save video history and progress'"
@@ -97,7 +97,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#0fca15'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentSponsor(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentSponsor(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -107,7 +109,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#07faf0'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentIntro(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentIntro(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -117,7 +121,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#0103e1'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentOutro(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentOutro(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -127,7 +133,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#b711df'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentInteraction(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentInteraction(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -137,7 +145,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#fdfb0e'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentSelfpromo(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentSelfpromo(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -147,7 +157,9 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#f89c06'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentMusicOfftopic(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentMusicOfftopic(val as SegmentOption)
+            "
           />
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -157,12 +169,14 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
             :right="true"
             :color-mark="'#f70000'"
             class="sponsorblock-option"
-            @update:model-value="val => settingsStore.setSponsorblockSegmentPreview(val as SegmentOption)"
+            @update:model-value="
+              val => settingsStore.setSponsorblockSegmentPreview(val as SegmentOption)
+            "
           />
         </div>
       </div>
 
-      <h2><Icon name="mdi:window-restore" />Miniplayer</h2>
+      <h2><VTIcon name="mdi:window-restore" />Miniplayer</h2>
       <SwitchButton
         :value="settingsStore.miniplayer"
         :label="'Enable miniplayer'"
@@ -172,7 +186,7 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         @valuechange="val => settingsStore.setMiniplayer(val)"
       />
 
-      <h2><Icon name="mdi:home" />Homescreen</h2>
+      <h2><VTIcon name="mdi:home" />Homescreen</h2>
       <SwitchButton
         :value="settingsStore.showHomeSubscriptions"
         :label="'Show subscriptions on home screen'"
@@ -182,7 +196,7 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         @valuechange="val => settingsStore.setShowHomeSubscriptions(val)"
       />
 
-      <h2><Icon name="mdi:television" />Videoplayer</h2>
+      <h2><VTIcon name="mdi:television" />Videoplayer</h2>
       <div class="settings-dropdown-menu">
         <div class="quality-label">
           <label>Default video quality</label>
@@ -296,12 +310,11 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p
         position: absolute;
         top: 0;
         left: 0;
-        transition: opacity 300ms $intro-easing, transform 300ms $intro-easing;
-
-        .material-design-icon__svg {
-          position: absolute;
-          left: 1px;
-        }
+        transition:
+          opacity 300ms $intro-easing,
+          transform 300ms $intro-easing;
+        width: 24px;
+        height: 24px;
       }
 
       .small-saving-spinner {