adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

further inline svg handling refinements

Browse source
This commit is contained in:
Adam Piontek 2021-07-25 21:56:25 -04:00
parent 9c38938bf4
commit 5e3c175ec0
6 changed files with 50 additions and 99 deletions

59
custom-functions.php
View file

@ -1,37 +1,52 @@
<?php
/**
* Function to support inline SVG icons by name with div wrapper
* example inline SVG function args array supported keys
*/
// function svg_icon_use($icon_name, $div_class = '') {
// $div_class .= ' icon';
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
// return $output . "</svg></div>";
// };
// array(
// 'div_class' => 'icon baseline', // or 'img logo' or something
// 'svg_class' => '',
// 'svg_title' => '',
// 'role_img' => false,
// 'aria_hidden' => true
// )
// function svg_logo_use($icon_name, $div_class = '', $svg_title = 'Logo') {
// $div_class .= ' logo';
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" role=\"img\"><title>$svg_title</title>";
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
// return $output . "</svg></div>";
// };
/**
* inline SVG function
* desired SVG must exist in ./dist/images,
* preferably by import in main.js and processing by webpack
*/
function inline_svg( $svg_name, $args = array() ) {
// load args or defaults
$div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : '';
$svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : '';
$svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : '';
$svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false;
$svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true;
function inline_svg(
$svg_name,
$div_class = 'icon',
$svg_class = '',
$svg_title = '',
$svg_role_img = false,
$svg_aria_hidden = true) {
// load initial svg content
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
$to_replace = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
$svg_content = str_replace($to_replace, $svg_class, $svg_content);
// set svg class
$class_target = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
// replace svg class
$svg_content = str_replace($class_target, $svg_class, $svg_content);
// handle if role=img
$svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;
// handle if aria_hidden
$svg_content = $svg_aria_hidden ? str_replace('<svg ', '<svg aria-hidden="true" ', $svg_content) : $svg_content;
// handle svg title
$svg_title = $svg_title == '' ? '' : '<title>' . $svg_title . '</title>';
$svg_content = substr_replace($svg_content, $svg_title, strpos($svg_content,'>') + 1, 0);
// handle if div class
$svg_content = $div_class == '' ? $svg_content : '<div class="' . $div_class . '">' . $svg_content . '</div>';
// return assembled svg (or div>svg)
return $svg_content;
};