From 306bf260560001187598f848c9937e2e222da81b Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 21 Dec 2017 18:47:53 +0100
Subject: [PATCH] #1762 @2

---
 js/libs/fluidbook/fluidbook.nav.js   | 32 +++++++++++++++++++++++++++-
 js/libs/fluidbook/fluidbook.utils.js |  2 +-
 style/nav-horizontal.less            |  4 ++--
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 01883c45..bed1937a 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -473,10 +473,38 @@ FluidbookNav.prototype = {
                     continue;
                 }
                 var linkIcon;
+
                 if (extraIcon.indexOf('.') === -1) {
                     linkIcon = getSpriteIcon(extraIcon);
                 } else {
-                    linkIcon = '<img class="nav-icon" src="data/images/' + extraIcon + '">';
+                    if (extraIcon.indexOf('.svg') >= 0) {
+                        if (getSpriteIcon('extra-extra' + n) == '') {
+                            $.ajax({
+                                url: 'data/images/' + extraIcon,
+                                type: 'GET',
+                                dataType: 'xml',
+                                success: function (data) {
+                                    var svg = $(data).find('svg');
+                                    var viewbox = $(svg).attr('viewBox');
+                                    var maing = $(svg).children('g').eq(0);
+                                    if ($("#extra-extra" + n).length == 0) {
+                                        $("#svg-container").append('<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="extra-extra' + n + '" viewBox="' + viewbox + '">' + maing.html() + '</symbol></svg>');
+                                    }
+                                    $('#spare_extra' + n).replaceWith(getSpriteIcon('extra-extra' + n));
+                                },
+                            });
+
+                            linkIcon = '<div id="spare_extra' + n + '"></div>';
+                        } else {
+                            linkIcon = getSpriteIcon('extra-extra' + n);
+                        }
+                    } else {
+                        linkIcon = '<img class="nav-icon" src="data/images/' + extraIcon + '">';
+                    }
+                }
+
+                if (extraURL.indexOf(':') === -1) {
+                    extraURL = 'link:' + extraURL;
                 }
 
                 if (extraURL.indexOf('link:') === 0) {
@@ -492,11 +520,13 @@ FluidbookNav.prototype = {
                     if (foundLink == undefined) {
                         continue;
                     }
+                    console.log(foundLink);
                     link = $(foundLink).find('a').append(linkIcon);
                     if (navType == 'menu') {
                         var tooltip = $(link).data('tooltip');
                         $(link).append('<span class="menu-item-title">' + $(link).data('tooltip') + '</span>');
                     }
+
                     link = $(link).get(0).outerHTML;
                 }
 
diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js
index 0c52a7a2..9ff2ff9e 100644
--- a/js/libs/fluidbook/fluidbook.utils.js
+++ b/js/libs/fluidbook/fluidbook.utils.js
@@ -56,7 +56,7 @@ function getSpriteIcon(icon, attrs) {
         iconSymbol = $('svg symbol#' + icon);
 
     if (iconSymbol.length == 0) {
-        console.warn('Unable to find sprite icon: ' + icon);
+        //console.warn('Unable to find sprite icon: ' + icon);
         return ''; // Bail out because symbol doesn't exist
     }
 
diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 2c074fbf..8cdfcf48 100644
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -71,9 +71,9 @@
 		}
 	}
 
-	.svg-icon {
-		width: 25px;
+	img, .svg-icon {
 		height: 25px;
+		width: auto;
 
 		margin: 0 17px;
 		color: @icon-color;
-- 
2.39.5