Last active
February 17, 2024 23:33
-
-
Save aurooba/98b4f3530a55b546b76bef2c6ea4c179 to your computer and use it in GitHub Desktop.
Helper function to inline your SVG files in a WordPress theme or plugin and optionally also update the attributes. Only works with WordPress 6.2 and onwards. Blog post with explanation and usage instructions: https://aurooba.com/inline-svgs-in-your-wordpress-code-with-this-helper-function/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Get an SVG file from the imgs/ folder in the theme, update its attributes if necessary and return it as a string. | |
* | |
* @author Aurooba Ahmed | |
* @see https://aurooba.com/inline-svgs-in-your-wordpress-code-with-this-helper-function/ | |
* | |
* @param string $filename The name of the SVG file to get. | |
* @param array $attributes (optional) An array of attributes to add/modify to the SVG file. | |
* @param string $directory (optional) The directory to look for the SVG file in, defaults to 'imgs'. | |
* @return string|WP_Error The SVG file as a string or a WP_Error object if there was an error. | |
*/ | |
function get_svg( $filename, $attributes = array(), $directory = 'imgs' ) { | |
// Get the SVG file. | |
$svg = file_get_contents( get_stylesheet_directory() . '/' . $directory . '/' . $filename . '.svg' ); | |
$errors = new WP_Error(); | |
// If there was an error retrieving the SVG file, return a WP_Error object. | |
if ( ! $svg ) { | |
$svg_error_message = sprintf( | |
/* translators: %1$s: SVG file name, %2$s: SVG directory */ | |
__( 'There was an error retrieving the SVG file "%1$s" from the "%2$s" directory.', 'yourdomain' ), | |
$filename . '.svg', | |
$directory | |
); | |
$errors->add( | |
'svg_file_not_found', | |
$svg_error_message, | |
array( | |
'svg_file' => $filename . '.svg', | |
'svg_directory' => $directory, | |
) | |
); | |
return $errors; | |
} | |
// Initialize the SVG tag processor. | |
$update_svg = new WP_HTML_Tag_Processor( $svg ); | |
$update_svg->next_tag( 'svg' ); | |
// If there are attributes to add, add them. | |
if ( ! empty( $attributes ) ) { | |
foreach ( $attributes as $attribute => $value ) { | |
// If the attribute is 'class', add the class to the SVG file without overwriting the existing classes. | |
if ( 'class' === $attribute ) { | |
$update_svg->add_class( $value ); | |
continue; | |
} | |
// Otherwise, set/update the attribute with the new value | |
$update_svg->set_attribute( $attribute, $value ); | |
} | |
} | |
// Return the SVG string. | |
return $update_svg->get_updated_html(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A useful wrapper.