Refactor: Demo refactor for vector icons and JS.

Author: dylan-sutton-chavez

demo/index.html

@@ -51,20 +51,13 @@ <h1 class="font-semibold">Edge Python Playground</h1>
                 </a>
 
                 <a href="https://github.com/dylan-sutton-chavez/edge-python/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 font-semibold hover:text-[#949494] transition" aria-label="View Edge Python on GitHub">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="size-4" fill="currentColor">
-                        <path d="M 33 29 C 31.203125 29 30 30.515625 30 33 C 30 35.484375 30.890625 38.046875 33 38 C 35.21875 37.949219 36.019531 35.777344 36 33 C 35.984375 30.515625 34.792969 29 33 29 Z M 44.261719 17.066406 C 44.535156 15.722656 44.652344 10.964844 42.679688 6 C 42.679688 6 38.148438 6.496094 31.296875 11.199219 C 29.863281 10.800781 27.429688 10.601563 25 10.601563 C 22.570313 10.601563 20.140625 10.800781 18.699219 11.195313 C 11.851563 6.496094 7.324219 6 7.324219 6 C 5.347656 10.964844 5.445313 15.609375 5.738281 17.066406 C 3.417969 19.585938 2 22.609375 2 26.742188 C 2 44.707031 16.90625 44.996094 20.667969 44.996094 C 21.519531 44.996094 23.210938 44.996094 25 45 C 26.789063 44.996094 28.484375 44.996094 29.332031 44.996094 C 33.09375 44.996094 48 44.707031 48 26.742188 C 48 22.609375 46.582031 19.585938 44.261719 17.066406 Z M 25.140625 43 L 25 43 C 15.570313 43 8.15625 41.660156 8.15625 32.496094 C 8.15625 30.300781 8.933594 28.265625 10.773438 26.574219 C 13.84375 23.753906 19.035156 25.246094 24.929688 25.246094 C 24.953125 25.246094 25.050781 25.246094 25.070313 25.246094 C 30.964844 25.246094 36.160156 23.757813 39.230469 26.574219 C 41.070313 28.265625 41.84375 30.300781 41.84375 32.496094 C 41.84375 41.660156 34.570313 43 25.140625 43 Z M 17 29 C 15.207031 29 14 31.015625 14 33.5 C 14 35.984375 15.207031 38 17 38 C 18.796875 38 20 35.984375 20 33.5 C 20 31.015625 18.796875 29 17 29 Z"/>
-                    </svg>
+                    <svg data-icon="./static/github.svg" class="size-4" aria-hidden="true" focusable="false"></svg>
                     <span>GitHub</span>
                 </a>
             </nav>
 
             <button button-show-sm class="bg-[#222222] hover:bg-[#2b2b2b] border border-[#2d2d2d] rounded-md flex items-center justify-center aspect-square transition">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true" focusable="false">
-                    <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
-                    <path d="M12 22V12"/>
-                    <polyline points="3.29 7 12 12 20.71 7"/>
-                    <path d="m7.5 4.27 9 5.15"/>
-                </svg>
+                <svg data-icon="./static/package.svg" class="size-4" aria-hidden="true" focusable="false"></svg>
             </button>
         </section>
 
@@ -77,9 +70,7 @@ <h1 class="font-semibold">Edge Python Playground</h1>
 
                     <span class="px-1.5 py-0.5 ml-auto">
                         <button id="run" type="button" disabled aria-label="Run Python code" class="ml-auto flex items-center gap-2 px-2.5 py-0.5 bg-[#d97757] text-[#ffffff] rounded-md hover:bg-[#c16644] disabled:opacity-40 disabled:cursor-not-allowed transition">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-2.5" aria-hidden="true" focusable="false">
-                                <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
-                            </svg>
+                            <svg data-icon="./static/play.svg" class="size-2.5" aria-hidden="true" focusable="false"></svg>
                             <span>Run</span>
                         </button>
                     </span>
@@ -113,13 +104,7 @@ <h2 class="sr-only">Terminal</h2>
 
         <div class="flex items-center gap-2 mb-4">
             <span>Standard Packages</span>
-
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 ml-auto" aria-hidden="true" focusable="false">
-                <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
-                <path d="M12 22V12"/>
-                <polyline points="3.29 7 12 12 20.71 7"/>
-                <path d="m7.5 4.27 9 5.15"/>
-            </svg>
+            <svg data-icon="./static/package.svg" class="size-4 ml-auto" aria-hidden="true" focusable="false"></svg>
         </div>
 
         <ul id="pkg-list" class="flex flex-col grow gap-3"></ul>