Skip to content

icons.html: reduce size by 54% #899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haampie wants to merge 3 commits into
base: main
Choose a base branch
from
Open

icons.html: reduce size by 54% #899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76ed78b
icons.html: reduce size by 54%
haampie Sep 17, 2025
e7544cb
use <use/>
haampie Sep 17, 2025
587b02e
move back to top icon
haampie Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/furo/theme/furo/components/edit-this-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{%- macro furo_edit_button(url) -%}
<div class="edit-this-page">
<a class="muted-link" href="{{ url }}" rel="edit" title="{{ _("Edit this page") }}">
<svg><use href="#svg-pencil"></use></svg>
<svg><use href="#svg-pencil"/></svg>
<span class="visually-hidden">{{ _("Edit this page") }}</span>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/furo/theme/furo/components/view-this-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{%- macro furo_view_button(url) -%}
<div class="view-this-page">
<a class="muted-link" href="{{ url }}" title="{{ _("View this page") }}">
<svg><use href="#svg-eye"></use></svg>
<svg><use href="#svg-eye"/></svg>
<span class="visually-hidden">{{ _("View this page") }}</span>
</a>
</div>
Expand Down
30 changes: 14 additions & 16 deletions src/furo/theme/furo/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<header class="mobile-header">
<div class="header-left">
<label class="nav-overlay-icon" for="__navigation">
<span class="icon"><svg><use href="#svg-menu"></use></svg></span>
<span class="icon"><svg><use href="#svg-menu"/></svg></span>
</label>
</div>
<div class="header-center">
Expand All @@ -36,14 +36,14 @@
<div class="header-right">
<div class="theme-toggle-container theme-toggle-header">
<button class="theme-toggle" aria-label="Toggle Light / Dark / Auto color theme">
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"/></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"/></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"/></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"/></svg>
</button>
</div>
<label class="toc-overlay-icon toc-header-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
<span class="icon"><svg><use href="#svg-toc"></use></svg></span>
<span class="icon"><svg><use href="#svg-toc"/></svg></span>
</label>
</div>
</header>
Expand All @@ -62,9 +62,7 @@
<div class="content">
<div class="article-container">
<a href="#" class="back-to-top muted-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"></path>
</svg>
<svg><use href="#svg-top"/></svg>
<span>{% trans %}Back to top{% endtrans %}</span>
</a>
<div class="content-icon-container">
Expand Down Expand Up @@ -97,14 +95,14 @@
{#- Theme toggle -#}
<div class="theme-toggle-container theme-toggle-content">
<button class="theme-toggle" aria-label="Toggle Light / Dark / Auto color theme">
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"/></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"/></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"/></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"/></svg>
</button>
</div>
<label class="toc-overlay-icon toc-content-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
<span class="icon"><svg><use href="#svg-toc"></use></svg></span>
<span class="icon"><svg><use href="#svg-toc"/></svg></span>
</label>
</div>
<article role="main" id="furo-main-content">
Expand All @@ -122,12 +120,12 @@
</div>
<div class="title">{{ next.title }}</div>
</div>
<svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
<svg class="furo-related-icon"><use href="#svg-arrow-right"/></svg>
</a>
{%- endif %}
{% if prev -%}
<a class="prev-page" href="{{ prev.link }}">
<svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
<svg class="furo-related-icon"><use href="#svg-arrow-right"/></svg>
<div class="page-info">
<div class="context">
<span>{{ _("Previous") }}</span>
Expand Down
140 changes: 41 additions & 99 deletions src/furo/theme/furo/partials/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,44 @@
{# Adapted from Just the Docs #}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-toc" viewBox="0 0 24 24">
<title>Contents</title>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"/>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<symbol id="svg-sun" viewBox="0 0 24 24">
<title>Light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</symbol>
<symbol id="svg-moon" viewBox="0 0 24 24">
<title>Dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
</symbol>
<symbol id="svg-sun-with-moon" viewBox="0 0 24 24">
<title>Auto light/dark, in light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="icon-custom-derived-from-feather-sun-and-tabler-moon">
<path style="opacity: 50%" d="M 5.411 14.504 C 5.471 14.504 5.532 14.504 5.591 14.504 C 3.639 16.319 4.383 19.569 6.931 20.352 C 7.693 20.586 8.512 20.551 9.25 20.252 C 8.023 23.207 4.056 23.725 2.11 21.184 C 0.166 18.642 1.702 14.949 4.874 14.536 C 5.051 14.512 5.231 14.5 5.411 14.5 L 5.411 14.504 Z"/>
<line x1="14.5" y1="3.25" x2="14.5" y2="1.25"/>
<line x1="14.5" y1="15.85" x2="14.5" y2="17.85"/>
<line x1="10.044" y1="5.094" x2="8.63" y2="3.68"/>
<line x1="19" y1="14.05" x2="20.414" y2="15.464"/>
<line x1="8.2" y1="9.55" x2="6.2" y2="9.55"/>
<line x1="20.8" y1="9.55" x2="22.8" y2="9.55"/>
<line x1="10.044" y1="14.006" x2="8.63" y2="15.42"/>
<line x1="19" y1="5.05" x2="20.414" y2="3.636"/>
<circle cx="14.5" cy="9.55" r="3.6"/>
</svg>
</symbol>
<symbol id="svg-moon-with-sun" viewBox="0 0 24 24">
<title>Auto light/dark, in dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="icon-custom-derived-from-feather-sun-and-tabler-moon">
<path d="M 8.282 7.007 C 8.385 7.007 8.494 7.007 8.595 7.007 C 5.18 10.184 6.481 15.869 10.942 17.24 C 12.275 17.648 13.706 17.589 15 17.066 C 12.851 22.236 5.91 23.143 2.505 18.696 C -0.897 14.249 1.791 7.786 7.342 7.063 C 7.652 7.021 7.965 7 8.282 7 L 8.282 7.007 Z"/>
<line style="opacity: 50%" x1="18" y1="3.705" x2="18" y2="2.5"/>
<line style="opacity: 50%" x1="18" y1="11.295" x2="18" y2="12.5"/>
<line style="opacity: 50%" x1="15.316" y1="4.816" x2="14.464" y2="3.964"/>
<line style="opacity: 50%" x1="20.711" y1="10.212" x2="21.563" y2="11.063"/>
<line style="opacity: 50%" x1="14.205" y1="7.5" x2="13.001" y2="7.5"/>
<line style="opacity: 50%" x1="21.795" y1="7.5" x2="23" y2="7.5"/>
<line style="opacity: 50%" x1="15.316" y1="10.184" x2="14.464" y2="11.036"/>
<line style="opacity: 50%" x1="20.711" y1="4.789" x2="21.563" y2="3.937"/>
<circle style="opacity: 50%" cx="18" cy="7.5" r="2.169"/>
</svg>
</symbol>
<symbol id="svg-pencil" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-pencil-code">
<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
<path d="M13.5 6.5l4 4" />
<path d="M20 21l2 -2l-2 -2" />
<path d="M17 17l-2 2l2 2" />
</svg>
</symbol>
<symbol id="svg-eye" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-eye-code">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
d="M11.11 17.958c-3.209 -.307 -5.91 -2.293 -8.11 -5.958c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-.21 .352 -.427 .688 -.647 1.008" />
<path d="M20 21l2 -2l-2 -2" />
<path d="M17 17l-2 2l2 2" />
</svg>
<svg style="display:none;">
<style>
.p,.q{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.p{stroke-width:2}.q{stroke-width:1}
</style>
<symbol id="svg-toc" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 1024 1024">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9 271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"/>
</symbol>
<symbol id="svg-menu" class="p" viewBox="0 0 24 24">
<path d="M3 12h18M3 6h18M3 18h18"/>
</symbol>
<symbol id="svg-arrow-right" class="p" viewBox="0 0 24 24">
<path d="m9 18 6-6-6-6"/>
</symbol>
<symbol id="svg-sun" class="q" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</symbol>
<symbol id="svg-moon" class="q" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"/>
</symbol>
<symbol id="svg-sun-with-moon" class="q" viewBox="0 0 24 24">
<path d="M5.411 14.504h.18c-1.952 1.815-1.208 5.065 1.34 5.848.762.234 1.581.199 2.319-.1-1.227 2.955-5.194 3.473-7.14.932-1.944-2.542-.408-6.235 2.764-6.648.177-.024.357-.036.537-.036v.004Z" opacity="50%"/>
<path d="M14.5 3.25v-2m0 14.6v2M10.044 5.094 8.63 3.68M19 14.05l1.414 1.414M8.2 9.55h-2m14.6 0h2m-12.756 4.456L8.63 15.42M19 5.05l1.414-1.414"/>
<circle cx="14.5" cy="9.55" r="3.6"/>
</symbol>
<symbol id="svg-moon-with-sun" class="q" viewBox="0 0 24 24">
<path d="M8.282 7.007h.313c-3.415 3.177-2.114 8.862 2.347 10.233 1.333.408 2.764.349 4.058-.174-2.149 5.17-9.09 6.077-12.495 1.63-3.402-4.447-.714-10.91 4.837-11.633.31-.042.623-.063.94-.063v.007Z"/>
<path d="M18 3.705V2.5m0 8.795V12.5m-2.684-7.684-.852-.852m6.247 6.248.852.851M14.205 7.5h-1.204m8.794 0H23m-7.684 2.684-.852.852m6.247-6.247.852-.852" opacity="50%"/>
<circle cx="18" cy="7.5" r="2.169" opacity="50%"/>
</symbol>
<symbol id="svg-pencil" class="q" viewBox="0 0 24 24">
<path d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16v4m9.5-13.5 4 4M20 21l2-2-2-2m-3 0-2 2 2 2"/>
</symbol>
<symbol id="svg-eye" class="q" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0"/>
<path d="M11.11 17.958C7.901 17.651 5.2 15.665 3 12c2.4-4 5.4-6 9-6 3.6 0 6.6 2 9 6-.21.352-.427.688-.647 1.008M20 21l2-2-2-2m-3 0-2 2 2 2"/>
</symbol>
<symbol id="svg-top" viewBox="0 0 24 24">
<path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/>
</symbol>
</svg>