svg icons working with theme function

This commit is contained in:
Adam Piontek 2021-07-04 09:26:44 -04:00
parent da2e56d08e
commit b99281d42a
10 changed files with 1506 additions and 134 deletions

16
TODO.md
View file

@ -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
- [ ] initial webpack config for development
- [ ] pore through template files to update theming
- [ ] purgecss/webpack config for production
- [X] ~~*replace tailwind with bootstrap*~~ [2021-07-03]
- [X] ~~*initial webpack config for development*~~ [2021-07-04]
- [X] ~~*add font handling if possible*~~ [2021-07-04]
- [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!

View file

@ -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;
}

View file

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

BIN
assets/images/favicon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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';

View file

@ -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' );

View file

@ -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';
if ( is_front_page() || is_home() ) {
$tag = 'h1';
}
printf( '<a class="navbar-brand fs-1 text-secondary" href="%1$s" rel="home">',
esc_url( home_url( '/' ) )
);
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>',
esc_url( home_url( '/' ) ),
svg_icon_use("mdi-desktop-classic", "icon baseline");
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';
if ( is_front_page() || is_home() ) {
$tag = 'h1';
}
// $tag = 'p';
// if ( is_front_page() || is_home() ) {
// $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>',
$tag,
esc_url( home_url( '/' ) ),
esc_html( get_bloginfo( 'name' ) )
);
// 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,
// esc_url( home_url( '/' ) ),
// esc_html( get_bloginfo( 'name' ) )
// );
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu([
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'nav-primary ml-auto',
'menu_class' => 'list-reset m-0 md:flex md:justify-end md:items-center'
]);
} ?>
// if ( has_nav_menu( 'primary' ) ) {
// wp_nav_menu([
// 'theme_location' => 'primary',
// 'container' => 'nav',
// 'container_class' => 'nav-primary ml-auto',
// '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>

1488
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
},

View file

@ -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 })
]
}