fix: change path to sprite; issues: vitejs/vite#4454 ; add icon to favicon;

Author: Andrey Golovachev (moonzaki)

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "home": "https://moonzaki.github.io/notes-app",
+  "home": "https://moonzaki.github.io/notes-app/",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/components/NoteAddButton/NoteAddButton.jsx

@@ -1,11 +1,12 @@
 import NoteButton from '../NoteButton/NoteButton';
 import './NoteAddButton.scss';
 
-function NoteAddButton({clearForm}) {
+function NoteAddButton({ clearForm }) {
+  const baseUrl = import.meta.env.BASE_URL;
   return (
     <NoteButton className="note-add" onClick={clearForm}>
       <svg width="20" height="21" viewBox="0 0 20 21">
-        <use href="/sprite.svg#add-svg"></use>
+        <use href={`${baseUrl ? baseUrl + '/' : ''}sprite.svg#add-svg`}></use>
       </svg>
       New memory
     </NoteButton>

src/components/NoteForm/NoteForm.jsx

@@ -86,7 +86,7 @@ function NoteForm({ callback, data, setCurrentItem, delItem }) {
     }
   };
 
-  
+  const baseUrl = import.meta.env.BASE_URL;
 
   return (
     <form className={styles['note-form']} onSubmit={addNoteItem}>
@@ -105,13 +105,13 @@ function NoteForm({ callback, data, setCurrentItem, delItem }) {
           className={styles.delete}
           onClick={() => { delCurrentItem(data); }}>
           <svg width="20" height="20" viewBox="0 0 20 20">
-            <use href='/sprite.svg#delete-svg'></use>
+            <use href={`${baseUrl ? baseUrl + '/' : ''}sprite.svg#delete-svg`}></use>
           </svg>
         </Button>}
       </div>
       <div className={styles['input-wrapper']}>
         <svg width="18" height="18" viewBox="0 0 18 18">
-          <use href="/sprite.svg#date-svg"></use>
+          <use href={`${baseUrl ? baseUrl + '/' : ''}sprite.svg#date-svg`}></use>
         </svg>
         <p>Date</p>
         <Input
@@ -124,7 +124,7 @@ function NoteForm({ callback, data, setCurrentItem, delItem }) {
       </div>
       <div className={styles['input-wrapper']}>
         <svg width="18" height="18" viewBox="0 0 18 18">
-          <use href="/sprite.svg#tag-svg"></use>
+          <use href={`${baseUrl ? baseUrl + '/' : ''}sprite.svg#tag-svg`}></use>
         </svg>
         <p>Tags</p>
         <input