Skip to content

Change svg color from file

Adora edited this page Jul 26, 2024 · 4 revisions

For some reason, this didn't worked for about half hour, and then, it started to work:

<a href="{% url 'posts:create' %}">
    <svg height="24" width="24">
      <use
        class="icon"
        href="{% static 'img/square-rounded-plus.svg' %}#icon" 
        height="24"
        width="24"
      ></use>
    </svg>
</a>

And the svg (square-rounded-plus from tabler.io):

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24" class="icon icon-tabler icons-tabler-filled icon-tabler-square-rounded-plus" fill="var(--stari-color-fill)" id="icon">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
    <path d="M12 2l.324 .001l.318 .004l.616 .017l.299 .013l.579 .034l.553 .046c4.785 .464 6.732 2.411 7.196 7.196l.046 .553l.034 .579c.005 .098 .01 .198 .013 .299l.017 .616l.005 .642l-.005 .642l-.017 .616l-.013 .299l-.034 .579l-.046 .553c-.464 4.785 -2.411 6.732 -7.196 7.196l-.553 .046l-.579 .034c-.098 .005 -.198 .01 -.299 .013l-.616 .017l-.642 .005l-.642 -.005l-.616 -.017l-.299 -.013l-.579 -.034l-.553 -.046c-4.785 -.464 -6.732 -2.411 -7.196 -7.196l-.046 -.553l-.034 -.579a28.058 28.058 0 0 1 -.013 -.299l-.017 -.616c-.003 -.21 -.005 -.424 -.005 -.642l.001 -.324l.004 -.318l.017 -.616l.013 -.299l.034 -.579l.046 -.553c.464 -4.785 2.411 -6.732 7.196 -7.196l.553 -.046l.579 -.034c.098 -.005 .198 -.01 .299 -.013l.616 -.017c.21 -.003 .424 -.005 .642 -.005zm0 6a1 1 0 0 0 -1 1v2h-2l-.117 .007a1 1 0 0 0 .117 1.993h2v2l.007 .117a1 1 0 0 0 1.993 -.117v-2h2l.117 -.007a1 1 0 0 0 -.117 -1.993h-2v-2l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="var(--stari-color-fill)"/>
</svg>

Example 1:

.icon {
    --stari-color-fill: #ffffff;
}

Example 1

Example 2:

.icon {
    --stari-color-fill: #f6ff00;
}

Example 2

I hope this helps someone, and that some kind soul who knows why it didn't work at first can explain it to us. (After some tests I think it had to do with the cache, since even if I refreshed the page completely I saw a previous color, and when browsing, the element reloads to the most current version)

If you have more interest in the context of the project you can check the file or the page.

Clone this wiki locally