further inline svg handling refinements

assets/css/_svg-icons.scss

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

assets/js/main.js

@@ -6,13 +6,13 @@ import '../css/app.scss'
 // import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
 import "../raw/rdnyc-logo.svg"; // rdnyc logo
 // other:
-import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
+// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
-import "../../node_modules/@mdi/svg/svg/home.svg";
+// import "../../node_modules/@mdi/svg/svg/home.svg";
 // import "../../node_modules/@mdi/svg/svg/information.svg";
 // import "../../node_modules/@mdi/svg/svg/account.svg";
 // import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
-import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
+// import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
-import "../../node_modules/@mdi/svg/svg/typewriter.svg";
+// import "../../node_modules/@mdi/svg/svg/typewriter.svg";
 // import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
 // import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
 // import "../../node_modules/@mdi/svg/svg/rss.svg";

custom-functions.php

@@ -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 = '') {
+// array(
-//   $div_class .= ' icon';
+//   'div_class' => 'icon baseline', // or 'img logo' or something
-//   $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
+//   'svg_class' => '',
-//   $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
+//   'svg_title' => '',
-//   return $output . "</svg></div>";
+//   'role_img' => false,
-// };
+//   'aria_hidden' => true
+// )
 
-// function svg_logo_use($icon_name, $div_class = '', $svg_title = 'Logo') {
+/**
-//   $div_class .= ' logo';
+ * inline SVG function
-//   $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" role=\"img\"><title>$svg_title</title>";
+ * desired SVG must exist in ./dist/images,
-//   $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
+ * preferably by import in main.js and processing by webpack
-//   return $output . "</svg></div>";
+ */
-// };
+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(
+  // load initial svg content
-    $svg_name,
-    $div_class = 'icon',
-    $svg_class = '',
-    $svg_title = '',
-    $svg_role_img = false,
-    $svg_aria_hidden = true) {
   $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;
 };
 

header.php

@@ -48,14 +48,14 @@ namespace WP_RDNYC;
           esc_url( home_url( '/' ) )
         );
 
-        // printf( '<span class="font-handbrush">%1$s</span>',
+        echo inline_svg( 'svg-rdnyc-logo',
-        //   esc_html( get_bloginfo( 'name' ) )
+            array(
-        // );
+              'svg_class' => 'img header-logo',
-        // echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City");
+              'svg_title' => 'Recovery Dharma New York City',
-        echo inline_svg( 'svg-rdnyc-logo', '', 'img header-logo', 'Recovery Dharma New York City', true, false );
+              'svg_role_img' => true,
-        // echo '<div class="logo">' . file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ) . '</div>';
+              'svg_aria_hidden' => false
-        // echo str_replace("{{class-name}}", 'logo', 
+            )
-        //   file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ));
+          );
 
         echo "</a>";
       ?>
@@ -88,8 +88,6 @@ namespace WP_RDNYC;
             'menu_class'      => 'navbar-nav',
             'menu_item_class' => 'nav-item',
             'link_class'      => 'nav-link font-monospace fs-6'
-            // 'link_before' => '<span>',
-            // 'link_after' => '</span>'
           ]);
         }
       ?>

searchform.php

@@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
     <label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
     <input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
     <button type="submit" class="btn btn-outline-light" title="Search">
-      <?php echo inline_svg('mdi-magnify', 'icon baseline') ?>
+      <?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ) ?>
     </button>
   </div>
 </form>

src/classes.php

@@ -49,48 +49,3 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
   }
   return $atts;
 }, 2, 3 );
-
-// /**
-//  * Filter to add icons to navbar menu items
-//  */
-// add_filter( 'wp_nav_menu_objects', function($items, $args) {
-//   $svgicon_prefix = 'icon-';
-//   foreach ( $items as $k => $object ) {
-//     foreach ($object->classes as $c) {
-//       if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
-//         $icon_slug = str_replace($svgicon_prefix, '', $c);
-//         $object->title = svg_icon_use($icon_slug, 'baseline') . "\\" . $object->title;
-//       }
-//     }
-//   }
-//   return $items;
-// }, 1, 2 );
-
-// /**
-//  * Filter to remove syntax-highlighting-code-block plugin styles from frontend 
-//  */
-// add_filter('syntax_highlighting_code_block_styling', '__return_false');
-
-
-// /**
-//  * Set document title (in html head) to be reversed with '\' separator
-//  */
-// add_filter( 'document_title_separator', function ( $separator ) {
-//   return '\\';
-// } );
-// add_filter('document_title_parts', function ($title) {
-//   return (is_home() || is_front_page()) ? $title : array_reverse($title);
-// });
-
-
-// /**
-//  * Exclude pages from WordPress Search
-//  */
-// if (!is_admin()) {
-//   add_filter('pre_get_posts',function($query) {
-//     if ($query->is_search) {
-//       $query->set('post_type', 'post');
-//     }
-//     return $query;
-//   });  
-// }