Refactors the scss svg functions

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

1 files changed, 38 insertions, 14 deletions

diff --git a/core/css/functions.scss b/core/css/functions.scss
index 0815ba29ab6..5007c3bbe79 100644
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -19,31 +19,55 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
- 
+
+/**
+ * Removes the "#" from a color.
+ *
+ * @param string $color The color
+ * @return string The color without #
+ */
+@function remove-hash-from-color($color) {
+	$index: str-index(inspect($color), '#');
+	@if $index {
+		$color: str-slice(inspect($color), 2);
+	}
+	@return $color;
+}
+
+/**
+ * Calculates the URL to the svg under the SVG API.
+ *
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param int [$version] the version of the file
+ * @param bool [$core] search icon in core
+ * @return string The URL to the svg.
+ */
+@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
+	$color: remove-hash-from-color($color);
+	@if $core {
+		@return '#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	} @else {
+		@return '#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	}
+}
+
 /**
  * SVG COLOR API
- * 
+ *
  * @param string $icon the icon filename
  * @param string $dir the icon folder within /core/img if $core or app name
  * @param string $color the desired color in hexadecimal
  * @param int $version the version of the file
  * @param bool [$core] search icon in core
  *
- * @returns string the url to the svg api endpoint
+ * @returns A background image with the url to the set to the requested icon.
  */
 @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
-	// remove # from color
-	// inspect cast int to string
-	$index: str-index(inspect($color), '#');
-	@if $index {
-		$color: str-slice(inspect($color), 2);
-	}
+	$color: remove-hash-from-color($color);
 	$varName: "--icon-#{$icon}-#{$color}";
-	@if $core {
-		#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
-	} @else {
-		#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
-	}
+	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
 	background-image: var(#{$varName});
 }