From b99281d42a2b5de6d7ffa54372f539d3cd102258 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Sun, 4 Jul 2021 09:26:44 -0400 Subject: [PATCH] svg icons working with theme function --- TODO.md | 16 +- assets/css/_svg-icons.scss | 22 + assets/css/app.scss | 3 + assets/images/favicon.png | Bin 0 -> 1382 bytes assets/js/main.js | 7 + functions.php | 10 + header.php | 61 +- package-lock.json | 1492 +++++++++++++++++++++++++++++++++--- package.json | 1 + webpack.config.js | 28 +- 10 files changed, 1506 insertions(+), 134 deletions(-) create mode 100644 assets/css/_svg-icons.scss create mode 100755 assets/images/favicon.png diff --git a/TODO.md b/TODO.md index bc4a5ad..f7a1def 100644 --- a/TODO.md +++ b/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 - - [ ] 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! \ No newline at end of file diff --git a/assets/css/_svg-icons.scss b/assets/css/_svg-icons.scss new file mode 100644 index 0000000..09030d0 --- /dev/null +++ b/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; + } + \ No newline at end of file diff --git a/assets/css/app.scss b/assets/css/app.scss index d4fcadc..75df672 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -4,6 +4,9 @@ /* Load Bootstrap v5 and customizations */ @import "bs-load"; +/*SVG ICON SYSTEM*/ +@import "svg-icons"; + /* main */ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100755 index 0000000000000000000000000000000000000000..c9d5b2b991ffc6fa5673b0e80868ca180e6b28aa GIT binary patch literal 1382 zcmbtSi&qk66vwcJk8G!GmY$tDr6+B(S*_+OJ7t>bw3Hs(Ds!7Pr)KH~*2D*)C?G0^ zmI_l$4bi}S=A+W^k(!SbGyz4#2P%pJ3M8+6ozB@muu|hav`x2ln5oX(&7qg-?&g5lPfS z5~VPKNJ=F?%A(RhyX35FVlIXAp2rtXG`((HQ>oTeYL!|&CzW>g_Ng_R)iu@Jg7kjI zgP3G|cHv`CpUdM9^Z0#3T!X=oNF;%2XXfT5^9x`YgTctEZ+O|>DOp%pSX=~n!C_R_ z0;FKP99pqLxw@iI5Ob*sX_-l+Y<5>qKW7;G;9&{#+1(TZ;Eh$^XfPUwMn?a_qyW@9 zy?%6Te1JO=hfg2j3o2^rvkQy!O6bFUL1%A&Y-(CFyIrr>D_7TKD{{ia{15Bv`K4vZ zq}0;Ns%gm_;C6sJJUS)>ya7rVWy^Ab=?DlRgKN@X&KZfjOVXf$0x;O6QVbL1Hwu1i?)t9LV6q_qiolmIAJnKtoKOBA9%Io_8Di-J=PuEn(pZ+i?2m2EvA~;q&vZiwfcX1#LuKE6v>Nj zv}yZ=6Ps8TWTm|Ig^3x#3}%Z*ZY4W{b-v;4ar%<$TP*p9aO>07*p`cd9F7|&U|UdD zK%V9tY)|whON^}iGi`CVrup8C-MjoznWr|$_k^V<%GJ%8Y8;Kg{?{F~yN zP0iOwU%BMgIJv6*kwyLc4t105%|gW2ISw*<;g?zVOWnP{N~jcM3-oayzoXC=DLZ_? z0(W`H$}nDe#68A2mV2(9Egp3If??BHeNB5| zXLu9o+wE@NUcNT|??&X}%w30O#9svqPsCcM9I?9%@r#H!+7?BnSw?vX%)4Mpmy$|< zDC1oiHn?}=b~NQpY6a?6QMfu7!?Q-*eivez5eC!1yS1O$OXpx^rhCztHut9EjSgXK zGZf{5U69>HLS(>xE*i^D(oQa+<(0v$T(=!6l&>x!9+!AzW6cK^f-b0VaiG}_TxQ!< z3r@0%6s!{_A>`;eX6)t89zW6aR6&@qrr^pDYQ~QA-qcs~K2Q3M)$0Hw?F!dT8VYMM ziE=i{rAN=gcmC8B=&0Uu=lR*YJ~!r_qpogyRw^{e;cx-3DoDcNTXe4vHQqNB#W&hC zj6K-Pyum$%K{cLXA79nA4|EzU*eGnadOlGG?o#fkGFuF&E-aD*Q dGCfy}R)XWx-y>%#13xaUx952emisT5e*sK-AL;-A literal 0 HcmV?d00001 diff --git a/assets/js/main.js b/assets/js/main.js index f16ecf0..874cd42 100644 --- a/assets/js/main.js +++ b/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'; diff --git a/functions.php b/functions.php index 73a63da..69d80e2 100644 --- a/functions.php +++ b/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 "
"; + echo ""; + + echo ""; + + echo ""; + echo "
"; +}; + require_once( WP_73k_DIR . '/vendor/autoload.php' ); \A7\autoload( __DIR__ . '/src' ); diff --git a/header.php b/header.php index d9d520e..a3b76b9 100644 --- a/header.php +++ b/header.php @@ -27,17 +27,23 @@ namespace WP_73k;