Skip to content

Conversation

@eelcoj
Copy link
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)

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.

2 participants