refactor: Expose svg icons as option

src/DPlayer.js

@@ -1,10 +1,10 @@
 import './DPlayer.scss';
 
 import utils, {isMobile} from './utils';
-import svg from './svg';
 import handleOption from './options';
 import i18n from './i18n';
 import html from './html';
+import Svg from './svg';
 import Danmaku from './danmaku';
 import Thumbnails from './thumbnails';
 import Events from './events';
@@ -33,6 +33,8 @@ class DPlayer {
 
         this.tran = new i18n(this.options.lang).tran;
 
+        this.icons = new Svg(this.options.icons);
+
         this.events = new Events();
 
         this.user = new User(this);
@@ -45,7 +47,7 @@ class DPlayer {
             this.container.classList.add('dplayer-mobile');
         }
 
-        this.container.innerHTML = html.main(this.options, index, this.tran);
+        this.container.innerHTML = html.main(this.options, index, this.tran, this.icons);
 
         const bar = {};
         bar.volumeBar = this.container.getElementsByClassName('dplayer-volume-bar-inner')[0];
@@ -279,13 +281,13 @@ class DPlayer {
 
         this.switchVolumeIcon = () => {
             if (this.volume() >= 0.95) {
-                volumeicon.innerHTML = svg('volume-up');
+                volumeicon.innerHTML = this.icons.get('volume-up');
             }
             else if (this.volume() > 0) {
-                volumeicon.innerHTML = svg('volume-down');
+                volumeicon.innerHTML = this.icons.get('volume-down');
             }
             else {
-                volumeicon.innerHTML = svg('volume-off');
+                volumeicon.innerHTML = this.icons.get('volume-off');
             }
         };
         const volumeMove = (event) => {
@@ -317,7 +319,7 @@ class DPlayer {
             }
             else {
                 this.video.muted = true;
-                volumeicon.innerHTML = svg('volume-off');
+                volumeicon.innerHTML = this.icons.get('volume-off');
                 this.updateBar('volume', 0, 'width');
             }
         });
@@ -347,7 +349,7 @@ class DPlayer {
         /**
          * setting
          */
-        const settingHTML = html.setting(this.tran);
+        const settingHTML = html.setting(this.tran, this.icons);
 
         // toggle setting box
         const settingIcon = this.container.getElementsByClassName('dplayer-setting-icon')[0];
@@ -794,11 +796,11 @@ class DPlayer {
     play () {
         this.paused = false;
         if (this.video.paused) {
-            this.bezel.innerHTML = svg('play');
+            this.bezel.innerHTML = this.icons.get('play');
             this.bezel.classList.add('dplayer-bezel-transition');
         }
 
-        this.playButton.innerHTML = svg('pause');
+        this.playButton.innerHTML = this.icons.get('pause');
 
         this.video.play();
         this.setTime();
@@ -816,12 +818,12 @@ class DPlayer {
         this.container.classList.remove('dplayer-loading');
 
         if (!this.video.paused) {
-            this.bezel.innerHTML = svg('pause');
+            this.bezel.innerHTML = this.icons.get('pause');
             this.bezel.classList.add('dplayer-bezel-transition');
         }
 
         this.ended = false;
-        this.playButton.innerHTML = svg('play');
+        this.playButton.innerHTML = this.icons.get('play');
         this.video.pause();
         this.clearTime();
         this.container.classList.remove('dplayer-playing');

src/html.js

@@ -1,7 +1,5 @@
-const svg = require('./svg.js');
-
 const html = {
-    main: (options, index, tran) => {
+    main: (options, index, tran, icons) => {
         let videos = ``;
         videos += html.video(true, options.video.pic, options.screenshot, options.preload, options.video.url);
         return `
@@ -51,11 +49,11 @@ const html = {
         <div class="dplayer-controller">
             <div class="dplayer-icons dplayer-icons-left">
                 <button class="dplayer-icon dplayer-play-icon">
-                    <span class="dplayer-icon-content">${svg('play')}</span>
+                    <span class="dplayer-icon-content">${icons.get('play')}</span>
                 </button>
                 <div class="dplayer-volume">
                     <button class="dplayer-icon dplayer-volume-icon">
-                        <span class="dplayer-icon-content">${svg('volume-down')}</span>
+                        <span class="dplayer-icon-content">${icons.get('volume-down')}</span>
                     </button>
                     <div class="dplayer-volume-bar-wrap" data-balloon-pos="up">
                         <div class="dplayer-volume-bar">
@@ -78,16 +76,16 @@ const html = {
                 ` : ``}
                 ${options.screenshot ? `
                 <a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="${tran('Screenshot')}" data-balloon-pos="up">
-                    <span class="dplayer-icon-content">${svg('camera')}</span>
+                    <span class="dplayer-icon-content">${icons.get('camera')}</span>
                 </a>
                 ` : ``}
                 <div class="dplayer-comment">
                     <button class="dplayer-icon dplayer-comment-icon" data-balloon="${tran('Send danmaku')}" data-balloon-pos="up">
-                        <span class="dplayer-icon-content">${svg('comment')}</span>
+                        <span class="dplayer-icon-content">${icons.get('comment')}</span>
                     </button>
                     <div class="dplayer-comment-box">
                         <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
-                            <span class="dplayer-icon-content">${svg('menu')}</span>
+                            <span class="dplayer-icon-content">${icons.get('menu')}</span>
                         </button>
                         <div class="dplayer-comment-setting-box">
                             <div class="dplayer-comment-setting-color">
@@ -135,22 +133,22 @@ const html = {
                         </div>
                         <input class="dplayer-comment-input" type="text" placeholder="${tran('Input danmaku, hit Enter')}" maxlength="30">
                         <button class="dplayer-icon dplayer-send-icon" data-balloon="${tran('Send')}" data-balloon-pos="up">
-                            <span class="dplayer-icon-content">${svg('send')}</span>
+                            <span class="dplayer-icon-content">${icons.get('send')}</span>
                         </button>
                     </div>
                 </div>
                 <div class="dplayer-setting">
                     <button class="dplayer-icon dplayer-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
-                        <span class="dplayer-icon-content">${svg('setting')}</span>
+                        <span class="dplayer-icon-content">${icons.get('setting')}</span>
                     </button>
                     <div class="dplayer-setting-box"></div>
                 </div>
                 <div class="dplayer-full">
                     <button class="dplayer-icon dplayer-full-in-icon" data-balloon="${tran('Web full screen')}" data-balloon-pos="up">
-                        <span class="dplayer-icon-content">${svg('full-in')}</span>
+                        <span class="dplayer-icon-content">${icons.get('full-in')}</span>
                     </button>
                     <button class="dplayer-icon dplayer-full-icon" data-balloon="${tran('Full screen')}" data-balloon-pos="up">
-                        <span class="dplayer-icon-content">${svg('full')}</span>
+                        <span class="dplayer-icon-content">${icons.get('full')}</span>
                     </button>
                 </div>
             </div>
@@ -201,12 +199,12 @@ const html = {
 
     video: (current, pic, screenshot, preload, url) => `<video class="dplayer-video ${current ? `dplayer-video-current"` : ``}" ${pic ? `poster="${pic}"` : ``} webkit-playsinline playsinline ${screenshot ? `crossorigin="anonymous"` : ``} ${preload ? `preload="${preload}"` : ``} src="${url}"></video>`,
 
-    setting: (tran) => ({
+    setting: (tran, icons) => ({
         'original': `
             <div class="dplayer-setting-item dplayer-setting-speed">
                 <span class="dplayer-label">${tran('Speed')}</span>
                 <div class="dplayer-toggle">
-                    ${svg('right')}
+                    ${icons.get('right')}
                 </div>
             </div>
             <div class="dplayer-setting-item dplayer-setting-loop">