add more control

src/icons/index.js

@@ -1,9 +1,13 @@
 import loading from './loading.svg';
+import playBig from './play-big.svg';
 import play from './play.svg';
+import pause from './pause.svg';
 
 const icons = {
   loading,
-  play
+  playBig,
+  play,
+  pause
 };
 
 function creatDomFromSvg(map) {

src/icons/pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+    <path d="M7 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zM15 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2z"></path>
+</svg>

src/icons/play-big.svg

@@ -0,0 +1,6 @@
+<svg style="width: 60px; height: 60px; filter: drop-shadow(0px 1px 1px black);" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="info"/>
+    <g id="icons">
+        <path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16   C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z" id="video"/>
+    </g>
+</svg>

src/icons/play.svg

@@ -1,3 +1,3 @@
-<svg id="plyr-play" width="16px" height="18px">
-  <path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+  <path d="M17.982 9.275L8.06 3.27A2.013 2.013 0 0 0 5 4.994v12.011a2.017 2.017 0 0 0 3.06 1.725l9.922-6.005a2.017 2.017 0 0 0 0-3.45z"></path>
+</svg>