close
Skip to content

Added encoded_icon helper#84

Merged
eelcoj merged 1 commit intomainfrom
encoded-icons
Nov 16, 2025
Merged

Added encoded_icon helper#84
eelcoj merged 1 commit intomainfrom
encoded-icons

Conversation

@eelcoj
Copy link
Copy Markdown
Collaborator

@eelcoj eelcoj commented Sep 16, 2025

Not sure how useful this would be. So if you read this, let me know. 👇


This adds a encoded_icon helper. These could be used in before/after-pseudo selectors or set as custom properties (CSS vars), eg. encoded_icon("circle-notch", class: "size-6 stroke-4").

So it converts the icons SVG to something like:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdib3g9IjAgMCAyNTYgMjU2IiBzdHJva2Utd2lkdGg9IiIgY2xhc3M9InNpemUtNCI+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIGZpbGw9Im5vbmUiPjwvcmVjdD48cG9seWxpbmUgcG9pbnRzPSI0MCAxNDQgOTYgMjAwIDIyNCA3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+PC9wb2x5bGluZT48L3N2Zz4= 

Use case I have, see gif below, is a loading icon/spinner for a turbo stream that might take a bit longer. It is conditionally shown using aria-busy=true (with Tailwind: [&[aria-busy='true']]:before:block).

encoded-icon

(added sleep 2 for demo purposes).

  • Update README to include how to to use the helper outside of view_context (ie. poros)

@eelcoj eelcoj merged commit 62eac4d into main Nov 16, 2025
15 checks passed
@eelcoj eelcoj deleted the encoded-icons branch November 16, 2025 10:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant