hugo: support for inline svg icons

This commit adds support for icon optimization using inline svgs,
improving site performance.

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-01-25 10:43:34 +01:00
parent b6cb911afc
commit 1f42d72ed3
5 changed files with 43 additions and 15 deletions

View File

@ -1,4 +1,13 @@
@layer utilities {
.icon-svg {
svg {
font-size: 24px;
width: 1em;
height: 1em;
fill: currentColor;
}
}
.icon {
font-family: "Material Symbols Rounded";
font-weight: normal;

View File

@ -231,6 +231,9 @@ module:
target: assets
- source: hugo_stats.json
target: assets/watching/hugo_stats.json
- source: node_modules/@material-symbols/svg-400/rounded
target: assets/icons
imports:
- path: github.com/moby/moby

View File

@ -0,0 +1,8 @@
{{- $svg := resources.Get (fmt.Printf "icons/%s-fill.svg" .) }}
{{- if not $svg }}
{{- errorf "Failed to get icon: %s" . }}
{{ end }}
{{- if not $svg.Content }}
{{- errorf "Failed to get icon: %s" . }}
{{- end }}
{{- safe.HTML $svg.Content -}}

37
package-lock.json generated
View File

@ -11,6 +11,7 @@
"devDependencies": {
"@alpinejs/collapse": "^3.11.1",
"@docsearch/js": "^3.5.2",
"@material-symbols/svg-400": "^0.14.6",
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.8",
"alpinejs": "^3.12.3",
@ -319,6 +320,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@material-symbols/svg-400": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.14.6.tgz",
"integrity": "sha512-4uxXEyKljpfwlEQQE5xpN0ZOLduXC3ClCkwNtsM6xy8CLkVP1x32s8BPYHrpfGdhNNnKLkl+p8vh7VBqZi8D4A==",
"dev": true
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -608,9 +615,9 @@
}
},
"node_modules/browserslist": {
"version": "4.22.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
"version": "4.22.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
"integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
"dev": true,
"funding": [
{
@ -627,9 +634,9 @@
}
],
"dependencies": {
"caniuse-lite": "^1.0.30001541",
"electron-to-chromium": "^1.4.535",
"node-releases": "^2.0.13",
"caniuse-lite": "^1.0.30001565",
"electron-to-chromium": "^1.4.601",
"node-releases": "^2.0.14",
"update-browserslist-db": "^1.0.13"
},
"bin": {
@ -649,9 +656,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001543",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
"integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==",
"version": "1.0.30001580",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
"integrity": "sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==",
"dev": true,
"funding": [
{
@ -1379,9 +1386,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.540",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.540.tgz",
"integrity": "sha512-aoCqgU6r9+o9/S7wkcSbmPRFi7OWZWiXS9rtjEd+Ouyu/Xyw5RSq2XN8s5Qp8IaFOLiRrhQCphCIjAxgG3eCAg==",
"version": "1.4.645",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.645.tgz",
"integrity": "sha512-EeS1oQDCmnYsRDRy2zTeC336a/4LZ6WKqvSaM1jLocEk5ZuyszkQtCpsqvuvaIXGOUjwtvF6LTcS8WueibXvSw==",
"dev": true
},
"node_modules/elkjs": {
@ -2431,9 +2438,9 @@
}
},
"node_modules/node-releases": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
"integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true
},
"node_modules/non-layered-tidy-tree-layout": {

View File

@ -16,6 +16,7 @@
"devDependencies": {
"@alpinejs/collapse": "^3.11.1",
"@docsearch/js": "^3.5.2",
"@material-symbols/svg-400": "^0.14.6",
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.8",
"alpinejs": "^3.12.3",