SVG helper

template_tags.php

<?php
/**
 * An svg template helper.
 *
 * @param  string  $name The SVG Name.
 * @param  boolean $echo Either return or echo the SVG Icon string.
 * @return html
 */
function tenup_svg_icon( $name, $echo = false ) {
	$file_path = THEME_PATH . '/dist/svg/' . $name . '.svg';

	if ( ! file_exists( $file_path ) ) {
		return;
	}

	$svg_icon = file_get_contents( $file_path ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown

	if ( $echo ) {
		echo wp_kses(
			$svg_icon,
			array(
				'svg'            => array(
					'version'           => true,
					'class'             => true,
					'fill'              => true,
					'height'            => true,
					'xml:space'         => true,
					'xmlns'             => true,
					'xmlns:xlink'       => true,
					'viewbox'           => true,
					'enable-background' => true,
					'width'             => true,
					'x'                 => true,
					'y'                 => true,
				),
				'path'           => array(
					'clip-rule'    => true,
					'd'            => true,
					'fill'         => true,
					'fill-rule'    => true,
					'stroke'       => true,
					'stroke-width' => true,
				),
				'g'              => array(
					'clip-rule'    => true,
					'd'            => true,
					'transform'    => true,
					'fill'         => true,
					'fill-rule'    => true,
					'stroke'       => true,
					'stroke-width' => true,
				),
				'polygon'        => array(
					'clip-rule'    => true,
					'd'            => true,
					'fill'         => true,
					'fill-rule'    => true,
					'stroke'       => true,
					'stroke-width' => true,
					'points'       => true,
				),
				'circle'         => array(
					'clip-rule'    => true,
					'd'            => true,
					'fill'         => true,
					'fill-rule'    => true,
					'stroke'       => true,
					'stroke-width' => true,
					'cx'           => true,
					'cy'           => true,
					'r'            => true,
				),
				'lineargradient' => array(
					'id'                => true,
					'gradientunits'     => true,
					'x'                 => true,
					'y'                 => true,
					'x2'                => true,
					'y2'                => true,
					'gradienttransform' => true,
				),
				'stop'           => array(
					'offset' => true,
					'style'  => true,
				),
			)
		);
		return;
	}

	return $svg_icon;
}

usage.php

<?php tenup_svg_icon( 'facebook', true ); ?>