Merge pull request #40 from shgysk8zer0/feature/37

Create and use SVG icons. Fixes #37

Author: shgysk8zer0

components/contact-dialog.php

@@ -8,39 +8,31 @@
 $dialog->append('a', null, [
 	'href' => 'mailto:editor@kvsun.com',
 	'title' => 'Email'
-])->append('img', null, [
-	'src' => 'images/octicons/svg/mail-read.svg',
-	'alt' => 'Email',
+])->append('svg', null, [
 	'width' => 60,
 	'height' => 60
-]);
+])->append('use', null, ['xlink:href' => 'images/icons.svg#mail-read']);
 $dialog->append('a', null, [
 	'href' => 'https://gitter.im/KVSun/ad-insertion',
 	'target' => '_blank',
 	'title' => 'Chat on Gitter'
-])->append('img', null, [
-	'src' => 'images/octicons/svg/comment.svg',
-	'alt' => 'Gitter',
+])->append('svg', null, [
 	'width' => 60,
 	'height' => 60
-]);
+])->append('use', null, ['xlink:href' => 'images/icons.svg#comment']);
 $dialog->append('a', null, [
 	'href' => 'https://github.com/KVSun/ad-insertion/',
 	'target' => '_blank',
 	'title' => 'GitHub'
-])->append('img', null, [
-	'src' => 'images/octicons/svg/mark-github.svg',
-	'alt' => 'GitHub',
+])->append('svg', null, [
 	'width' => 60,
 	'height' => 60
-]);
+])->append('use', null, ['xlink:href' => 'images/icons.svg#mark-github']);
 $dialog->append('a', null, [
 	'href' => 'https://github.com/KVSun/ad-insertion/issues/new/',
 	'target' => '_blank',
 	'title' => 'Open Issue'
-])->append('img', null, [
-	'src' => 'images/octicons/svg/issue-opened.svg',
-	'alt' => 'Open Issue',
+])->append('svg', null, [
 	'width' => 60,
 	'height' => 60
-]);
+])->append('use', null, ['xlink:href' => 'images/icons.svg#issue-opened']);

components/footer.php

@@ -11,18 +11,20 @@
 $footer->append('button', null, [
 	'title' => 'Contact info',
 	'data-show-modal' => '#contact-dialog'
-])->append('img', null, [
-	'src' => 'images/octicons/svg/person.svg',
-	'alt' => 'View contact info',
-	'height' => 50
-]);;
+])->append('svg', null, [
+	'height' => 50,
+	'width' => 50
+])->append('use', null, [
+	'xlink:href' => 'images/icons.svg#person'
+]);
 $footer->append('button', null, [
 	'title' => 'View README/documentation',
 	'data-show-modal' => "#{$readme->id}"
-])->append('img', null, [
-	'src' => 'images/octicons/svg/book.svg',
-	'alt' => 'View README',
-	'height' => 50
+])->append('svg', null, [
+	'height' => 50,
+	'width' => 50
+])->append('use', null, [
+	'xlink:href' => 'images/icons.svg#book'
 ]);
 unset($parsedown, $readme);
 require_once './components/contact-dialog.php';

components/head.php

@@ -8,9 +8,14 @@
 ]);
 $dom->head->append('link', null, [
 	'rel' => 'stylesheet',
-	'href' => 'stylesheets/styles/import.css',
+	'href' => 'stylesheets/styles/styles.css',
 	'media' => 'all'
 ]);
+$dom->head->append('link', null, [
+	'rel' => 'prefetch',
+	'href' => 'images/icons.svg',
+	'type' => 'image/svg+xml'
+]);
 $dom->head->append('script', null, [
 	'type' => 'application/javascript',
 	'src' => 'scripts/std-js/prototypes.es6',