From 41706475d78ae6e82e91e7cbf0d6091a429bfbd7 Mon Sep 17 00:00:00 2001
From: Grzegorz Tomicki <gtomik@gmail.com>
Date: Thu, 29 Oct 2020 13:10:47 +0100
Subject: [PATCH] feat: Expand path (#7)

---
 docs/index.html       | 33 +++++++++++++++++++++------------
 docs/speedDial.min.js |  2 +-
 sources/index.js      | 26 ++++++++++++++++++--------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index ca813b4..ced3e56 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,15 +16,21 @@
     <script>
       var speedIcons = {
         iconPlus: {
-          name: 'plus',
+          name: 'menu',
           viebox: '0 0 24 24',
-          path: ['M3 6h18v2.016h-18v-2.016zM3 12.984v-1.969h18v1.969h-18zM3 18v-2.016h18v2.016h-18z'],
+          path: [{
+            fill: '#fff',
+            d: 'M3 6h18v2.016h-18v-2.016zM3 12.984v-1.969h18v1.969h-18zM3 18v-2.016h18v2.016h-18z',
+          }],
           color: '#1976d2'
         },
         iconTop: {
           name: 'top',
           viebox: '0 0 24 24',
-          path: ['M7.406 15.422L6 14.016l6-6 6 6-1.406 1.406L12 10.828z'],
+          path: [{
+            fill: '#fff',
+            d: 'M7.406 15.422L6 14.016l6-6 6 6-1.406 1.406L12 10.828z'
+          }],
           color: 'red'
         },
         iconsSmall: [
@@ -33,9 +39,10 @@
             name: 'lightning',
             viebox: '0 0 32 32',
             className: 'lightning',
-            path: [
-              'M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z'
-            ]
+            path: [{
+              fill: 'red',
+              d: 'M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z'
+            }]
           },
           {
             id: 2,
@@ -44,9 +51,10 @@
             url: 'https://www.msn.com/en-us/Weather',
             target: '_blank',
             className: 'wind',
-            path: [
-              'M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z'
-            ]
+            path: [{
+              fill: '#8bc34a',
+              d: 'M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z'
+            }]
           },
           {
             id: 3,
@@ -55,9 +63,10 @@
             url: 'https://www.theweathernetwork.com/ca/weather/ontario/mississauga',
             target: '_blank',
             className: 'sun',
-            path: [
-              'M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z'
-            ]
+            path: [{
+              fill: 'blue',
+              d: 'M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z'
+            }]
           }
         ]
       };
diff --git a/docs/speedDial.min.js b/docs/speedDial.min.js
index 40d6c04..88e6202 100644
--- a/docs/speedDial.min.js
+++ b/docs/speedDial.min.js
@@ -1 +1 @@
-var SpeedDial=function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function n(n){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?e(Object(r),!0).forEach((function(e){t(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(r,t))}))}return n}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],o=!0,r=!1,i=void 0;try{for(var a,s=t[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);o=!0);}catch(t){r=!0,i=t}finally{try{o||null==s.return||s.return()}finally{if(r)throw i}}return n}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}return function e(r){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),t(this,"element",(function(t){var e=t.type,n=t.data,r=t.el,i=t.style,a=t.viebox,s=t.url,c=t.target,l=t.path,p="svg"===e?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);if(n){var u=o(n,2),d=u[0],f=u[1];p.setAttribute("data-".concat(d),f)}if(r&&p.setAttribute("class",r),i&&p.setAttribute("style",i),s&&(p.setAttribute("href",s),p.setAttribute("rel","noopener")),c&&p.setAttribute("target",c),a&&p.setAttributeNS(null,"viewBox",a),l)for(var h=0;h<l.length;h++){var b=document.createElementNS("http://www.w3.org/2000/svg","path");b.setAttributeNS(null,"d",l[h]),p.appendChild(b)}return p})),t(this,"select",(function(t){return document.querySelector(".".concat(t))})),t(this,"iconPlus",(function(t){var e=i.select("speed-dial");e.appendChild(i.element({el:"button-root",type:"button",style:"background-color: ".concat(t.color)})),e.insertAdjacentElement("beforeend",i.element({el:"action",type:"div",data:["direction",i.options.data.direction]})),i.select("button-root").appendChild(i.element({el:"icon icon__plus",type:"svg",viebox:t.viebox,path:t.path}))})),t(this,"topButtons",(function(t){i.select("speed-dial").insertAdjacentElement("afterend",i.element({el:i.options.topBtn,type:"div",data:["position",i.options.data.position]})),i.select(i.options.topBtn).insertAdjacentElement("beforeend",i.element({el:"top-container",type:"div",style:"background-color:".concat(t.color,";")})),i.select("top-container").appendChild(i.element({el:"icon__top",type:"svg",viebox:t.viebox,path:[t.path]})),i.options.position&&i.handleEvent()})),t(this,"path",(function(t,e){for(var n="background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='".concat(e,"'"),o="",r=0;r<t.length;r++)o+="%3E%3Cpath d='".concat(t[r],"'%3E%3C/path");return"".concat(n+o,"%3E%3C/svg%3E")})),t(this,"iconSmall",(function(t){for(var e=i.select("action"),o=t.sort((function(t,e){return t.id-e.id})),r=i.options.steps*o.length+50,a=0;a<o.length;a++){var s=o[a],c=s.className,l=s.name,p=s.viebox,u=s.url,d=s.path,f=s.target,h=c||"",b=i.element({el:"item ".concat(h),type:"div",style:"transition-delay: ".concat(r,"ms;")}),v={};v=u?{type:"a",url:u,target:f}:{type:"div"};var m=i.element(n({el:"button--small"},v)),y=i.element({type:"div",style:i.path(d,p)});m.appendChild(y),y.insertAdjacentHTML("afterend","<span style='".concat(i.tipPosition(i.options.data.position,i.options.data.direction),"'>").concat(l,"</span>")),b.appendChild(m),e.appendChild(b),r-=i.options.steps}})),t(this,"tipPosition",(function(t,e){var n=i.options.sPos,o="left"===t.split("-")[1]?"left":"right";return"top-left"===t||"top-right"===t?"bottom"===e?"".concat(o,": ").concat(n,"px"):"top: ".concat(n,"px"):"top"===e?"".concat(o,": ").concat(n,"px"):"bottom: ".concat(n,"px")})),t(this,"showScrollButton",(function(){var t=i.options,e=t.position,n=t.topBtn,o=i.select(n),r=window.pageYOffset>e;o.classList[r?"add":"remove"]("show"),o.previousSibling.classList[r?"add":"remove"]("margin-bottom")})),t(this,"handleEvent",(function(){window.addEventListener("scroll",i.showScrollButton),window.addEventListener("load",i.showScrollButton),i.select(i.options.topBtn).addEventListener("click",(function(t){t.preventDefault(),window.scrollTo({top:0,behavior:"smooth"})}))}));var a=n(n({},{sPos:60,steps:50,stepTrans:100,position:null,topBtn:"speed-dial__top"}),r);this.options=a,document.body.insertAdjacentElement("beforeend",this.element({el:"speed-dial",type:"div",data:["position",a.data.position]})),this.iconPlus(a.icons.iconPlus),this.iconSmall(a.icons.iconsSmall),"bottom-left"!==a.data.position&&"bottom-right"!==a.data.position||this.topButtons(a.icons.iconTop)}}();
+var SpeedDial=function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function n(n){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?e(Object(r),!0).forEach((function(e){t(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(r,t))}))}return n}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],o=!0,r=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(o=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);o=!0);}catch(t){r=!0,i=t}finally{try{o||null==c.return||c.return()}finally{if(r)throw i}}return n}(t,e)||i(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||i(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}return function e(i){var a=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),t(this,"element",(function(t){var e=t.type,n=t.data,r=t.el,i=t.style,a=t.viebox,c=t.url,s=t.target,l=t.path,p="svg"===e?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);if(n){var u=o(n,2),d=u[0],f=u[1];p.setAttribute("data-".concat(d),f)}if(r&&p.setAttribute("class",r),i&&p.setAttribute("style",i),c&&(p.setAttribute("href",c),p.setAttribute("rel","noopener")),s&&p.setAttribute("target",s),a&&p.setAttributeNS(null,"viewBox",a),l)for(var b=function(t){var e=document.createElementNS("http://www.w3.org/2000/svg","path"),n=Array.isArray(l[t])?l[t][t]:l[t];Object.keys(n).map((function(t){e.setAttributeNS(null,t,n[t])})),p.appendChild(e)},h=0;h<l.length;h++)b(h);return p})),t(this,"select",(function(t){return document.querySelector(".".concat(t))})),t(this,"iconBig",(function(t){var e=a.select("speed-dial");e.appendChild(a.element({el:"button-root",type:"button",style:"background-color: ".concat(t.color)})),e.insertAdjacentElement("beforeend",a.element({el:"action",type:"div",data:["direction",a.options.data.direction]})),a.select("button-root").appendChild(a.element({el:"icon icon__plus",type:"svg",viebox:t.viebox,path:t.path}))})),t(this,"topButtons",(function(t){a.select("speed-dial").insertAdjacentElement("afterend",a.element({el:a.options.topBtn,type:"div",data:["position",a.options.data.position]})),a.select(a.options.topBtn).insertAdjacentElement("beforeend",a.element({el:"top-container",type:"div",style:"background-color:".concat(t.color,";")})),a.select("top-container").appendChild(a.element({el:"icon__top",type:"svg",viebox:t.viebox,path:r(t.path)})),a.options.position&&a.handleEvent()})),t(this,"path",(function(t,e){for(var n="",o="",r=function(r){n="background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='".concat(e,"'");var i="";Object.keys(t[r]).map((function(e){var n="fill"===e?t[r][e].replace("#","%23"):t[r][e];i+=" ".concat(e,"='").concat(n,"'")})),o+="%3E%3Cpath ".concat(i,"%3E%3C/path")},i=0;i<t.length;i++)r(i);return"".concat(n).concat(o,"%3E%3C/svg%3E")})),t(this,"iconSmall",(function(t){for(var e=a.select("action"),o=t.sort((function(t,e){return t.id-e.id})),i=a.options.steps*o.length+50,c=0;c<o.length;c++){var s=o[c],l=s.className,p=s.name,u=s.viebox,d=s.url,f=s.path,b=s.target,h=l||"",m=a.element({el:"item ".concat(h),type:"div",style:"transition-delay: ".concat(i,"ms;")}),v={};v=d?{type:"a",url:d,target:b}:{type:"div"};var y=a.element(n({el:"button--small"},v)),g=a.element({type:"div",style:a.path(r(f),u)});y.appendChild(g),g.insertAdjacentHTML("afterend","<span style='".concat(a.tipPosition(a.options.data.position,a.options.data.direction),"'>").concat(p,"</span>")),m.appendChild(y),e.appendChild(m),i-=a.options.steps}})),t(this,"tipPosition",(function(t,e){var n=a.options.sPos,o="left"===t.split("-")[1]?"left":"right";return"top-left"===t||"top-right"===t?"bottom"===e?"".concat(o,": ").concat(n,"px"):"top: ".concat(n,"px"):"top"===e?"".concat(o,": ").concat(n,"px"):"bottom: ".concat(n,"px")})),t(this,"showScrollButton",(function(){var t=a.options,e=t.position,n=t.topBtn,o=a.select(n),r=window.pageYOffset>e;o.classList[r?"add":"remove"]("show"),o.previousSibling.classList[r?"add":"remove"]("margin-bottom")})),t(this,"handleEvent",(function(){window.addEventListener("scroll",a.showScrollButton),window.addEventListener("load",a.showScrollButton),a.select(a.options.topBtn).addEventListener("click",(function(t){t.preventDefault(),window.scrollTo({top:0,behavior:"smooth"})}))}));var c=n(n({},{sPos:60,steps:50,stepTrans:100,position:null,topBtn:"speed-dial__top"}),i);this.options=c,document.body.insertAdjacentElement("beforeend",this.element({el:"speed-dial",type:"div",data:["position",c.data.position]})),this.iconBig(c.icons.iconPlus),this.iconSmall(c.icons.iconsSmall),"bottom-left"!==c.data.position&&"bottom-right"!==c.data.position||this.topButtons(c.icons.iconTop)}}();
diff --git a/sources/index.js b/sources/index.js
index 8d07b2f..d5c5891 100644
--- a/sources/index.js
+++ b/sources/index.js
@@ -21,7 +21,7 @@ class SpeedDial {
       })
     );
 
-    this.iconPlus(option.icons.iconPlus);
+    this.iconBig(option.icons.iconPlus);
     this.iconSmall(option.icons.iconsSmall);
 
     if (
@@ -64,7 +64,10 @@ class SpeedDial {
           'http://www.w3.org/2000/svg',
           'path'
         );
-        newpath.setAttributeNS(null, 'd', path[i]);
+        const pathType = Array.isArray(path[i]) ? path[i][i] : path[i];
+        Object.keys(pathType).map((key) => {
+          newpath.setAttributeNS(null, key, pathType[key]);
+        });
         element.appendChild(newpath);
       }
     }
@@ -75,7 +78,7 @@ class SpeedDial {
     return document.querySelector(`.${el}`);
   };
 
-  iconPlus = (actionButton) => {
+  iconBig = (actionButton) => {
     const speedDialBox = this.select('speed-dial');
     speedDialBox.appendChild(
       this.element({
@@ -132,7 +135,7 @@ class SpeedDial {
         el: 'icon__top',
         type: 'svg',
         viebox: options.viebox,
-        path: [options.path],
+        path: [...options.path],
       })
     );
 
@@ -142,12 +145,19 @@ class SpeedDial {
   };
 
   path = (paths, viebox) => {
-    const svgElement = `background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='${viebox}'`;
+    let svgElement = '';
     let path = '';
     for (let i = 0; i < paths.length; i++) {
-      path += `%3E%3Cpath d='${paths[i]}'%3E%3C/path`;
+      svgElement = `background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='${viebox}'`;
+
+      let element = '';
+      Object.keys(paths[i]).map((key) => {
+        let val = key === 'fill' ? paths[i][key].replace('#', '%23') : paths[i][key];
+        element += ` ${key}='${val}'`;
+      });
+      path += `%3E%3Cpath ${element}%3E%3C/path`;
     }
-    return `${svgElement + path}%3E%3C/svg%3E`;
+    return `${svgElement}${path}%3E%3C/svg%3E`;
   };
 
   iconSmall = (icons) => {
@@ -184,7 +194,7 @@ class SpeedDial {
 
       const speedDialItemByttonDiv = this.element({
         type: 'div',
-        style: this.path(path, viebox),
+        style: this.path([...path], viebox),
       });
 
       speedDialItemButton.appendChild(speedDialItemByttonDiv);