No way to use these icons directly with frameworks like Django

[ddahan]

Hi Tailwind team! In the documentation, it is stated:

The quickest way to use these icons is to simply copy the source

However, I need lots of icons and can't afford filling my HTML with too many SVG attributes, as it makes the HTML longer and harder to read. That's why I decided to download all icon SVG files to include them as templates in Django.

Now to display an icon, I can write : {% include 'heroicons/24/outline/archive-box-arrow-down.svg' %}.

However, this way, I have no way to modify svg attributes directly. For the icon size, a workaround can be to wrap it in a div (but it's a little ugly):

<div class="w-6 h-6">
  {% include 'heroicons/24/outline/archive-box-arrow-down.svg' %}
</div>

But for other attributes like stroke-width, it seems there's no way to modify them at all, as they should be directly on the <svg> tag itself.

Is there any elegant solution to this problem? For now, the only solution I can think of would be to rewrite every tailwind icon, to make them look like a real Django template with variables that can be filled. For example:

<svg xmlns="http://www.w3.org/2000/svg"
  class="{{class}}"
  fill="{{fill|default:'none'}}"
  stroke-width="{{strokeWidth|default:'2'}}"
  stroke="{{stroke|default:'currentColor'}}"
  viewBox="0 0 24 24"
  aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="..."/>
</svg>

And then using icons like this:

{% include 'heroicons/24/outline/archive-box-arrow-down.html' with class="w-10 h-10" strokeWidth="2" %}

I guess I would write such a script but I'd like to avoid useless work if there is another way. Thanks.

[adamwathan]

For now, the only solution I can think of would be to rewrite every tailwind icon, to make them look like a real Django template with variables that can be filled.

Yeah I have never used Django but this seems like a reasonable way to handle it if that's how things usually work there. We can't provide libraries for every framework under the sun unfortunately (I regret even creating the React/Vue libraries honestly), at the end of the day we are just providing some SVG icons and how you integrate those into your project is up to you.

[ddahan]

Ok, fair enough :) I was just expecting some magic workaround I didn't think of. I'll build a django-heroicons repo for that purpose. Thanks.