cleanup: migrate from material icons to symbols (#246)

And bump fonts awesome to 6.6.0
Vanilla-OS · Sep 26, 2024 · 19049ca · 19049ca
1 parent d7b709d
commit 19049ca
Show file tree

Hide file tree

Showing 35 changed files with 109 additions and 107 deletions.
diff --git a/public/assets/css/common.css b/public/assets/css/common.css
@@ -69,7 +69,12 @@ textarea {
     cursor: pointer;
 }
 
-.mdi {
+.material-symbols-outlined {
     user-select: none;
     cursor: default;
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 24
 }
diff --git a/public/assets/css/components/btn.css b/public/assets/css/components/btn.css
@@ -35,7 +35,7 @@
     padding: 23px 38px;
 }
 
-.btn .mdi {
+.btn .material-symbols-outlined {
     font-size: 100%;
 }
 

diff --git a/public/assets/css/components/card.css b/public/assets/css/components/card.css
@@ -164,10 +164,10 @@
     margin-bottom: auto;
 }
 
-.card-header h1 .mdi,
-.card-header h2 .mdi,
-.card-header h3 .mdi,
-.card-header h4 .mdi {
+.card-header h1 .material-symbols-outlined,
+.card-header h2 .material-symbols-outlined,
+.card-header h3 .material-symbols-outlined,
+.card-header h4 .material-symbols-outlined {
     font-size: 100%;
     position: relative;
     top: 4px;

diff --git a/public/assets/css/components/dynamicPanel.css b/public/assets/css/components/dynamicPanel.css
@@ -60,7 +60,7 @@
 }
 
 .DynamicPanel-card--blue .DynamicPanel-card-header h2,
-.DynamicPanel-card--blue .DynamicPanel-card-header .mdi {
+.DynamicPanel-card--blue .DynamicPanel-card-header .material-symbols-outlined {
     color: var(--dynamic-card-blue-title-color);
 }
 
@@ -73,7 +73,7 @@
 }
 
 .DynamicPanel-card--green .DynamicPanel-card-header h2,
-.DynamicPanel-card--green .DynamicPanel-card-header .mdi {
+.DynamicPanel-card--green .DynamicPanel-card-header .material-symbols-outlined {
     color: var(--dynamic-card-green-title-color);
 }
 
@@ -86,7 +86,7 @@
 }
 
 .DynamicPanel-card--pink .DynamicPanel-card-header h2,
-.DynamicPanel-card--pink .DynamicPanel-card-header .mdi {
+.DynamicPanel-card--pink .DynamicPanel-card-header .material-symbols-outlined {
     color: var(--dynamic-card-pink-title-color);
 }
 
@@ -107,7 +107,7 @@
     font-weight: 500;
 }
 
-.mdi {
+.material-symbols-outlined {
     font-size: 2rem;
 }
 
@@ -155,4 +155,4 @@
         display: flex;
         flex-direction: column;
     }
-}
+}
diff --git a/public/assets/css/components/searchBar.css b/public/assets/css/components/searchBar.css
@@ -53,15 +53,15 @@
     cursor: pointer;
 }
 
-.searchBar-shortcut>.mdi {
+.searchBar-shortcut>.material-symbols-outlined {
     position: relative;
     top: 0px;
     cursor: pointer;
     font-size: 15px;
     font-weight: 900;
 }
 
-.searchBar-icon>.mdi {
+.searchBar-icon>.material-symbols-outlined {
     font-size: 20px;
 }
 
@@ -70,7 +70,7 @@
     color: var(--text-color-dimmed);
 }
 
-.searchBar-shortcut>.mdi+span {
+.searchBar-shortcut>.material-symbols-outlined+span {
     font-size: 14px;
     font-weight: 500;
 }
@@ -99,4 +99,4 @@
     margin: 20px;
     display: flex;
     justify-content: center;
-}
+}
diff --git a/public/assets/css/components/timeline.css b/public/assets/css/components/timeline.css
@@ -54,7 +54,7 @@
     width: 100%;
 }
 
-.timeline-progressbar-meter-item .mdi {
+.timeline-progressbar-meter-item .material-symbols-outlined {
     text-shadow: 4px 0 var(--timeline-progressbar-meter-border-color), -4px 0 var(--timeline-progressbar-meter-border-color), 0 4px var(--timeline-progressbar-meter-border-color), 0 -4px var(--timeline-progressbar-meter-border-color), 3px 3px var(--timeline-progressbar-meter-border-color), -3px -3px var(--timeline-progressbar-meter-border-color), 3px -3px var(--timeline-progressbar-meter-border-color), -3px 3px var(--timeline-progressbar-meter-border-color);
     position: relative;
     top: -7px;
@@ -117,4 +117,4 @@
     .timeline-progressbar-meter-item>label {
         white-space: nowrap;
     }
-}
+}
diff --git a/public/assets/css/components/toolBox.css b/public/assets/css/components/toolBox.css
@@ -65,7 +65,7 @@
     opacity: 1;
 }
 
-.toolBox-item .mdi {
+.toolBox-item .material-symbols-outlined {
     font-size: 21px;
 }
 
@@ -118,4 +118,4 @@ ul.toc-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
-}
+}
diff --git a/public/assets/css/fonts.css b/public/assets/css/fonts.css
@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
diff --git a/public/assets/images/backgrounds/vos-kinetic-laptop-frame-dark.svg b/public/assets/images/backgrounds/vos-kinetic-laptop-frame-dark.svg
diff --git a/public/assets/images/backgrounds/vos-kinetic-laptop-frame.svg b/public/assets/images/backgrounds/vos-kinetic-laptop-frame.svg
diff --git a/src/components/AnIcon.vue b/src/components/AnIcon.vue
@@ -1,6 +1,6 @@
 <template>
     <img v-if="iconAsImage" :src="icon" :alt="altText" class="img img--24" />
-    <span v-else-if="iconPack === 'mdi' || !iconPack" class="mdi material-icons">{{ icon }}
+    <span v-else-if="iconPack === 'mdi' || !iconPack" class="material-symbols-outlined">{{ icon }}
     </span>
     <span v-else-if="iconPack === 'fa'">
         <i :class="icon"></i>

diff --git a/src/components/DynamicPanel.vue b/src/components/DynamicPanel.vue
@@ -5,7 +5,7 @@
             @click="toggleActiveDynamicPanel(index)">
             <div class="DynamicPanel-card-header">
                 <h2>{{ DynamicPanel.title }}</h2>
-                <span class="mdi material-icons">
+                <span class="material-symbols-outlined">
                     {{ activeDynamicPanel === index ? '' : 'arrow_forward' }}
                 </span>
             </div>

diff --git a/src/components/FloatNotice.vue b/src/components/FloatNotice.vue
@@ -3,8 +3,8 @@
         <div class="floatNotice-wrapper card" :class="classes">
             <div class="floatNotice-header clickable" @click="toggleExpanded()">
                 <h3>🎉 Vanilla OS 2 Orchid is here!</h3>
-                <span class="floatNotice-heaer-icon mdi material-icons" v-if="!expanded">expand_less</span>
-                <span class="floatNotice-heaer-icon mdi material-icons" v-if="expanded">expand_more</span>
+                <span class="floatNotice-heaer-icon material-symbols-outlined" v-if="!expanded">keyboard_arrow_up</span>
+                <span class="floatNotice-heaer-icon material-symbols-outlined" v-if="expanded">keyboard_arrow_down</span>
             </div>
             <div class="floatNotice-content" v-if="expanded">
                 <div class="flexList">
@@ -20,10 +20,10 @@
                             :to="{ name: 'article', params: { date: '2024-07-28', slug: 'vanilla-os-2-orchid---stable-release' } }"
                             class="btn btn--link btn--link-2 btn--inline">
                             <span>Release Post</span>
-                            <span class=" mdi material-icons-outlined">open_in_new</span>
+                            <span class=" material-symbols-outlined">open_in_new</span>
                         </router-link>
                         <button class="btn btn--primary" @click="goToDownload()">
-                            <span class="mdi material-icons-outlined">save_alt</span>
+                            <span class="material-symbols-outlined">download</span>
                             <span>Download Now</span>
                         </button>
                     </div>
@@ -67,4 +67,4 @@ export default defineComponent({
         }
     }
 });
-</script>
+</script>
diff --git a/src/components/ImageShowcase.vue b/src/components/ImageShowcase.vue
@@ -12,16 +12,16 @@
             </div>
             <div class="imageSlider-nav" v-if="articleImages.length > 1">
                 <div class="btn btn--secondary btn--circle" @click="prevImage" :disabled="currentIndex === 0">
-                    <span class="mdi material-icons">arrow_back</span>
+                    <span class="material-symbols-outlined">arrow_back</span>
                 </div>
                 <div class="btn btn--secondary btn--circle" @click="nextImage"
                     :disabled="currentIndex === articleImages.length - 1">
-                    <span class="mdi material-icons">arrow_forward</span>
+                    <span class="material-symbols-outlined">arrow_forward</span>
                 </div>
             </div>
         </div>
         <div class="btn btn--link btn--circle btn--close" @click="closeModal">
-            <span class="mdi material-icons">close</span>
+            <span class="material-symbols-outlined">close</span>
         </div>
     </div>
 </template>

diff --git a/src/components/NotMailNotChimp.vue b/src/components/NotMailNotChimp.vue
@@ -14,7 +14,7 @@
                         <div class="form-group-item">
                             <div class="form-field">
                                 <span class="form-field-icon">
-                                    <span class="mdi material-icons">email</span>
+                                    <span class="material-symbols-outlined">email</span>
                                 </span>
                                 <input type="email" name="EMAIL" class="form-field-input form-field-input--email"
                                     id="mce-EMAIL" value="" placeholder="Email address" required>
@@ -43,11 +43,11 @@
             </form>
         </div>
         <div class="btn btn--link btn--circle btn--close" @click="closeModal">
-            <span class="mdi material-icons">close</span>
+            <span class="material-symbols-outlined">close</span>
         </div>
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 

diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
@@ -36,7 +36,7 @@
             </div>
         </div>
         <div class="btn btn--link btn--circle btn--close" @click="closeModal">
-            <span class="mdi material-icons">close</span>
+            <span class="material-symbols-outlined">close</span>
         </div>
     </div>
 </template>

diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
@@ -11,7 +11,7 @@
                 <div class="timeline-progressbar-meter">
                     <div v-for="status in eventStatuses" :key="status.type" :class="getEventClass(status.type)"
                         :style="{ width: status.progress + '%' }">
-                        <span v-if="status.icon" class="mdi material-icons">{{ status.icon }}</span>
+                        <span v-if="status.icon" class="material-symbols-outlined">{{ status.icon }}</span>
                         <label>{{ status.type }}</label>
                     </div>
                 </div>
@@ -38,7 +38,7 @@
         </div>
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -156,4 +156,4 @@ export default defineComponent({
         },
     },
 });
-</script>
+</script>
diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
@@ -14,7 +14,7 @@
                         <transition name="fade">
                             <div class="searchBar-field">
                                 <div class="searchBar-icon" @click="toggleSearch">
-                                    <span class="mdi material-icons">
+                                    <span class="material-symbols-outlined">
                                         {{ isSearchActive ? 'close' : 'search' }}
                                     </span>
                                 </div>

diff --git a/src/layouts/Page.vue b/src/layouts/Page.vue
@@ -7,7 +7,7 @@
                 <section class="page-header">
                     <div class="page-nav" v-if="parentRoute?.name">
                         <router-link :to="{ name: parentRoute.name }" class="btn btn--link btn--inline">
-                            <span class="mdi material-icons">arrow_back</span>
+                            <span class="material-symbols-outlined">arrow_back</span>
                             <span v-if="parentRoute?.meta?.title">Back to {{ parentRoute.meta.title }}</span>
                         </router-link>
                     </div>

diff --git a/src/views/Article.vue b/src/views/Article.vue
@@ -4,7 +4,7 @@
             <div class="page-header">
                 <div class="page-nav" v-if="parentRoute?.name">
                     <router-link :to="{ name: parentRoute.name }" class="btn btn--link btn--inline">
-                        <span class="mdi material-icons">arrow_back</span>
+                        <span class="material-symbols-outlined">arrow_back</span>
                         <span v-if="parentRoute?.meta?.title">Back to {{ parentRoute.meta.title }}</span>
                     </router-link>
                 </div>
@@ -21,11 +21,11 @@
                     <h4>Don't miss the news</h4>
                     <h2>Subscribe to the Newsletter</h2>
                     <div class="btn btn--primary" @click="isNotMailNotChimpOpen = true">
-                        <span class="mdi material-icons">email</span>
+                        <span class="material-symbols-outlined">email</span>
                         <span>Subscribe via Email</span>
                     </div>
                     <a class="btn btn--primary" href="https://vanillaos.org/feed.xml">
-                        <span class="mdi material-icons">newspaper</span>
+                        <span class="material-symbols-outlined">newspaper</span>
                         <span>Subscribe via the RSS Feed</span>
                     </a>
                 </div>
@@ -63,19 +63,19 @@
             </div>
             <div class="toolBox-wrapper container">
                 <div class="toolBox-item toolBox-item--grow">
-                    <span class="toolBox-item-icon mdi material-icons">access_time</span>
+                    <span class="toolBox-item-icon material-symbols-outlined">access_time</span>
                     <span class="toolBox-item-text">{{ readingTime }}</span>
                 </div>
                 <div class="toolBox-item btn btn--link btn--inline" @click="shareModalOpen = true">
-                    <span class="toolBox-item-icon mdi material-icons">share</span>
+                    <span class="toolBox-item-icon material-symbols-outlined">share</span>
                     <span class="toolBox-item-label">Share</span>
                 </div>
                 <div class="toolBox-item btn btn--link btn--inline" @click="printArticle">
-                    <span class="toolBox-item-icon mdi material-icons">print</span>
+                    <span class="toolBox-item-icon material-symbols-outlined">print</span>
                     <span class="toolBox-item-label">Print</span>
                 </div>
                 <div class="toolBox-item btn btn--link btn--inline" @click="panelTocOpen = !panelTocOpen">
-                    <span class="toolBox-item-icon mdi material-icons">format_list_bulleted</span>
+                    <span class="toolBox-item-icon material-symbols-outlined">format_list_bulleted</span>
                     <span class="toolBox-item-label">Table of Contents</span>
                 </div>
             </div>

diff --git a/src/views/Blog.vue b/src/views/Blog.vue
@@ -16,7 +16,7 @@
                             :to="{ name: 'article', params: { date: article.date, slug: article.slug } }"
                             class="btn btn--primary">
                             <span>Read More</span>
-                            <span class="mdi material-icons-outlined">arrow_forward</span>
+                            <span class="material-symbols-outlined">arrow_forward</span>
                         </router-link>
                     </div>
                     <div v-if="index === 0" class="card-image card-image--right">
@@ -38,11 +38,11 @@
                         <img src="/assets/images/components/funnyletter.svg" alt="Subscribe to the Newsletter" />
                     </div>
                     <div class="btn btn--primary" @click="isNotMailNotChimpOpen = true">
-                        <span class="mdi material-icons">email</span>
+                        <span class="material-symbols-outlined">email</span>
                         <span>Subscribe via Email</span>
                     </div>
                     <a class="btn btn--primary" href="https://vanillaos.org/feed.xml">
-                        <span class="mdi material-icons">newspaper</span>
+                        <span class="material-symbols-outlined">newspaper</span>
                         <span>Subscribe via the RSS Feed</span>
                     </a>
                 </div>
@@ -64,7 +64,7 @@
                             :to="{ name: 'article', params: { date: article.date, slug: article.slug } }"
                             class="btn btn--primary">
                             <span>Read More</span>
-                            <span class="mdi material-icons-outlined">arrow_forward</span>
+                            <span class="material-symbols-outlined">arrow_forward</span>
                         </router-link>
                     </div>
                 </div>