Update TODO

TODO.md

@@ -9,7 +9,7 @@
  - [ ] Cast Support
  - [x] Allow for multiple players on one page
  - [ ] 360 Video Support
- - [ ] Remove Iconoir's Vue package, replace with their SVG code
+ - [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
  - [ ] Milieu Settings
    - [ ] Mode (Default | Fullscreen)
    - [ ] Speed (Default | Instant | Slow)

package.json

@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.61",
+  "version": "0.4.62",
   "exports": {
     ".": "./index.ts"
   },
@@ -27,7 +27,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@iconoir/vue": "^7.8.0",
     "astro": "^4.14.2"
   },
   "scripts": {

src/Controls.astro

@@ -6,16 +6,8 @@ const {
     SeekColor = '#ff274d'
 } = Astro.props
 
-// Icons
-import {
-    RewindSolid,
-    Enlarge,
-    ForwardSolid,
-    PlaySolid,
-    Refresh,
-    SoundHighSolid,
-    MultiWindow
-} from "@iconoir/vue"
+// Icons and Styles
+import './Iconoir.css'
 ---
 
 <div class="video-controls">
@@ -23,17 +15,17 @@ import {
         <p>{Title}</p>
     </div>
     <div class="vc-bottom">
-        <button style="display: none" id="vc-playagain"><Refresh /></button>
+        <button style="display: none" id="vc-playagain"><i class="iconoir-refresh"></i></button>
         <div class="vc-start">
-            <button id="vc-playpause"><PlaySolid /></button>
+            <button id="vc-playpause"><i class="iconoir-play-solid"></i></button>
             {Live ?
                 null
                 :
-                <button id="vc-backwards"><RewindSolid /></button>
-                <button id="vc-forwards"><ForwardSolid /></button>
+                <button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
+                <button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
             }
             <div class="vc-volume-controller">
-                <button><SoundHighSolid/></button>
+                <button><i class="iconoir-sound-high-solid"></i></button>
                 <div class="vc-volume-controller-input">
                     <span style={`background: lightblue`} class="vc-volume-bar"></span>
                     <input type="range" min="0" max="1.0" step="0.01"/>
@@ -63,8 +55,8 @@ import {
             }
             <slot/>
             <!-- The requestPictureInPicture() function is not supported in Firefox -->
-            <button id="vc-pip" onclick="Player.requestPictureInPicture()"><MultiWindow/></button>
-            <button id="vc-fullscreen"><Enlarge /></button>
+            <button id="vc-pip" onclick="Player.requestPictureInPicture()"><i class="iconoir-multiwindow"></i>/button>
+            <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
         </div>
     </div>
 </div>

src/Player.astro

@@ -19,9 +19,9 @@ import Controller from './Controls/Controller.astro'
 import Seek from './Controls/Seek.astro'
 import Sync from './Controls/Sync.astro'
 
-// Styles
+// Icons and Styles
 import './Index.scss'
-import { Settings } from '@iconoir/vue'
+import './Iconoir.css'
 ---
 
 <div class="video-container" id={"zorn-player-" + PlayerName}>
@@ -31,7 +31,7 @@ import { Settings } from '@iconoir/vue'
     {Milieu ? <MilieuEffect/> : null }
     {SettingsMenu ?
         <Controls PlayerName={PlayerName} Live={Live}>
-            <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
+            <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
             <slot/>
         </Controls>
         :