Apply simple icons

Author: clementbiron

themes/opentermsarchive/assets/js/brands.js

@@ -0,0 +1,30 @@
+import { siMastodon, siLinkedin, siGithub } from 'simple-icons';
+
+const ICONS = {
+  mastodon: siMastodon,
+  linkedin: siLinkedin,
+  github: siGithub,
+};
+
+async function applyBrandsIcons() {
+  const elements = document.querySelectorAll('[data-simple-icon]');
+
+  elements.forEach(element => {
+    const attribute = element.getAttribute('data-simple-icon').toLowerCase();
+    const icon = ICONS[attribute];
+
+    if (icon) {
+      const svgDoc = new DOMParser().parseFromString(icon.svg, 'image/svg+xml');
+      const svgElement = svgDoc.querySelector('svg');
+      const existingClasses = element.getAttribute('class');
+
+      if (existingClasses) {
+        svgElement.setAttribute('class', existingClasses);
+      }
+      svgElement.setAttribute('fill', 'var(--svgfill)');
+      element.replaceWith(svgElement);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', applyBrandsIcons);

themes/opentermsarchive/layouts/partials/footer.html

@@ -76,6 +76,9 @@
 {{ $languageSwitcherJs := resources.Get "js/languageSwitcher.js" | js.Build }}
 <script src="{{ $languageSwitcherJs.RelPermalink }}"></script>
 
+{{ $brandsJs := resources.Get "js/brands.js" | js.Build }}
+<script src="{{ $brandsJs.RelPermalink }}"></script>
+
 {{ $headerJs := resources.Get "js/header.js" | js.Build }}
 <script src="{{ $headerJs.RelPermalink }}"></script>