fix: use iconify-icon web component for icons

scripts/genicons.js

@@ -19,7 +19,7 @@ function buildIcons (prefix) {
   })
   css += '}\n'
   icons.forEach(key => {
-    css += `.i-icon.${key},.i-${prefix}.${key}{--icon-url:var(--${prefix}-${key}-url)}\n`
+    css += `.i-${prefix}.${key}{--icon-url:var(--${prefix}-${key}-url)}\n`
   })
   fs.writeFileSync(output, css)
 }
@@ -49,4 +49,3 @@ function encodeSvgForCss(svg) {
 }
 
 buildIcons('lucide')
-buildIcons('simpleicons')

src/shibuya/theme/shibuya/components/foot-socials.html

@@ -1,33 +1,55 @@
 {%- if theme_readthedocs_url %}
-<a href="{{ theme_readthedocs_url }}" aria-label="Readthedocs"><i class="i-simpleicons readthedocs"></i></a>
+<a href="{{ theme_readthedocs_url }}" aria-label="Readthedocs">
+  <iconify-icon icon="simple-icons:readthedocs"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_github_url %}
-<a href="{{ theme_github_url }}" aria-label="GitHub"><i class="i-simpleicons github"></i></a>
+<a href="{{ theme_github_url }}" aria-label="GitHub">
+  <iconify-icon icon="simple-icons:github"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_gitlab_url %}
-<a href="{{ theme_gitlab_url }}" aria-label="Gitlab"><i class="i-simpleicons gitlab"></i></a>
+<a href="{{ theme_gitlab_url }}" aria-label="Gitlab">
+  <iconify-icon icon="simple-icons:github"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_bitbucket_url %}
-<a href="{{ theme_bitbucket_url }}" aria-label="Bitbucket"><i class="i-simpleicons bitbucket"></i></a>
+<a href="{{ theme_bitbucket_url }}" aria-label="Bitbucket">
+  <iconify-icon icon="simple-icons:bitbucket"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_twitter_url %}
-<a href="{{ theme_twitter_url }}" aria-label="X (Twitter)"><i class="i-simpleicons x-twitter"></i></a>
+<a href="{{ theme_twitter_url }}" aria-label="X (Twitter)">
+  <iconify-icon icon="prime:twitter"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_mastodon_url %}
-<a href="{{ theme_mastodon_url }}" aria-label="Mastodon"><i class="i-simpleicons mastodon"></i></a>
+<a href="{{ theme_mastodon_url }}" aria-label="Mastodon">
+  <iconify-icon icon="simple-icons:mastodon"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_slack_url %}
-<a href="{{ theme_slack_url }}" aria-label="Slack"><i class="i-simpleicons slack"></i></a>
+<a href="{{ theme_slack_url }}" aria-label="Slack">
+  <iconify-icon icon="simple-icons:slack"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_discord_url %}
-<a href="{{ theme_discord_url }}" aria-label="Discord"><i class="i-simpleicons discord"></i></a>
+<a href="{{ theme_discord_url }}" aria-label="Discord">
+  <iconify-icon icon="simple-icons:discord"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_youtube_url %}
-<a href="{{ theme_youtube_url }}" aria-label="YouTube"><i class="i-simpleicons youtube"></i></a>
+<a href="{{ theme_youtube_url }}" aria-label="YouTube">
+  <iconify-icon icon="simple-icons:youtube"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_reddit_url %}
-<a href="{{ theme_reddit_url }}" aria-label="Reddit"><i class="i-simpleicons reddit"></i></a>
+<a href="{{ theme_reddit_url }}" aria-label="Reddit">
+  <iconify-icon icon="simple-icons:reddit"></iconify-icon>
+</a>
 {%- endif %}
 {%- if theme_linkedin_url %}
-<a href="{{ theme_linkedin_url }}" aria-label="LinkedIn"><i class="i-simpleicons linkedin"></i></a>
+<a href="{{ theme_linkedin_url }}" aria-label="LinkedIn">
+  <iconify-icon icon="simple-icons:linkedin"></iconify-icon>
+</a>
 {%- endif %}

src/shibuya/theme/shibuya/components/nav-languages.html

@@ -2,7 +2,7 @@
 <div class="nav-languages">
   <button type="button">
     <span class="md:hidden">{{ _("Translations") }}</span>
-    <i class="i-lucide languages"></i>
+    <iconify-icon icon="lucide:languages"></iconify-icon>
   </button>
   <div class="nav-languages-choices">
     <ul>

src/shibuya/theme/shibuya/components/nav-socials.html

@@ -1,27 +1,27 @@
 {%- if theme_github_url %}
   <a href="{{ theme_github_url }}" aria-label="GitHub">
-    <i class="i-simpleicons github"></i>
+    <iconify-icon icon="simple-icons:github"></iconify-icon>
   </a>
 {%- elif theme_gitlab_url %}
   <a href="{{ theme_gitlab_url }}" aria-label="Gitlab">
-    <i class="i-simpleicons gitlab"></i>
+    <iconify-icon icon="simple-icons:gitlab"></iconify-icon>
   </a>
 {%- elif theme_bitbucket_url %}
   <a href="{{ theme_bitbucket_url }}" aria-label="Bitbucket">
-    <i class="i-simpleicons bitbucket"></i>
+    <iconify-icon icon="simple-icons:bitbucket"></iconify-icon>
   </a>
 {%- endif %}
 {%- if theme_twitter_url %}
 <a href="{{ theme_twitter_url }}" aria-label="X (Twitter)">
-  <i class="i-simpleicons x-twitter"></i>
+  <iconify-icon icon="prime:twitter"></iconify-icon>
 </a>
 {%- endif %}
 {%- if theme_discord_url %}
   <a href="{{ theme_discord_url }}" aria-label="Discord">
-    <i class="i-simpleicons discord"></i>
+    <iconify-icon icon="simple-icons:discord"></iconify-icon>
   </a>
 {%- elif theme_slack_url %}
   <a href="{{ theme_slack_url }}" aria-label="Slack">
-    <i class="i-simpleicons slack"></i>
+    <iconify-icon icon="simple-icons:slack"></iconify-icon>
   </a>
 {%- endif %}

src/shibuya/theme/shibuya/sidebars/repo-stats.html

@@ -9,17 +9,17 @@
 <a class="js-repo-stats repo-stats flex items-center" href="{{ source_url }}"
   data-type="{{ source_type }}" data-user="{{ source_user }}" data-repo="{{ source_repo }}">
   <span class="w-8 flex items-center justify-around shrink-0 text-3xl">
-    <i class="i-simpleicons {{ source_type }}"></i>
+    <iconify-icon icon="simple-icons:{{ source_type }}"></iconify-icon>
   </span>
   <span class="flex-grow px-2 break-all">
     <span>{{ source_user }}/{{ source_repo }}</span>
     <span class="flex text-sm repo-stats-count">
       <span class="flex items-center pr-3">
-        <i class="i-lucide star"></i>
+        <iconify-icon icon="lucide:star"></iconify-icon>
         <strong class="js-repo-stars ml-1">0</strong>
       </span>
       <span class="flex items-center">
-        <i class="i-lucide git-fork"></i>
+        <iconify-icon icon="lucide:git-fork"></iconify-icon>
         <strong class="js-repo-forks ml-1">0</strong>
       </span>
     </span>

static/css/base.css

@@ -63,9 +63,11 @@ strong, em {
   border: 3px solid transparent;
 }
 
-.i-icon,
-.i-lucide,
-.i-simpleicons {
+iconify-icon {
+  vertical-align: middle;
+}
+
+.i-lucide {
   mask: var(--icon-url) no-repeat;
   mask-size: 100% 100%;
   width: 1em;

static/index.js

@@ -1,3 +1,4 @@
+import "iconify-icon"
 import "./js/menu"
 import "./js/banner"
 import "./js/theme"