got rid of star icon causing errors

AaronFlore · Jun 7, 2023 · 93a4364 · 93a4364
1 parent eb797e3
commit 93a4364
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/src/components/MusicPlayer.vue b/src/components/MusicPlayer.vue
@@ -7,7 +7,6 @@ import ShuffleVariant from 'vue-material-design-icons/ShuffleVariant.vue';
 import HeartOutline from 'vue-material-design-icons/HeartOutline.vue';
 import MicrophoneVariant from 'vue-material-design-icons/MicrophoneVariant.vue';
 import Plus from 'vue-material-design-icons/Plus.vue';
-import starOutline from 'vue-material-design-icons/starOutline.vue';
 import PictureInPictureBottomRight from 'vue-material-design-icons/PictureInPictureBottomRight.vue';
 import Play from 'vue-material-design-icons/Play.vue';
 import Pause from 'vue-material-design-icons/Pause.vue';
@@ -212,7 +211,7 @@ watch(() => currentTrack.value.id, (val) => {
         <div class="flex items-center w-1/4 justify-end pr-6 ">
             <div class="flex items-center">
                 <div class="p-1.5 ml-2 hover:bg-[#5a5a5a] hover:bg-opacity-50 rounded-full cursor-pointer">
-                    <starOutline fillColor="#FFFFFF" :size="20" />
+                    <HeartOutline fillColor="#FFFFFF" :size="20" />
                 </div>
                 <div 
                     @mouseenter="isVolumeHover = true" 

diff --git a/src/components/SongRow.vue b/src/components/SongRow.vue
@@ -53,19 +53,19 @@
         </div>
         <div class="flex items-center">
             <div class="rounded-full p-1 mr-1">
-                <starOutline fillColor="#CCCCCC" :size="26"/>
+                <HeartOutline fillColor="#CCCCCC" :size="26"/>
             </div>
                         <div class="rounded-full p-1 mr-1">
-                <starOutline fillColor="#CCCCCC" :size="26"/>
+                <HeartOutline fillColor="#CCCCCC" :size="26"/>
             </div>
                         <div class="rounded-full p-1 mr-1">
-                <starOutline fillColor="#CCCCCC" :size="26"/>
+                <HeartOutline fillColor="#CCCCCC" :size="26"/>
             </div>
                         <div class="rounded-full p-1 mr-1">
-                <starOutline fillColor="#CCCCCC" :size="26"/>
+                <HeartOutline fillColor="#CCCCCC" :size="26"/>
             </div>
             <div class="rounded-full p-1 mr-6">
-                <starOutline fillColor="#CCCCCC" :size="26"/>
+                <HeartOutline fillColor="#CCCCCC" :size="26"/>
             </div>
                 <div class="rounded-full p-1 mr-1">
                 <DotsHorizontal fillColor="#CCCCCC" :size="26"/>
@@ -91,7 +91,6 @@
   import MicrophoneVariant from 'vue-material-design-icons/MicrophoneVariant.vue';
   import Play from 'vue-material-design-icons/Play.vue';
   import Pause from 'vue-material-design-icons/Pause.vue';
-  import starOutline from 'vue-material-design-icons/starOutline.vue';
 
   import { useSongStore } from '../stores/song'
   import { storeToRefs } from 'pinia';

diff --git a/src/components/StarOutline.vue b/src/components/StarOutline.vue
@@ -0,0 +1,38 @@
+<template>
+  <span v-bind="$attrs"
+        :aria-hidden="!title"
+        :aria-label="title"
+        class="material-design-icon star-outline-icon"
+        role="img"
+        @click="$emit('click', $event)">
+    <svg :fill="fillColor"
+         class="material-design-icon__svg"
+         :width="size"
+         :height="size"
+         viewBox="0 0 24 24">
+      <path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z">
+        <title v-if="title">{{ title }}</title>
+      </path>
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "StarOutlineIcon",
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}
+</script>
diff --git a/vite.config.js b/vite.config.js
@@ -9,12 +9,5 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  },
-  build: {
-    rollupOptions: {
-      external: [
-        'vue-material-design-icons/starOutline.vue'
-      ]
-    }
   }
 })