diff --git a/assets/css/_svg-icons.scss b/assets/css/_svg-icons.scss index babac9e..29b8bb2 100644 --- a/assets/css/_svg-icons.scss +++ b/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 { diff --git a/assets/js/main.js b/assets/js/main.js index f34cfb8..bde18a0 100644 --- a/assets/js/main.js +++ b/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/home.svg"; +// 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/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/typewriter.svg"; +// import "../../node_modules/@mdi/svg/svg/zip-disk.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"; diff --git a/custom-functions.php b/custom-functions.php index 720934d..3394e80 100644 --- a/custom-functions.php +++ b/custom-functions.php @@ -1,37 +1,52 @@ "; -// }; +// 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 = "
"; -// }; +/** + * 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('