svg icons working with theme function

TODO.md

@@ -3,12 +3,16 @@
 - [X] ~~*fork*~~ [2021-07-02]
 - [X] ~~*rebrand*~~ [2021-07-02]
 - [X] ~~*initial updating of node modules/webpack*~~ [2021-07-02]
-- [ ] replace tailwind with bootstrap
+- [X] ~~*replace tailwind with bootstrap*~~ [2021-07-03]
-  - [ ] initial webpack config for development
+- [X] ~~*initial webpack config for development*~~ [2021-07-04]
-  - [ ] pore through template files to update theming
+- [X] ~~*add font handling if possible*~~ [2021-07-04]
-  - [ ] purgecss/webpack config for production
+- [X] ~~*add svg sprite handling if possible*~~ [2021-07-04]
+- [ ] svg theme function?
+- [ ] navbar menu
+- [ ] navbar hamburger mobile toggler
+- [ ] properly incorporate favicons (meta links etc)
+- [ ] pore through template files to update theming
+- [ ] purgecss/webpack config for production
 - [ ] double-check npm run build output to ensure it's all working
-- [ ] add font handling if possible
-- [ ] add svg sprite handling if possible
 - [ ] ...
 - [ ] profit!

assets/css/_svg-icons.scss

@@ -0,0 +1,22 @@
+/*
+  SVG ICON SYSTEM
+  per https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+  */
+  .icon {
+    display: inline-flex;
+    align-self: center;
+  }
+  
+  .icon svg,
+  .icon img {
+    height: 1em;
+    width: 1em;
+    fill: currentColor;
+  }
+  
+  .icon.baseline svg,
+  .icon img {
+    top: 0.125em;
+    position: relative;
+  }
+  

assets/css/app.scss

@@ -4,6 +4,9 @@
 /* Load Bootstrap v5 and customizations */
 @import "bs-load";
 
+/*SVG ICON SYSTEM*/
+@import "svg-icons";
+
 
 
 /* main */

assets/js/main.js

@@ -1,6 +1,13 @@
 // Import SCSS
 import '../css/app.scss'
 
+// Import icons for sprite-loader
+// navbar brand icon
+import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
+// other:
+import "../../node_modules/@mdi/svg/svg/home.svg";
+import "../../node_modules/@mdi/svg/svg/information.svg";
+
 // Import Bootstrap JS
 import 'bootstrap/js/dist/collapse';
 import 'bootstrap/js/dist/alert';

functions.php

@@ -9,6 +9,16 @@ define( 'WP_73k_VERSION', wp_get_theme()->version );
 define( 'WP_73k_DIR', __DIR__ );
 define( 'WP_73k_URL', get_template_directory_uri() );
 
+function svg_icon_use($icon_name, $div_class) {
+  echo "<div class=\"$div_class $icon_name\">";
+  echo "<svg class=\"$icon_name\" aria-hidden=\"true\">";
+
+  echo "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
+
+  echo "</svg>";
+  echo "</div>";
+};
+
 require_once( WP_73k_DIR . '/vendor/autoload.php' );
 
 \A7\autoload( __DIR__ . '/src' );

header.php

@@ -27,17 +27,23 @@ namespace WP_73k;
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
   <div class="container-fluid">
 
+    <h1 class="my-0 py-0 lh-base">
       <?php
-			$tag = 'p';
+        printf( '<a class="navbar-brand fs-1 text-secondary" href="%1$s" rel="home">',
-			if ( is_front_page() || is_home() ) {
+          esc_url( home_url( '/' ) )
-				$tag = 'h1';
+        );
-			}
 
-			printf( '<h1 class="my-0 py-0 lh-base"><a class="navbar-brand fs-1 text-secondary" href="%1$s" rel="home"><span class="fw-light font-brand">\\\\%2$s</span></a></h1>',
+        svg_icon_use("mdi-desktop-classic", "icon baseline");
-				esc_url( home_url( '/' ) ),
+
+        printf( ' <span class="fw-light font-brand">\\\\%1$s</span>',
           esc_html( get_bloginfo( 'name' ) )
         );
 
+        echo "</a>";
+      ?>
+    </h1>
+
+    <?php
 			if ( has_nav_menu( 'primary' ) ) {
 				wp_nav_menu([
 					'theme_location'  => 'primary',
@@ -66,25 +72,26 @@ namespace WP_73k;
 	<header class="header">
 		<div class="container mx-auto">
 			<?php
-			$tag = 'p';
+			// $tag = 'p';
-			if ( is_front_page() || is_home() ) {
+			// if ( is_front_page() || is_home() ) {
-				$tag = 'h1';
+			// 	$tag = 'h1';
-			}
+			// }
 
-			printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
+			// printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
-				$tag,
+			// 	$tag,
-				esc_url( home_url( '/' ) ),
+			// 	esc_url( home_url( '/' ) ),
-				esc_html( get_bloginfo( 'name' ) )
+			// 	esc_html( get_bloginfo( 'name' ) )
-			);
+			// );
 
-			if ( has_nav_menu( 'primary' ) ) {
+			// if ( has_nav_menu( 'primary' ) ) {
-				wp_nav_menu([
+			// 	wp_nav_menu([
-					'theme_location'  => 'primary',
+			// 		'theme_location'  => 'primary',
-					'container'       => 'nav',
+			// 		'container'       => 'nav',
-					'container_class' => 'nav-primary ml-auto',
+			// 		'container_class' => 'nav-primary ml-auto',
-					'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
+			// 		'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
-				]);
+			// 	]);
-			} ?>
+			// }
+      ?>
 			<div class="menu-item">
 				<button class="toggle highlight">Menu</button>
 			</div>

package.json

@@ -46,6 +46,7 @@
     "postcss-scss": "^3.0.4",
     "sass": "^1.x",
     "sass-loader": "^12.x",
+    "svg-sprite-loader": "^6.x",
     "webpack": "^5.x",
     "webpack-cli": "^4.x"
 	},

webpack.config.js

@@ -3,6 +3,7 @@ const path                 = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const CopyWebpackPlugin    = require('copy-webpack-plugin');
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
 
 const ImageminPlugin       = require('imagemin-webpack-plugin').default;
 const BrowserSyncPlugin    = require('browser-sync-webpack-plugin');
@@ -90,6 +91,30 @@ const config = {
           },
         ],
       },
+      {
+        test: /\.svg$/,
+        loader: "svg-sprite-loader",
+        options: {
+          extract: true,
+          spriteFilename: "icons.svg",
+          publicPath: "./images/",
+          symbolId: (filePath) => {
+            if (filePath.includes("bootstrap-icons")) {
+              return `bi-${path.basename(filePath).slice(0, -4)}`;
+            } else if (filePath.includes("@mdi")) {
+              return `mdi-${path.basename(filePath).slice(0, -4)}`;
+            } else if (filePath.includes("heroicons")) {
+              if (filePath.includes("outline")) {
+                return `hio-${path.basename(filePath).slice(0, -4)}`;
+              } else {
+                return `his-${path.basename(filePath).slice(0, -4)}`;
+              }
+            } else {
+              return `${path.basename(filePath).slice(0, -4)}`;
+            }
+          },
+        },
+      },
     ]
 	},
 	optimization: {
@@ -104,6 +129,7 @@ const config = {
 	},
 	plugins: [
 		new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
+    new SpriteLoaderPlugin({ plainSprite: true }),
 		new CopyWebpackPlugin({
 			patterns: [{
                         	from: './assets/images/',
@@ -115,7 +141,7 @@ const config = {
 				}
 			}]
 		}),
-		new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
+		new ImageminPlugin({ test: /\.(jpe?g|png|gif)$/i })
 	]
 }