move icons off of font awesome

index.html

···
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/logo.png" />
-    <script src="https://kit.fontawesome.com/9a203e5ff1.js" crossorigin="anonymous"></script>
     <title>VRChat Photo Manager</title>
   </head>
 

public/icon/angle-down-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>

public/icon/angle-up-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"/></svg>

public/icon/arrow-left-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>

public/icon/arrow-right-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>

public/icon/arrows-rotate-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>

public/icon/caret-down-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>

public/icon/check-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>

public/icon/copy-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>

public/icon/minus-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>

public/icon/square-regular.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>

public/icon/trash-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>

public/icon/x-solid.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>

src-tauri/Cargo.lock

···
 
 [[package]]
 name = "vrcpm-rs"
-version = "0.1.3"
+version = "0.1.4"
 dependencies = [
  "dirs",
  "mslnk",

src-tauri/Cargo.toml

···
 [package]
 name = "vrcpm-rs"
-version = "0.1.3"
+version = "0.1.4"
 description = "VRChat Photo Manager"
 authors = ["_phaz"]
 edition = "2021"

src/Components/NavBar.tsx

···
           <Show when={props.loggedIn().loggedIn}>
             <div class="user-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
           </Show>
-          <i class="fa-solid fa-caret-down account-dropdown"></i>
+          <div class="icon">
+            <img draggable="false" src="/icon/caret-down-solid.svg"></img>
+          </div>
         </div>
         <div class="control-lights">
-          <i class="fa-solid fa-minus" onClick={() => appWindow.minimize()}></i>
-          <i class="fa-regular fa-square" onClick={() => appWindow.toggleMaximize()}></i>
-          <i class="fa-solid fa-x" onClick={() => appWindow.hide()}></i>
+          <div class="light">
+            <img draggable="false" src="/icon/minus-solid.svg" onClick={() => appWindow.minimize()}></img>
+          </div>
+          <div class="light">
+            <img draggable="false" src="/icon/square-regular.svg" onClick={() => appWindow.toggleMaximize()}></img>
+          </div>
+          <div class="light">
+            <img draggable="false" src="/icon/x-solid.svg" onClick={() => appWindow.hide()}></img>
+          </div>
         </div>
       </div>
 

src/Components/PhotoList.tsx

···
         </div>
       </div>
 
-      <div class="scroll-to-top" ref={( el ) => scrollToTop = el} onClick={() => targetScroll = 0}><i class="fa-solid fa-angle-up"></i></div>
-      <div class="reload-photos" onClick={() => props.setConfirmationBox("Are you sure you want to reload all photos? This can cause the application to slow down while it is loading...", reloadPhotos)}><i class="fa-solid fa-arrows-rotate"></i></div>
+      <div class="scroll-to-top" ref={( el ) => scrollToTop = el} onClick={() => targetScroll = 0}>
+        <div class="icon">
+          <img draggable="false" src="/icon/angle-up-solid.svg"></img>
+        </div>
+      </div>
+      <div class="reload-photos" onClick={() => props.setConfirmationBox("Are you sure you want to reload all photos? This can cause the application to slow down while it is loading...", reloadPhotos)}>
+        <div class="icon" style={{ width: '17px' }}>
+          <img draggable="false" src="/icon/arrows-rotate-solid.svg"></img>
+        </div>
+      </div>
 
       <canvas class="photo-container" ref={( el ) => photoContainer = el}></canvas>
       <canvas class="photo-container-bg" ref={( el ) => photoContainerBG = el}></canvas>

src/Components/PhotoViewer.tsx

···
 
   return (
     <div class="photo-viewer" ref={( el ) => viewer = el}>
-      <div class="viewer-close viewer-button" onClick={() => props.setCurrentPhotoView(null)}><i class="fa-solid fa-x"></i></div>
+      <div class="viewer-close viewer-button" onClick={() => props.setCurrentPhotoView(null)}>
+        <div class="icon" style={{ width: '10px', margin: '0' }}>
+          <img draggable="false" src="/icon/x-solid.svg"></img>
+        </div>
+      </div>
       <div class="image-container" ref={( el ) => imageViewer = el}></div>
 
-      <div class="prev-button" onClick={() => props.setPhotoNavChoice('prev')}><i class="fa-solid fa-arrow-left"></i></div>
-      <div class="next-button" onClick={() => props.setPhotoNavChoice('next')}><i class="fa-solid fa-arrow-right"></i></div>
+      <div class="prev-button" onClick={() => props.setPhotoNavChoice('prev')}>
+        <div class="icon" style={{ width: '15px', margin: '0' }}>
+          <img draggable="false" src="/icon/arrow-left-solid.svg"></img>
+        </div>
+      </div>
+
+      <div class="next-button" onClick={() => props.setPhotoNavChoice('next')}>
+        <div class="icon" style={{ width: '15px', margin: '0' }}>
+          <img draggable="false" src="/icon/arrow-right-solid.svg"></img>
+        </div>
+      </div>
 
       <div class="photo-tray" ref={( el ) => photoTray = el}></div>
 
       <div class="photo-tray-close"
         onClick={() => closeTray()}
         ref={( el ) => photoTrayCloseBtn = el}
-      ><i class="fa-solid fa-angle-down"></i></div>
+      >
+        <div class="icon" style={{ width: '12px', margin: '0' }}>
+          <img draggable="false" src="/icon/angle-down-solid.svg"></img>
+        </div>
+      </div>
 
       <div class="control-buttons" ref={( el ) => photoControls = el}>
         <div class="viewer-button"
···
             });
           }}
         >
-          <i class="fa-solid fa-copy"></i>
+          <div class="icon" style={{ width: '12px', margin: '0' }}>
+            <img draggable="false" src="/icon/copy-solid.svg"></img>
+          </div>
         </div>
         <div class="viewer-button" style={{ width: '50px' }}
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '70px', height: '30px', 'margin-left': '10px', 'margin-right': '10px' })}
···
           ref={( el ) => trayButton = el}
           onClick={() => openTray()}
         >
-          <i class="fa-solid fa-angle-up"></i>
+          <div class="icon" style={{ width: '12px', margin: '0' }}>
+            <img draggable="false" src="/icon/angle-up-solid.svg"></img>
+          </div>
         </div>
         <div class="viewer-button"
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
           onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
           onClick={() => props.setConfirmationBox("Are you sure you want to delete this photo?", () => { invoke("delete_photo", { path: props.currentPhotoView().path, token: localStorage.getItem("token")! }); })}
         >
-          <i class="fa-solid fa-trash"></i>
+          <div class="icon" style={{ width: '12px', margin: '0' }}>
+            <img draggable="false" src="/icon/trash-solid.svg"></img>
+          </div>
         </div>
       </div>
     </div>

src/Components/SettingsMenu.tsx

···
 
             <label for="start-in-bg-check">
               <div class="selection-box">
-                <i class="fa-solid fa-check"></i>
+                <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                  <img draggable="false" src="/icon/check-solid.svg"></img>
+                </div>
               </div>
             </label>
           </div>
···
 
             <label for="start-with-win-check">
               <div class="selection-box">
-                <i class="fa-solid fa-check"></i>
+                <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                  <img draggable="false" src="/icon/check-solid.svg"></img>
+                </div>
               </div>
             </label>
           </div>
···
 
             <label for="transparent-check">
               <div class="selection-box">
-                <i class="fa-solid fa-check"></i>
+                <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                  <img draggable="false" src="/icon/check-solid.svg"></img>
+                </div>
               </div>
             </label>
           </div>
···
             <div class="account-profile">
               <div class="account-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
               <div class="account-desc">
-                <div class="reload-photos" onClick={() => refreshAccount()} style={{ opacity: 1 }}><i class="fa-solid fa-arrows-rotate"></i></div>
+                <div class="reload-photos" onClick={() => refreshAccount()} style={{ opacity: 1 }}>
+                  <div class="icon" style={{ width: '17px' }}>
+                    <img draggable="false" src="/icon/arrows-rotate-solid.svg"></img>
+                  </div>
+                </div>
                 <h2>{ props.loggedIn().username }</h2>
 
                 <Show when={props.storageInfo().sync}>

src/styles.css

···
   align-items: center;
 }
 
-.control-lights i{
+.control-lights .light{
   font-size: 20px;
   text-align: center;
   color: white;
···
   justify-content: center;
   align-items: center;
   height: 50px;
+  filter: invert(100%);
 }
 
-.control-lights i:hover{
-  background: #0005;
+.control-lights .light:hover{
+  background: #fff5;
+}
+
+.control-lights .light img{
+  width: 25%;
+}
+
+.icon{
+  width: 15px;
+  filter: invert(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 .user-pfp{

vite.config.ts

···
     watch: {
       ignored: [ 'src-tauri/**' ]
     }
-  },
+  }
 }));