Django Icon packs with template partials

As I have been building out the startup (launching very very soon), I was struck by the pattern that I mentioned last year of Claude grouping lots partials into a single file. I think we are almost at the point of being able to define simple components in a template without a templatetag. My goal here is discovering how much we can do with the vanilla Django Template language with the recent additions. I still need to work on the specifics, but currently I have a file called icons.html in my project which has the lots of the following:

{% partialdef wallet %}
<svg class="size-5 text-gray-500 group-has-[:checked]:text-white"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M21 12C21 10.7574 19.9926 9.75 18.75 9.75H15C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75H5.25C4.00736 9.75 3 10.7574 3 12M21 12V18C21 19.2426 19.9926 20.25 18.75 20.25H5.25C4.00736 20.25 3 19.2426 3 18V12M21 12V9M3 12V9M21 9C21 7.75736 19.9926 6.75 18.75 6.75H5.25C4.00736 6.75 3 7.75736 3 9M21 9V6C21 4.75736 19.9926 3.75 18.75 3.75H5.25C4.00736 3.75 3 4.75736 3 6V9" />
</svg>
{% endpartialdef wallet %}
{% partialdef percent-badge %}
<svg class="size-5 text-gray-500 group-has-[:checked]:text-white">
    ....
</svg>
{% endpartialdef percent-badge %}

The general problem here is quite a few things are hardcode so to have different coloured icons would be repeating each partial which is obviously not ideal. I have a proof of concept that would allow this kind of repeatablity. It looks like this:

{% partialdef star-solid %}
  <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
{% endpartialdef star-solid %}

{% partialdef credit-card %}
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
{% endpartialdef credit-card %}

{% partialdef icon %}
<svg class="{{ css_classes }}" fill="none" stroke-width="1.5"
stroke="currentColor" viewBox="0 0 24 24">
  {% with icon_path="icons/heroicons.html#"|add:icon_name %}
    {% include icon_path %}
  {% endwith %}
</svg>
{% endpartialdef icon %}

and is used like so:

{% include "icons/heroicons.html#icon" with icon_name='credit-cards' css_classes='size-10' %}

There are a couple of issues that need to be figured out. First is the being allowed to specify different html attributes on the svg tag such as fill, stroke, stroke-width etc. I don't have a solution, but I do know third-party libraries have template tags to handle this. Second is the hack to dynamically include a partial in the same file. Ideally the in the icon partial, we could specify the partial directly with a variable over using the with and include tags.

I'm going to keep playing with this, but I like the appeal of having a single drop in template which then has a whole template pack available to a project. I could easily see a package which then has a file per icon pack (heroicons, font awesome, flaticon etc).