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

improve & simplify inline svg handling

Browse source
This commit is contained in:
Adam Piontek 2021-07-25 09:44:34 -04:00
parent ac64cafac7
commit 9c38938bf4
3 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
assets/css/_svg-icons.scss
View file

@ -20,20 +20,29 @@
position: relative; position: relative;
} }
// for navbar-brand logo, could be used for other non-icon SVGs with an extra class to controll the size // // for navbar-brand logo, could be used for other non-icon SVGs with an extra class to controll the size
.logo { // .logo {
display: inline-flex; // display: inline-flex;
align-self: center; // align-self: center;
} // }
.logo svg, // .logo svg,
.logo img { // .logo img {
height: 5.3rem; // height: 5.3rem;
fill: currentColor; // fill: currentColor;
} // }
.logo.baseline svg, // .logo.baseline svg,
.logo img { // .logo img {
top: 0.15em; // top: 0.15em;
position: relative; // position: relative;
} // }
svg {
&.img {
fill: currentColor;
&.header-logo {
height: 5.3rem;
}
}
}

5
custom-functions.php
View file

@ -25,13 +25,14 @@ function inline_svg(
$svg_role_img = false, $svg_role_img = false,
$svg_aria_hidden = true) { $svg_aria_hidden = true) {
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' ); $svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
$to_replace = $svg_class == '' ? 'class="{{class-name}}"' : '{{class-name}}'; $to_replace = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
$svg_content = str_replace($to_replace, $svg_class, $svg_content); $svg_content = str_replace($to_replace, $svg_class, $svg_content);
$svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content; $svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;
$svg_content = $svg_aria_hidden ? str_replace('<svg ', '<svg aria-hidden="true" ', $svg_content) : $svg_content; $svg_content = $svg_aria_hidden ? str_replace('<svg ', '<svg aria-hidden="true" ', $svg_content) : $svg_content;
$svg_title = $svg_title == '' ? '' : '<title>' . $svg_title . '</title>'; $svg_title = $svg_title == '' ? '' : '<title>' . $svg_title . '</title>';
$svg_content = substr_replace($svg_content, $svg_title, strpos($svg_content,'>') + 1, 0); $svg_content = substr_replace($svg_content, $svg_title, strpos($svg_content,'>') + 1, 0);
return '<div class="' . $div_class . '">' . $svg_content . '</div>'; $svg_content = $div_class == '' ? $svg_content : '<div class="' . $div_class . '">' . $svg_content . '</div>';
return $svg_content;
}; };
?> ?>

2
header.php
View file

@ -52,7 +52,7 @@ namespace WP_RDNYC;
// esc_html( get_bloginfo( 'name' ) ) // esc_html( get_bloginfo( 'name' ) )
// ); // );
// echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City"); // echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City");
echo inline_svg( 'svg-rdnyc-logo', 'logo', '', 'Recovery Dharma New York City', true, false ); echo inline_svg( 'svg-rdnyc-logo', '', 'img header-logo', 'Recovery Dharma New York City', true, false );
// echo '<div class="logo">' . file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ) . '</div>'; // echo '<div class="logo">' . file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ) . '</div>';
// echo str_replace("{{class-name}}", 'logo', // echo str_replace("{{class-name}}", 'logo',
// file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' )); // file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ));