Skip to content

Animated icons #5

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
methodofaction wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Animated icons #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5ae547c
add animated sidebar icons
methodofaction Mar 10, 2026
ce1c541
now added the icons
methodofaction Mar 10, 2026
daff87b
change icons so that they rely on external css
methodofaction Mar 12, 2026
80da11e
add popui and tailwind
beliolfa Mar 12, 2026
95c6bb6
Remove outmost <g> because it removes content on build
methodofaction Mar 12, 2026
34783da
remove double translate in the transform
methodofaction Mar 12, 2026
fccf382
double translate issue again
methodofaction Mar 12, 2026
134001e
another fix
methodofaction Mar 12, 2026
1d40e2d
icon refactor to appease the svelte conversion process
methodofaction Mar 12, 2026
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 build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const builder = new ThemeBuilder({
// fallbackTheme: "default", //* where to collect, when icons cannot be identified by their suffix (default is dont collect)
},
lib: {
excludeSvgAttributes: ["xmlns", "width", "height", "class"], //* exclude certain attributes from the svg's, which might be controlled by the used Icon component
excludeSvgAttributes: ["xmlns", "width", "height"], //* exclude certain attributes from the svg's, which might be controlled by the used Icon component
extendSvgAttributes: {}, //* extend the svg's attributes
},
});
Expand Down
8 changes: 4 additions & 4 deletions icons_list.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ templ Edit() {

templ Enter() {
<div style="width: 16px; height: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"> <path fill="currentColor" d="M5.38 12.825a.5.5 0 0 1-.705.055l-3.5-3a.5.5 0 0 1 0-.76l3.5-3a.5.5 0 0 1 .65.76L2.852 9H13.5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 15 3.5v5a1.5 1.5 0 0 1-1.5 1.5H2.852l2.473 2.12a.5.5 0 0 1 .055.705Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"> <path fill="currentColor" d="M5.38 12.825a.5.5 0 0 1-.705.055l-3.5-3a.5.5 0 0 1 0-.76l3.5-3a.5.5 0 0 1 .65.76L2.852 9H13.5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 15 3.5v5a1.5 1.5 0 0 1-1.5 1.5H2.852l2.473 2.12a.5.5 0 0 1 .055.705"/></svg>
</div>
}

Expand Down Expand Up @@ -574,7 +574,7 @@ templ Published() {

templ Pulse() {
<div style="width: 16px; height: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <style> .r0 { animation: p 1.6s ease-in-out infinite 0s; } .r1 { animation: p 1.6s ease-in-out infinite 0.16s; } @keyframes p { 0%, 100% { fill: var(--color-background-default-tertiary); } 40% { fill: var(--color-accent-50); } } </style> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="2.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="6.5" cy="2.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="10.5" cy="2.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="2.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="6.5" r="1.2"/> <circle class="r0" fill="var(--color-background-default-tertiary)" cx="6.5" cy="6.5" r="1.2"/> <circle class="r0" fill="var(--color-background-default-tertiary)" cx="10.5" cy="6.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="6.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="10.5" r="1.2"/> <circle class="r0" fill="var(--color-background-default-tertiary)" cx="6.5" cy="10.5" r="1.2"/> <circle class="r0" fill="var(--color-background-default-tertiary)" cx="10.5" cy="10.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="10.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="14.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="6.5" cy="14.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="10.5" cy="14.5" r="1.2"/> <circle class="r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="14.5" r="1.2"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="icon-pulse"> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="2.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="6.5" cy="2.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="10.5" cy="2.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="2.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="6.5" r="1.2"/> <circle class="icon-pulse_r0" fill="var(--color-background-default-tertiary)" cx="6.5" cy="6.5" r="1.2"/> <circle class="icon-pulse_r0" fill="var(--color-background-default-tertiary)" cx="10.5" cy="6.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="6.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="10.5" r="1.2"/> <circle class="icon-pulse_r0" fill="var(--color-background-default-tertiary)" cx="6.5" cy="10.5" r="1.2"/> <circle class="icon-pulse_r0" fill="var(--color-background-default-tertiary)" cx="10.5" cy="10.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="10.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="2.5" cy="14.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="6.5" cy="14.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="10.5" cy="14.5" r="1.2"/> <circle class="icon-pulse_r1" fill="var(--color-background-default-tertiary)" cx="14.5" cy="14.5" r="1.2"/></svg>
</div>
}

Expand Down Expand Up @@ -688,13 +688,13 @@ templ Shortcut() {

templ SidebarHide() {
<div style="width: 16px; height: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"> <path fill="currentColor" d="M12.5 2A2.5 2.5 0 0 1 15 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 11.5v-7A2.5 2.5 0 0 1 3.5 2h9Zm-9 1A1.5 1.5 0 0 0 2 4.5v7A1.5 1.5 0 0 0 3.5 13H5V3H3.5ZM6 13h6.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 3H6v10Zm3.146-7.354a.5.5 0 1 1 .708.708L8.707 7.5H12.5a.5.5 0 0 1 0 1H8.707l1.147 1.146a.5.5 0 1 1-.708.707l-2-2a.5.5 0 0 1 0-.707l2-2Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="icon-sidebar-hide"> <g class="icon-sidebar-hide_anim"> <g class="icon-sidebar-hide_anim_line"> <rect width="1" height="10" fill="currentColor" stroke="none" opacity="1" transform="translate(5.5,8) translate(-0.5,-5)" /> </g> <g class="icon-sidebar-hide_anim_rect"> <rect width="13" height="11" fill="none" rx="2" stroke="currentColor" fill-rule="nonzero" transform="translate(8.5,7.5) translate(-7,-5)"/> </g> <g class="icon-sidebar-hide_anim_arrow"> <path d="M9.14648,5.64648C9.34175,5.45122,9.65825,5.45122,9.85352,5.64648C10.0488,5.84175,10.0488,6.15825,9.85352,6.35352L8.70703,7.5L12.5,7.5C12.7761,7.5,13,7.72386,13,8C13,8.27614,12.7761,8.5,12.5,8.5L8.70703,8.5L9.85352,9.64648C10.0488,9.84175,10.0488,10.1583,9.85352,10.3535C9.65825,10.5488,9.34175,10.5488,9.14648,10.3535L7.14648,8.35352C7.05272,8.25975,7.00001,8.1326,7,8C7,7.8674,7.05272,7.74025,7.14648,7.64648L9.14648,5.64648Z" fill="currentColor" transform="translate(9, 0)" /> </g> </g></svg>
</div>
}

templ SidebarShow() {
<div style="width: 16px; height: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"> <path fill="currentColor" d="M12.5 2A2.5 2.5 0 0 1 15 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 11.5v-7A2.5 2.5 0 0 1 3.5 2h9Zm-9 1A1.5 1.5 0 0 0 2 4.5v7A1.5 1.5 0 0 0 3.5 13H5V3H3.5ZM6 13h6.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 3H6v10Zm4.146-7.354a.5.5 0 0 1 .707 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 1 1-.707-.708L11.293 8.5H7.5a.5.5 0 0 1 0-1h3.793l-1.146-1.146a.5.5 0 0 1 0-.708Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="icon-sidebar-show"> <g class="icon-sidebar-show_anim_arrow"> <path d="M9.14648,5.64648C9.34175,5.45122,9.65825,5.45122,9.85352,5.64648C10.0488,5.84175,10.0488,6.15825,9.85352,6.35352L8.70703,7.5L12.5,7.5C12.7761,7.5,13,7.72386,13,8C13,8.27614,12.7761,8.5,12.5,8.5L8.70703,8.5L9.85352,9.64648C10.0488,9.84175,10.0488,10.1583,9.85352,10.3535C9.65825,10.5488,9.34175,10.5488,9.14648,10.3535L7.14648,8.35352C7.05272,8.25975,7.00001,8.1326,7,8C7,7.8674,7.05272,7.74025,7.14648,7.64648L9.14648,5.64648Z" fill="currentColor" opacity="1" /> </g> <g class="icon-sidebar-show_anim_line"> <rect width="1" height="10" fill="currentColor" rx="0" stroke="none" transform="translate(1.5,8) translate(-0.5,-5)" /> </g> <rect class="icon-sidebar-show_anim_rect" width="13" height="11" fill="none" rx="2" stroke="currentColor" fill-rule="nonzero" transform="translate(8.5,7.5) translate(-7,-5)"/></svg>
</div>
}

Expand Down
Loading
Loading