feat: Added a option to set icons color

src/DPlayer.scss

@@ -257,10 +257,6 @@
         color: #fff;
         pointer-events: none;
 
-        .dplayer-fill {
-            fill: rgba(255, 255, 255, .8);
-        }
-
         .dplayer-bezel-icon {
             position: absolute;
             top: 50%;

src/options.js

@@ -83,6 +83,7 @@ module.exports = (options) => {
                 'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
             ]
         },
+        iconColor: '#ffffff',
         contextmenu: []
     };
     for (const defaultKey in defaultOption) {

src/svg.js

@@ -3,18 +3,19 @@
 */
 
 class Svg {
-    constructor (icons) {
-        this.icons = icons;
+    constructor (options) {
+        this.icons = options.icons;
+        this.iconColor = options.iconColor;
     }
 
     get (type) {
         // Some SVG icons don't change icon size using viewBox. Ex.: Material Icons
-        // To fix these cases a optional index was added to icon object
+        // To fix these cases a optional index was added to icon object when change icon
+        // size is necessary
 
         return `
-            <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.icons[type][3] || '100%'}" height="${this.icons[type][3] || '100%'}" version="1.1" viewBox="${this.icons[type][0]}">
-                <use xlink:href="#dplayer-${type}"></use>
-                <path class="dplayer-fill" d="${this.icons[type][1]}" id="dplayer-${type}"></path>
+            <svg xmlns="http://www.w3.org/2000/svg" width="${this.icons[type][2] || '100%'}" height="${this.icons[type][2] || '100%'}" version="1.1" viewBox="${this.icons[type][0]}">
+                <path class="dplayer-fill" style="fill:${this.iconColor}" d="${this.icons[type][1]}" id="dplayer-${type}"></path>
             </svg>
         `;
     }