davidwebca · January 26, 2021 19:50 · Jan 26, 2021 · Jan 20, 2021 · Aug 4, 2017
diff --git a/svg-functions.php b/svg-functions.php
@@ -10,13 +10,16 @@
 /**
  * Helper function for fetching SVG icons
  *
- * @param  string $icon  Name of the SVG file in the icons directory
+ * @param  string $icon  Name of the SVG file in the icons directory. Allows .svg extension or not
  * @return string        Inline SVG markup
  */
 function wp_svg( $icon = '', $class = '', $attrs = array()) {
     if ( ! $icon ) {
         return;
     }
+
+    $icon = preg_replace('/.svg$/', '', $icon);
+
     $path = get_template_directory() . '/assets/icons/' . $icon . '.svg';
 
     $default_classes = [

diff --git a/svg-functions.php b/svg-functions.php
@@ -1,38 +1,37 @@
 <?php
-// Throw this in your theme and include it in your functions.php file 
+/**
+ * Include inline svg with + allow custom attributes as php function arguments
+ * 
+ * Based on 
+ * https://gist.github.com/kingkool68/6d72977fe8c82eeb9a85295ac3623cde#file-svg-functions-php
+ * 
+ */
 
 /**
  * Helper function for fetching SVG icons
  *
  * @param  string $icon  Name of the SVG file in the icons directory
  * @return string        Inline SVG markup
  */
-function wp_svg_icon( $icon = '' ) {
-	if ( ! $icon ) {
-		return;
-	}
-	$path = get_template_directory() . '/assets/icons/' . $icon . '.svg';
-	$args = [
-		'css_class' => 'icon icon-' . $icon,
-	];
-	return wp_get_svg( $path, $args );
-}
+function wp_svg( $icon = '', $class = '', $attrs = array()) {
+    if ( ! $icon ) {
+        return;
+    }
+    $path = get_template_directory() . '/assets/icons/' . $icon . '.svg';
 
-/**
- * Helper function for fetching SVG logos
- *
- * @param  string $logo  Name of the SVG file in the logos directory
- * @return string        Inline SVG markup
- */
-function wp_svg_logo( $logo = '' ) {
-	if ( ! $logo ) {
-		return;
-	}
-	$path = get_template_directory() . '/assets/img/logos/' . $logo . '.svg';
-	$args = [
-		'css_class' => 'logo logo-' . sanitize_title( $logo ),
-	];
-	return wp_get_svg( $path, $args );
+    $default_classes = [
+        'icon',
+        'icon-' . $icon,
+        $class
+    ];
+
+    $defaults = [
+        'class' => implode(' ', $default_classes)
+    ];
+
+    $attrs = wp_parse_args( $attrs, $defaults );
+
+    return wp_get_svg( $path, $attrs);
 }
 
 /**
@@ -42,24 +41,25 @@ function wp_svg_logo( $logo = '' ) {
  * @param  array  $args  Args to modify attributes of the SVG
  * @return string        Inline SVG markup
  */
-function wp_get_svg( $path = '', $args = array() ) {
-	if ( ! $path ) {
-		return;
-	}
-	$defaults = [
-		'role' => 'image',
-		'css_class' => '',
-	];
-	$args = wp_parse_args( $args, $defaults );
-	$role_attr = $args['role'];
-	$css_class = $args['css_class'];
-	if ( is_array( $css_class ) ) {
-		$css_class = implode( ' ', $css_class );
-	}
-	if ( file_exists( $path ) ) {
-	 $svg = file_get_contents( $path );
-	 $svg = preg_replace( '/(width|height)="[\d\.]+"/i', '', $svg );
-	 $svg = str_replace( '<svg ', '<svg class="' . esc_attr( $css_class ) . '" role="' . esc_attr( $role_attr ) . '" ', $svg );
-	 return $svg;
-	}
-}
+function wp_get_svg( $path = '', $attrs = array() ) {
+    if ( ! $path ) {
+        return;
+    }
+    $defaults = [
+        'role' => 'image',
+        'class' => '',
+        'aria-labelledby' => 'title'
+    ];
+    $attrs = wp_parse_args( $attrs, $defaults );
+    $role_attr = $attrs['role'];
+    $class = $attrs['class'];
+    if ( is_array( $class ) ) {
+        $class = implode( ' ', $class );
+    }
+    if ( file_exists( $path ) ) {
+     $svg = file_get_contents( $path );
+     $svg = preg_replace( '/(width|height)="[\d\.]+"/i', '', $svg );
+     $svg = str_replace( '<svg ', '<svg '. implode(' ', array_map(function ($k, $v) { return $k .'="'. esc_attr($v) .'"'; }, array_keys($attrs), $attrs)) .' ', $svg );
+     return $svg;
+    }
+}
diff --git a/svg-functions.php b/svg-functions.php
@@ -0,0 +1,65 @@
+<?php
+// Throw this in your theme and include it in your functions.php file 
+
+/**
+ * Helper function for fetching SVG icons
+ *
+ * @param  string $icon  Name of the SVG file in the icons directory
+ * @return string        Inline SVG markup
+ */
+function wp_svg_icon( $icon = '' ) {
+	if ( ! $icon ) {
+		return;
+	}
+	$path = get_template_directory() . '/assets/icons/' . $icon . '.svg';
+	$args = [
+		'css_class' => 'icon icon-' . $icon,
+	];
+	return wp_get_svg( $path, $args );
+}
+
+/**
+ * Helper function for fetching SVG logos
+ *
+ * @param  string $logo  Name of the SVG file in the logos directory
+ * @return string        Inline SVG markup
+ */
+function wp_svg_logo( $logo = '' ) {
+	if ( ! $logo ) {
+		return;
+	}
+	$path = get_template_directory() . '/assets/img/logos/' . $logo . '.svg';
+	$args = [
+		'css_class' => 'logo logo-' . sanitize_title( $logo ),
+	];
+	return wp_get_svg( $path, $args );
+}
+
+/**
+ * Generic helper to modify the markup for a given path to an SVG
+ *
+ * @param  string $path  Absolute path to the SVG file
+ * @param  array  $args  Args to modify attributes of the SVG
+ * @return string        Inline SVG markup
+ */
+function wp_get_svg( $path = '', $args = array() ) {
+	if ( ! $path ) {
+		return;
+	}
+	$defaults = [
+		'role' => 'image',
+		'css_class' => '',
+	];
+	$args = wp_parse_args( $args, $defaults );
+	$role_attr = $args['role'];
+	$css_class = $args['css_class'];
+	if ( is_array( $css_class ) ) {
+		$css_class = implode( ' ', $css_class );
+	}
+	if ( file_exists( $path ) ) {
+	 $svg = file_get_contents( $path );
+	 $svg = preg_replace( '/(width|height)="[\d\.]+"/i', '', $svg );
+	 $svg = str_replace( '<svg ', '<svg class="' . esc_attr( $css_class ) . '" role="' . esc_attr( $role_attr ) . '" ', $svg );
+	 return $svg;
+	}
+}