Better(?) icons

src/components/Bookshelf.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import FeatherIcon from '@/components/FeatherIcon.vue'
-
 defineProps({
 	clickable: {
 		type: Boolean,
@@ -15,8 +13,23 @@ defineEmits(['book:click'])
 		<div :class="{ clickable }"
 			 @click="() => clickable && $emit('book:click')">
 			<div>
-				<FeatherIcon :icon="'book'"
-							 :size="'3rem'"></FeatherIcon>
+				<svg version="1.1"
+					 style="fill:none; stroke:currentColor;"
+					 viewBox="0 0 135 135"
+					 id="header-icon"
+					 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+					 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+					 xmlns="http://www.w3.org/2000/svg"
+					 xmlns:svg="http://www.w3.org/2000/svg">
+					<defs id="defs12" />
+					<path style="fill:none;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round"
+						  d="" />
+					<path style="fill:none;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round"
+						  d="" />
+					<path style="fill:none;stroke-width:15px;stroke-linecap:square;stroke-linejoin:round"
+						  d="m 127.5,7.5 q -60,0 -60,60 0,60 -60,60 m 0,-60 v 0 -60 m 120,60 v 0 60 m -90,-120 v 0 30 m 60,60 v 0 30 m -60,-60 a 30,30 0 0 1 -30,30 m 90,-30 a 30,30 0 0 1 30,-30" />
+				</svg>
+
 				<h1 id="header">Bookshelf</h1>
 			</div>
 		</div>
@@ -41,13 +54,22 @@ defineEmits(['book:click'])
 
 			font-size: 3rem;
 			margin: 0;
-			margin-left: 0.5rem;
+			margin-left: 1rem;
 
 			@media screen and (max-width: 25rem) {
 				font-size: 2rem;
 			}
 		}
 
+		#header-icon {
+			width: 4rem;
+			height: 4rem;
+
+			@media screen and (max-width: 25rem) {
+				width: 3rem;
+				height: 3rem;
+			}
+		}
 
 	}
 }

src/components/Notifications/style.scss

@@ -1,6 +1,3 @@
-$BACKGROUND: #1f2229;
-$TEXT: #eeeeee;
-
 #book-notifications {
 	position: fixed;
 	bottom: 1rem;
@@ -17,8 +14,8 @@ $TEXT: #eeeeee;
 		padding: 1rem;
 		border-radius: 0.5rem;
 
-		background: $TEXT !important;
-		color: $BACKGROUND !important;
+		background: #eeeeee !important;
+		color: #1f2229 !important;
 
 		max-width: 80vw;
 		width: fit-content;