ReThinking Django Template Series:
Introduction
During the development, we need to display inline SVG in Django templates sometimes.
Inline SVG refers to directly embedding the entire SVG source code within your HTML document, rather than linking to an external SVG file. This means the <svg> tag and all its internal elements (like <path>, <circle>, etc.) are written directly in your HTML, similar to how you would write any other HTML element
For example, if we go to https://heroicons.com/, we can copy SVG source code and paste it into Django templates directly.
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg>
If we want to change the style of the svg, we can add some classes to the svg tag to make it work.
However, this approach has several drawbacks:
- Maintenance Overhead: Updating an SVG requires modifying every instance, making maintenance cumbersome.
- Lack of Reusability: No centralized management or easy way to reuse SVG assets.
In this post, I will talk about some better approaches to handle SVG icons in Django templates.
Heroicons
You can use Django package heroicons to use Heroicons in your Django templates.
After installing it, you can render SVG icons in your templates like this:
{% load heroicons %}
{% heroicon_solid "archive-box" size=20 %}
Notes:
- This package only supports Heroicons, so it is not a general solution for SVG icons.
dj-svg
dj-svg is an successor of the django-inline-svg, both of them are built by the same developer.
They aim to provide a general solution for SVG icons in Django templates.
After installing and configuring it, you can use SVG icons in your templates like this:
{% load svg %}
<h1 class="logo">{% svg 'logo' class="css-class" height="16" width="16" %}</h1>
Notes:
- Compared with django-heroicons, this package supports any SVG icons, not just Heroicons.
Component
You can also create a SVG component and pass the svg name and extra attributes to the component, then the component would render the SVG icon dynamically.
Below is a simple example of using django-viewcomponent
from django_viewcomponent import component
@component.register("svg")
class SvgComponent(component.Component):
def __init__(self, name, css_class="", **kwargs):
self.name = name
self.css_class = css_class
def get_template_name(self):
return f"svg_{self.name}.svg"
We can use this component in our Django templates like this:
{% load viewcomponent_tags %}
{% component "svg" 'archive-box' css_class="icon-class" %}
Notes:
- Components let you pass any attributes to the SVG, enabling highly customized rendering to fit specific needs.
- You can even create multiple components to handle SVG rendering in different ways.
- There are many server side component solution in Django and you are free to pick one you like to build your own SVG component.
Conclusion
Removing tedious inline svg code from Django templates is a good practice to keep your code clean and maintainable.
In this post, I have introduced several approaches to handle SVG icons in Django templates, including using packages like heroicons and dj-svg, as well as creating a custom component.
Each approach has its own advantages and can be chosen based on your specific needs and preferences. I personally prefer the component solution for its generality and ease of use.
ReThinking Django Template Series: