navbar icon sets closes #584

NUXT/components/bottomNavigation.vue

@@ -19,8 +19,58 @@
         plain
       >
         <span v-if="$store.state.tweaks.navigationText" v-text="item.name" />
-        <!-- v-if="$store.state.tweaks.navigationIcons === 0" -->
+        <div
+          v-if="$store.state.tweaks.navigationIcons !== 0"
+          class="px-3"
+          :style="{
+            color:
+              tabSelection == i
+                ? 'var(--v-primary-base)'
+                : $vuetify.theme.dark
+                ? 'var(--v-background-lighten4)'
+                : 'var(--v-background-darken4)',
+          }"
+          :class="
+            tabSelection == i
+              ? $vuetify.theme.dark
+                ? 'tab primary darken-4'
+                : 'tab primary lighten-4'
+              : ''
+          "
+        >
+          <svg
+            v-if="$store.state.tweaks.navigationIcons === 1"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 52 52"
+            height="1.5rem"
+            width="1.5rem"
+          >
+            <use :href="`/${item.svg}.svg#main`" />
+          </svg>
+          <svg
+            v-if="$store.state.tweaks.navigationIcons === 2"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 22 22"
+            height="1.5rem"
+            width="1.5rem"
+          >
+            <use :href="`/${item.svg2}.svg#main`" />
+          </svg>
+          <svg
+            v-if="$store.state.tweaks.navigationIcons === 3"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 34 34"
+            height="1.5rem"
+            width="1.5rem"
+          >
+            <use :href="`/${item.svg3}.svg#main`" />
+          </svg>
+        </div>
         <v-icon
+          v-if="$store.state.tweaks.navigationIcons === 0"
           :color="
             tabSelection == i
               ? 'primary'
@@ -38,12 +88,6 @@
           v-text="item.icon"
         />
         <!-- + (tabSelection == i ? '' : '-outline') -->
-        <!-- <v-img
-          v-if="$store.state.tweaks.navigationIcons === 1"
-          :src="`/${item.img}.svg`"
-          :height="24"
-          :width="24"
-        /> -->
       </v-btn>
       <!-- <v-btn
         text
@@ -66,7 +110,9 @@ export default {
         {
           name: "",
           icon: "mdi-home",
-          img: "home",
+          svg: "home",
+          svg2: "fhome",
+          svg3: "chome",
           link: "/home",
         },
         // { name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
@@ -74,13 +120,17 @@ export default {
         {
           name: "",
           icon: "mdi-youtube-subscription",
-          img: "subs",
+          svg: "subs",
+          svg2: "fsubs",
+          svg3: "csubs",
           link: "/subscriptions",
         },
         {
           name: "",
           icon: "mdi-view-list",
-          img: "list",
+          svg: "list",
+          svg2: "flist",
+          svg3: "clist",
           link: "/library",
         },
         // { name: "Settings", icon: "mdi-menu", link: "/settings" },
@@ -114,6 +164,6 @@ export default {
 }
 .tab {
   padding: 0.1em 0.5em 0.1em 0.5em;
-  border-radius: 1em;
+  border-radius: 2rem;
 }
 </style>

NUXT/pages/mods/tweaks.vue

@@ -131,7 +131,6 @@
         v-model="roundTweak"
         class="pr-8 pl-4 pt-3 pb-0 background"
         :max="4"
-        :label="lang.radius"
         step=".25"
         thumb-size="64"
         :class="
@@ -142,6 +141,12 @@
         }"
         @input="$vuetube.haptics.hapticsImpactLight(0)"
       >
+        <template #label>
+          <div :class="roundTweak > 0 ? 'primary--text' : ''">
+            {{ lang.radius }}
+          </div>
+        </template>
+
         <template #thumb-label="{ value }">
           <div
             class="pa-4 background"
@@ -305,7 +310,7 @@
           borderRadius: `${roundTweak / 12}rem`,
         }"
         @click="
-          (navigationShift = !navigationShift),
+          navigationIcons < 1 ? (navigationShift = !navigationShift) : '',
             $vuetube.haptics.hapticsImpactLight(1)
         "
       >
@@ -347,14 +352,99 @@
           inset
         />
       </v-card>
-      <div
+      <div class="mb-1 d-flex flex-row">
-        style="width: 100%; font-weight: bold"
+        <v-card
-        class="primary my-1 background--text text-center"
+          flat
+          class="mr-1 pa-4 d-flex flex-row align-center background"
+          :class="
+            roundTweak > 0
+              ? $vuetify.theme.dark
+                ? 'lighten-1'
+                : 'darken-1'
+              : ''
+          "
+          style="width: 100%"
           :style="{
+            color: navigationIcons === 0 ? 'var(--v-primary-base)' : '',
             borderRadius: `${roundTweak / 12}rem`,
           }"
+          @click="(navigationIcons = 0), $vuetube.haptics.hapticsImpactLight(1)"
         >
-        icon sets coming soon
+          <div>MDI</div>
+          <v-spacer></v-spacer>
+          <v-icon
+            :class="navigationIcons === 0 ? 'primary--text' : ''"
+            class="ma-1"
+          >
+            mdi-home
+          </v-icon>
+          <v-icon
+            :class="navigationIcons === 0 ? 'primary--text' : ''"
+            class="ma-1"
+          >
+            mdi-youtube-subscription
+          </v-icon>
+          <v-icon
+            :class="navigationIcons === 0 ? 'primary--text' : ''"
+            class="ma-1"
+          >
+            mdi-view-list
+          </v-icon>
+        </v-card>
+        <v-card
+          flat
+          class="pa-4 d-flex flex-row align-center background"
+          :class="
+            roundTweak > 0
+              ? $vuetify.theme.dark
+                ? 'lighten-1'
+                : 'darken-1'
+              : ''
+          "
+          style="width: 100%"
+          :style="{
+            color: navigationIcons === 1 ? 'var(--v-primary-base)' : '',
+            borderRadius: `${roundTweak / 12}rem`,
+          }"
+          @click="
+            (navigationIcons = 1),
+              (navigationShift = false),
+              $vuetube.haptics.hapticsImpactLight(1)
+          "
+        >
+          <div>Material Symbols</div>
+          <v-spacer></v-spacer>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 48 48"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/home.svg#main" />
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 48 48"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/subs.svg#main" />
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 48 48"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/list.svg#main" />
+          </svg>
+        </v-card>
       </div>
       <div class="d-flex flex-row">
         <v-card
@@ -363,22 +453,53 @@
           :class="
             roundTweak > 0
               ? $vuetify.theme.dark
-                ? 'lighten-2'
+                ? 'lighten-1'
-                : 'darken-2'
+                : 'darken-1'
               : ''
           "
           style="width: 100%"
           :style="{
-            color: navigationIcons === 0 ? 'var(--v-primary-base)' : '',
+            color: navigationIcons === 2 ? 'var(--v-primary-base)' : '',
             borderRadius: `${roundTweak / 12}rem`,
           }"
+          @click="
+            (navigationIcons = 2),
+              (navigationShift = false),
+              $vuetube.haptics.hapticsImpactLight(1)
+          "
         >
-          <!-- @click="(navigationIcons = 0), $vuetube.haptics.hapticsImpactLight(1)" -->
+          <div>FluentUI Icons</div>
-          <div>MDI</div>
+          <v-spacer></v-spacer>
-          <v-spacer />
+          <svg
-          <v-icon class="ma-2">mdi-home</v-icon>
+            xmlns="http://www.w3.org/2000/svg"
-          <v-icon class="ma-2">mdi-youtube-subscription</v-icon>
+            fill="currentColor"
-          <v-icon class="ma-2">mdi-view-list</v-icon>
+            viewBox="0 0 24 24"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/fhome.svg#main" />
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/fsubs.svg#main" />
+          </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/flist.svg#main" />
+          </svg>
         </v-card>
         <v-card
           flat
@@ -386,40 +507,53 @@
           :class="
             roundTweak > 0
               ? $vuetify.theme.dark
-                ? 'lighten-2'
+                ? 'lighten-1'
-                : 'darken-2'
+                : 'darken-1'
               : ''
           "
           style="width: 100%"
           :style="{
-            color: navigationIcons === 1 ? 'var(--v-primary-base)' : '',
+            color: navigationIcons === 3 ? 'var(--v-primary-base)' : '',
             borderRadius: `${roundTweak / 12}rem`,
           }"
+          @click="
+            (navigationIcons = 3),
+              (navigationShift = false),
+              $vuetube.haptics.hapticsImpactLight(1)
+          "
         >
-          <!-- @click="(navigationIcons = 1), $vuetube.haptics.hapticsImpactLight(1)" -->
+          <div>IBM Carbon Icons</div>
-          <div>Material Symbols</div>
+          <v-spacer></v-spacer>
-          <v-spacer />
+          <svg
-          <v-img
+            xmlns="http://www.w3.org/2000/svg"
-            :class="$vuetify.theme.dark ? 'invert' : ''"
+            fill="currentColor"
-            class="ma-2"
+            viewBox="0 0 32 32"
-            src="/home.svg"
+            height="2rem"
-            height="22"
+            width="2rem"
-            width="22"
+            class="ma-1"
-          />
+          >
-          <v-img
+            <use href="/chome.svg#main" />
-            :class="$vuetify.theme.dark ? 'invert' : ''"
+          </svg>
-            class="ma-2"
+          <svg
-            src="/subs.svg"
+            xmlns="http://www.w3.org/2000/svg"
-            height="22"
+            fill="currentColor"
-            width="22"
+            viewBox="0 0 32 32"
-          />
+            height="2rem"
-          <v-img
+            width="2rem"
-            :class="$vuetify.theme.dark ? 'invert' : ''"
+            class="ma-1"
-            class="ma-2"
+          >
-            src="/list.svg"
+            <use href="/csubs.svg#main" />
-            height="22"
+          </svg>
-            width="22"
+          <svg
-          />
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 32 32"
+            height="2rem"
+            width="2rem"
+            class="ma-1"
+          >
+            <use href="/clist.svg#main" />
+          </svg>
         </v-card>
       </div>
     </v-card>

NUXT/static/chome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path fill="currentColor" d="M16.612 2.214a1.01 1.01 0 0 0-1.242 0L1 13.419l1.243 1.572L4 13.621V26a2.004 2.004 0 0 0 2 2h20a2.004 2.004 0 0 0 2-2V13.63L29.757 15L31 13.428ZM18 26h-4v-8h4Zm2 0v-8a2.002 2.002 0 0 0-2-2h-4a2.002 2.002 0 0 0-2 2v8H6V12.062l10-7.79l10 7.8V26Z"/></symbol><use href="#main"/></svg>

NUXT/static/clist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path d="M28 30H4a2.002 2.002 0 0 1-2-2v-8a2.002 2.002 0 0 1 2-2h24a2.002 2.002 0 0 1 2 2v8a2.002 2.002 0 0 1-2 2zM4 20h-.002L4 28h24v-8zm24-6H4a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h24a2.002 2.002 0 0 1 2 2v8a2.002 2.002 0 0 1-2 2zM4 4h-.002L4 12h24V4z"/></symbol><use href="#main"/></svg>

NUXT/static/csubs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><symbol id="main"><path d="M13 15v8l7-4l-7-4z"/><path d="M26 28H6a2.002 2.002 0 0 1-2-2V12a2.002 2.002 0 0 1 2-2h20a2.002 2.002 0 0 1 2 2v14a2.002 2.002 0 0 1-2 2zM6 12v14h20V12zm0-6h20v2H6zm2-4h16v2H8z"/></symbol><use href="#main"/></svg>

NUXT/static/fhome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><symbol id="main"><path d="M11.002 2.388a1.5 1.5 0 0 0-2.005 0l-5.5 4.942A1.5 1.5 0 0 0 3 8.445V15.5A1.5 1.5 0 0 0 4.5 17h2A1.5 1.5 0 0 0 8 15.5v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5V8.445a1.5 1.5 0 0 0-.497-1.115l-5.5-4.942Z"/></symbol><use href="#main"/></svg>

NUXT/static/flist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><symbol id="main"><path d="M2.249 2C1.559 2 1 2.56 1 3.25v9.495c0 .69.56 1.25 1.249 1.25h.5c.69 0 1.249-.56 1.249-1.25V3.249c0-.69-.56-1.249-1.25-1.249H2.25Zm3.997 0c-.69 0-1.25.56-1.25 1.25v9.495c0 .69.56 1.25 1.25 1.25h.5a1.25 1.25 0 0 0 1.248-1.25V3.249A1.25 1.25 0 0 0 6.745 2h-.5Zm5.726 2.777a1.249 1.249 0 0 0-1.571-.713l-.582.204a1.25 1.25 0 0 0-.746 1.645l2.937 7.304c.249.62.94.933 1.571.713l.582-.204a1.25 1.25 0 0 0 .746-1.646l-2.937-7.303Z"/></symbol><use href="#main"/></svg>

NUXT/static/fsubs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><symbol id="main"><path d="M7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7ZM2 6a2 2 0 0 1 2-2v12a2 2 0 0 1-2-2V6Zm14 10V4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z"/></symbol><use href="#main"/></svg>

NUXT/static/home.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></symbol><use href="#main" /></svg>

NUXT/static/list.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M9 22.5q-1.25 0-2.125-.875T6 19.5V13q0-1.25.875-2.125T9 10h30q1.25 0 2.125.875T42 13v6.5q0 1.25-.875 2.125T39 22.5ZM9 38q-1.25 0-2.125-.875T6 35v-6.5q0-1.25.875-2.125T9 25.5h30q1.25 0 2.125.875T42 28.5V35q0 1.25-.875 2.125T39 38Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M9 22.5q-1.25 0-2.125-.875T6 19.5V13q0-1.25.875-2.125T9 10h30q1.25 0 2.125.875T42 13v6.5q0 1.25-.875 2.125T39 22.5ZM9 38q-1.25 0-2.125-.875T6 35v-6.5q0-1.25.875-2.125T9 25.5h30q1.25 0 2.125.875T42 28.5V35q0 1.25-.875 2.125T39 38Z"/></symbol><use href="#main"/></svg>

NUXT/static/subs.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M15.5 7q-.65 0-1.075-.425Q14 6.15 14 5.5q0-.65.425-1.075Q14.85 4 15.5 4h17q.65 0 1.075.425Q34 4.85 34 5.5q0 .65-.425 1.075Q33.15 7 32.5 7Zm-6.55 6q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q8.3 10 8.95 10h30.1q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q39.7 13 39.05 13ZM7 44q-1.2 0-2.1-.9Q4 42.2 4 41V19q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.2-.9 2.1-.9.9-2.1.9Zm15.7-8.15 6.85-4.6q.7-.45.7-1.25t-.7-1.25l-6.85-4.6q-.75-.5-1.55-.075t-.8 1.325v9.25q0 .9.8 1.325.8.425 1.55-.125Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><symbol id="main"><path d="M15.5 7q-.65 0-1.075-.425Q14 6.15 14 5.5q0-.65.425-1.075Q14.85 4 15.5 4h17q.65 0 1.075.425Q34 4.85 34 5.5q0 .65-.425 1.075Q33.15 7 32.5 7Zm-6.55 6q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q8.3 10 8.95 10h30.1q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q39.7 13 39.05 13ZM7 44q-1.2 0-2.1-.9Q4 42.2 4 41V19q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.2-.9 2.1-.9.9-2.1.9Zm15.7-8.15 6.85-4.6q.7-.45.7-1.25t-.7-1.25l-6.85-4.6q-.75-.5-1.55-.075t-.8 1.325v9.25q0 .9.8 1.325.8.425 1.55-.125Z"/></symbol><use href="#main" /></svg>