chipzoller · onweru · Feb 3, 2023 · Feb 3, 2023 · Sep 22, 2024
diff --git a/README.md b/README.md
@@ -233,6 +233,7 @@ These options set global values that some pages or all pages in the site use by
 | mainSections               | array/string                | no                  |
 | centerLogo                 | boolean                     | no                  |
 | logo                       | file path (string)          | no                  |
+| icons                      | Array of icon name (string) | no                  |
 | iconsDir                   | dir path (string)           | no                  |
 | mobileNavigation           | string                      | no                  |
 | figurePositionShow         | boolean                     | yes                 |
@@ -311,6 +312,20 @@ To edit your social media profile links, edit the files referenced above. Specif
 
 If you wish to globally use a [large Twitter summary card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image) when sharing posts, set the global parameter `largeTwitterCard` to `true`.
 
+Social media icons are loaded as SVG sprites. Check if your platform icons is listed under `layouts/partials/sprites` directory. If not, grab an svg icon, [convert it into a sprite](https://svgsprit.es/) and add a filename under the aforementioned dir. Make sure the ID in the sprite matches this filename.
+
+Finally, got to `config/_default/params.toml` and ensure that icon is listed under the `icons` array. Like so:
+
+```toml
+icons = [
+  ...
+  "mastodon",
+  ...
+]
+```
+
+If you're not using certain icons, remove them from the list.
+
 ### Web site analytics
 
 If using Google Analytics, configure the `ga_analytics` global parameter in your site with your ID. You can opt to set a google tag manager using `google_tag_manager_id`.

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -44,6 +44,21 @@ usePageBundles = false
 imagesDir = "images/" # without a leading forward slash
 # Icons:
 iconsDir = "icons/" # without a leading forward slash
+# Only load icons that you're actually using on your website. Remove from or add to the list below: If an icon doesn't show after adding it to this least, ensure it exists under `layouts/partials/sprites` directory.
+icons = [
+  "facebook",
+  "twitter",
+  "linkedin",
+  "github",
+  "gitlab",
+  "rss",
+  "instagram",
+  "youtube",
+  "discord",
+  "stackoverflow",
+  "mastodon",
+  "xing"
+]
 # Fonts:
 fontsDir = "fonts/" # without a leading forward slash
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -33,7 +33,7 @@
       {{- block "main" . }}{{ end }}
     </main>
 
-    {{- partialCached "icons" . }}
+    {{- partialCached "sprites/_index" . }}
     {{- partialCached "footer" . }}
     {{- partialCached "scripts/index" . }}
     {{- partialCached "hooks/body-end" . }}

diff --git a/layouts/partials/icons.html b/layouts/partials/icons.html
diff --git a/layouts/partials/sprites/_index.html b/layouts/partials/sprites/_index.html
@@ -0,0 +1,12 @@
+{{- $icons := slice "closeme" "open-menu" "copy" "carly" "calendar" "mail" "to-top" }}
+{{- $additionalIcons := site.Params.icons }}
+{{- if and $additionalIcons (reflect.IsSlice $additionalIcons) }}
+  {{- range $additionalIcons }}
+    {{- $icons = append . $icons }}
+  {{- end }}
+{{- end }}
+<svg width="0" height="0" class="hidden">
+  {{- range $icons }}
+    {{- partial (printf "sprites/%s" .) . }}
+  {{- end }}
+</svg>
diff --git a/layouts/partials/sprites/calendar.html b/layouts/partials/sprites/calendar.html
@@ -0,0 +1,4 @@
+<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="calendar">
+  <path d="M452 40h-24V0h-40v40H124V0H84v40H60C26.916 40 0 66.916 0 100v352c0 33.084 26.916 60 60 60h392c33.084 0 60-26.916 60-60V100c0-33.084-26.916-60-60-60zm20 412c0 11.028-8.972 20-20 20H60c-11.028 0-20-8.972-20-20V188h432v264zm0-304H40v-48c0-11.028 8.972-20 20-20h24v40h40V80h264v40h40V80h24c11.028 0 20 8.972 20 20v48z"></path>
+  <path d="M76 230h40v40H76zm80 0h40v40h-40zm80 0h40v40h-40zm80 0h40v40h-40zm80 0h40v40h-40zM76 310h40v40H76zm80 0h40v40h-40zm80 0h40v40h-40zm80 0h40v40h-40zM76 390h40v40H76zm80 0h40v40h-40zm80 0h40v40h-40zm80 0h40v40h-40zm80-80h40v40h-40z"></path>
+</symbol>
diff --git a/layouts/partials/sprites/carly.html b/layouts/partials/sprites/carly.html
@@ -0,0 +1,3 @@
+<symbol viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" id="carly">
+  <path d="M504.971 239.029L448 182.059V84c0-46.317-37.682-84-84-84h-44c-13.255 0-24 10.745-24 24s10.745 24 24 24h44c19.851 0 36 16.149 36 36v108c0 6.365 2.529 12.47 7.029 16.971L454.059 256l-47.029 47.029A24.002 24.002 0 0 0 400 320v108c0 19.851-16.149 36-36 36h-44c-13.255 0-24 10.745-24 24s10.745 24 24 24h44c46.318 0 84-37.683 84-84v-98.059l56.971-56.971c9.372-9.372 9.372-24.568 0-33.941zM112 192V84c0-19.851 16.149-36 36-36h44c13.255 0 24-10.745 24-24S205.255 0 192 0h-44c-46.318 0-84 37.683-84 84v98.059l-56.971 56.97c-9.373 9.373-9.373 24.568 0 33.941L64 329.941V428c0 46.317 37.682 84 84 84h44c13.255 0 24-10.745 24-24s-10.745-24-24-24h-44c-19.851 0-36-16.149-36-36V320c0-6.365-2.529-12.47-7.029-16.971L57.941 256l47.029-47.029A24.002 24.002 0 0 0 112 192z"></path>
+</symbol>
diff --git a/layouts/partials/sprites/closeme.html b/layouts/partials/sprites/closeme.html
@@ -0,0 +1,3 @@
+<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closeme">
+  <path d="M284.286 256.002L506.143 34.144c7.811-7.811 7.811-20.475 0-28.285-7.811-7.81-20.475-7.811-28.285 0L256 227.717 34.143 5.859c-7.811-7.811-20.475-7.811-28.285 0-7.81 7.811-7.811 20.475 0 28.285l221.857 221.857L5.858 477.859c-7.811 7.811-7.811 20.475 0 28.285a19.938 19.938 0 0 0 14.143 5.857 19.94 19.94 0 0 0 14.143-5.857L256 284.287l221.857 221.857c3.905 3.905 9.024 5.857 14.143 5.857s10.237-1.952 14.143-5.857c7.811-7.811 7.811-20.475 0-28.285L284.286 256.002z"></path>
+</symbol>
diff --git a/layouts/partials/sprites/copy.html b/layouts/partials/sprites/copy.html
@@ -0,0 +1,4 @@
+<symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="copy">
+  <path d="M23 2.75A2.75 2.75 0 0 0 20.25 0H8.75A2.75 2.75 0 0 0 6 2.75v13.5A2.75 2.75 0 0 0 8.75 19h11.5A2.75 2.75 0 0 0 23 16.25zM18.25 14.5h-7.5a.75.75 0 0 1 0-1.5h7.5a.75.75 0 0 1 0 1.5zm0-3h-7.5a.75.75 0 0 1 0-1.5h7.5a.75.75 0 0 1 0 1.5zm0-3h-7.5a.75.75 0 0 1 0-1.5h7.5a.75.75 0 0 1 0 1.5z"></path>
+  <path d="M8.75 20.5a4.255 4.255 0 0 1-4.25-4.25V2.75c0-.086.02-.166.025-.25H3.75A2.752 2.752 0 0 0 1 5.25v16A2.752 2.752 0 0 0 3.75 24h12a2.752 2.752 0 0 0 2.75-2.75v-.75z"></path>
+</symbol>