Proof of concept #5593 - inline SVG icon for icon-contacts

Signed-off-by: Marin Treselj <marin@pixelipo.com>

6 files changed, 22 insertions, 15 deletions

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 20b84d2a0d3..1f18cc068c2 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -20,8 +20,8 @@
 		filter: invert(1);
 		filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
 	}
-	#contactsmenu .icon-contacts {
-		background-image: url('../../../core/img/places/contacts-dark.svg');
+	#contactsmenu .icon-contacts svg path {
+		fill: #000;
 	}
 	#settings .icon-settings-white {
 		background-image: url('../../../core/img/actions/settings-dark.svg');
diff --git a/core/css/icons.scss b/core/css/icons.scss
index b2702a29950..e694d807ba5 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -18,6 +18,20 @@
 	background-position: center;
 	min-width: 16px;
 	min-height: 16px;
+	display: inline-flex;
+	align-self: center;
+	position: relative;
+}
+
+[class^='icon-'] svg,
+[class*=' icon-'] svg {
+	height: 16px;
+	width: 16px;
+	vertical-align: -3px; // counter default DOM offset
+}
+
+.icon-white svg path {
+	fill: $color-primary-text;
 }
 
 .icon-breadcrumb {
@@ -445,14 +459,6 @@ img, object, video, button, textarea, input, select {
 	background-image: url('../img/places/calendar-dark.svg?v=1');
 }
 
-.icon-contacts {
-	background-image: url('../img/places/contacts.svg?v=1');
-}
-
-.icon-contacts-dark {
-	background-image: url('../img/places/contacts-dark.svg?v=1');
-}
-
 .icon-files {
 	background-image: url('../img/places/files.svg?v=1');
 }
diff --git a/core/img/places/contacts-dark.svg b/core/img/places/contacts-dark.svg
deleted file mode 100644
index 56ff262e91f..00000000000
--- a/core/img/places/contacts-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
diff --git a/core/img/places/contacts.svg b/core/img/places/contacts.svg
index 4e6206db09c..56ff262e91f 100644
--- a/core/img/places/contacts.svg
+++ b/core/img/places/contacts.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 6b9db9389ba..b3bb553d668 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -107,7 +107,9 @@
 					<button class="icon-close-white" type="reset"></button>
 				</form>
 				<div id="contactsmenu">
-					<div class="icon-contacts menutoggle"></div>
+					<div class="icon-contacts icon-white menutoggle">
+						<?php include('core/img/places/contacts.svg'); ?>
+					</div>
 					<div class="menu"></div>
 				</div>
 				<div id="settings">
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index 1a0a3dcb4d1..d58098257bd 100644
--- a/settings/js/federationsettingsview.js
+++ b/settings/js/federationsettingsview.js
@@ -181,14 +181,14 @@
 		_setFieldScopeIcon: function(field, scope) {
 			var $icon = this.$('#' + field + 'form > h2 > span');
 			$icon.removeClass('icon-password');
-			$icon.removeClass('icon-contacts-dark');
+			$icon.removeClass('icon-contacts');
 			$icon.removeClass('icon-link');
 			switch (scope) {
 				case 'private':
 					$icon.addClass('icon-password');
 					break;
 				case 'contacts':
-					$icon.addClass('icon-contacts-dark');
+					$icon.addClass('icon-contacts');
 					break;
 				case 'public':
 					$icon.addClass('icon-link');