Some functions:
function gomo_media( $file ) {
return get_template_directory_uri() . '/assets/media/' . $file;
}
function gomo_icon( $file ) {
return get_template_directory_uri() . '/assets/svg-icons/' . $file;
}
function gomo_svg( $file ) {
return file_get_contents(get_stylesheet_directory_uri() . '/assets/svg-icons/' . $file );
}And to use in a template:
<img src="<?php echo esc_url( gomo_media("404.png") ); ?>" alt="" class="" width="200" height="auto"/>
<span class="icon svg-white" aria-hidden="true"><img src="<?php echo esc_url( gomo_icon("calendar-alt.svg") ); ?>" alt="" class=" " width="20" height="20"/></span>
<div style="fill: #ff0; width:20px;"><?php echo gomo_svg("calendar-alt.svg"); ?></div>This could be better for the SVG function:
<?php
function gomo_svg( $file ) {
$svg_path = '/assets/svg-icons/';
if ( file_exists( get_stylesheet_directory() . $path . $file ) ) {
return file_get_contents( get_stylesheet_directory_uri() . $path . $file );
}
return '';
}This approach could be taken further to include accessabilty and uniformed HTML etc, example:
<?php gomo_icon("calendar-alt.svg", "20", "svg-white"); ?>
<?php
function gomo_icon( $file, $size, $fill ) {
$path = '/assets/svg-icons/';
$url = get_template_directory_uri() . $path . $file;
?>
<span class="icon <?php echo $fill ?>" aria-hidden="true"><img src="<?php echo $url; ?>" alt="" class="" width="<?php echo $size ?>" height="auto"/></span>
<?php
}