Replace lightbox icons

src/scripts/lightbox.js

@@ -1,3 +1,6 @@
+import { icon } from '@fortawesome/fontawesome-svg-core';
+import { getIcon } from './icons.js';
+
 const defaults = {
 	albumLabel: 'Image %1 of %2',
 	alwaysShowNavOnTouchDevices: false,
@@ -14,6 +17,8 @@ const defaults = {
 	onClosing: () => {}
 };
 
+
+
 class Lightbox {
 	constructor() {
 		this.album = [];
@@ -59,6 +64,10 @@ class Lightbox {
 		this.start(link);
 	}
 
+	renderIcon(name) {
+		return icon(getIcon(name), {classes: ['spot-icon', name]}).html;
+	}
+
 	build() {
 		if (document.getElementById('lightbox')) return;
 
@@ -71,14 +80,14 @@ class Lightbox {
 						<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
 						<div class="lb-nav">
 							<div class="lb-prev-area">
-								<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>
+								<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
 							</div>
 							<div class="lb-next-area">
-								<a class="lb-next" aria-label="Next image" href="" role="button"></a>
+								<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
 							</div>
 						</div>
 						<div class="lb-loader">
-							<a class="lb-cancel" href="#"></a>
+							<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
 						</div>
 					</div>
 				</div>
@@ -88,7 +97,7 @@ class Lightbox {
 							<span class="lb-caption"></span>
 						</div>
 						<div class="lb-closeContainer">
-							<a class="lb-close" role="button"></a>
+							<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
 						</div>
 					</div>
 				</div>