use i instead of img

Author: DylanVann

packages/docs/index.css

@@ -72,7 +72,7 @@
 
 :root.blue {
   --color: #2a4365;
-  --background: #EBF8FF;
+  --background: #ebf8ff;
 }
 
 :root {
@@ -164,7 +164,8 @@ input {
   display: none;
 }
 
-button, select {
+button,
+select {
   text-transform: capitalize;
   min-width: 120px;
   padding: 0.5rem 1rem;
@@ -210,10 +211,23 @@ svg .text-shadow {
 }
 
 .emoji {
-  display: inline;
+  display: inline-block;
+  background-size: contain;
   height: 1em;
   width: 1em;
   margin: 0 !important;
   margin-top: -0.25em !important;
   vertical-align: middle;
 }
+
+.emoji.light {
+  background-image: url('images/light.png');
+}
+
+.emoji.dark {
+  background-image: url('images/dark.png');
+}
+
+.emoji.blue {
+  background-image: url('images/blue.png');
+}

packages/docs/index.js

@@ -17,7 +17,7 @@ const toggleElements = document.querySelectorAll('.pdm-toggle')
 
 const modeToLabel = (m) => {
   if (m === 'dark' || m === 'light' || m === 'blue') {
-    return `<img class="emoji" src="images/${m}.png" alt=""> ${m}`
+    return `<i class="emoji ${m}"></i> ${m}`
   }
   return m
 }

packages/docs/index.pug

@@ -19,9 +19,9 @@ html(data-pdm="light dark blue")
         - var outline = ['focus:outline-none focus:shadow-outline focus:border-yellow-300']
         div.container.px-3.mb-3
             div.header.flex.items-center.justify-between.flex-col.my-3(class="md:flex-row md:my-6")
-                h1.mb-3.title(class="md:mb-0") <img class="emoji" src="images/dark.png" alt=""><img class="emoji" src="images/light.png" alt=""> Perfect Dark Mode
+                h1.mb-3.title(class="md:mb-0") <i class="emoji dark"></i><i class="emoji light"></i> Perfect Dark Mode
                 button.rounded-sm.pdm-toggle.flex.flex-col.items-center(style="visibility: hidden;" class=outline)
-                    span.label <img class="emoji" src="images/light.png" alt=""> color mode
+                    span.label <i class="emoji light"></i> color mode
                     span.text-xs (Click Me)
 
             div.flex.space-x-2.justify-center(class="md:justify-start")
@@ -53,7 +53,7 @@ html(data-pdm="light dark blue")
             // their system color mode.
             p You can set the color mode, this will be saved.
             button.rounded-sm.pdm-toggle(style="visibility: hidden;" class=outline)
-                span.label <img class="emoji" src="images/light.png" alt=""> color mode
+                span.label <i class="emoji light"></i> color mode
             p You can reset the color mode and fallback to system color mode.
             button.rounded-sm.pdm-reset(class=outline) Reset
             p For debugging and understanding here is the saved color mode and the OS color mode.