heroicons
Use heroicons in your Django and Jinja templates.
Requirements
Python 3.6 to 3.9 supported.
Django 2.2 to 3.2 supported.
Are your tests slow? Check out my book Speed Up Your Django Tests which covers loads of best practices so you can write faster, more accurate tests.
Usage
The heroicons package supports both Django templates and Jinja2 templates. Follow the appropriate guide below.
Django templates
Install with
python -m pip install heroicons[django].Add to your
INSTALLED_APPS:INSTALLED_APPS = [ ..., 'heroicons', ..., ]
Now in your templates you can load the template library with:
{% load heroicons %}
This provides two tags to render <svg> icons: heroicon_outline and heroicon_solid, corresponding to the two icon styles in the set. The tags take these arguments:
name, positional: the name of the icon to use. You can see the icon names on the heroicons.com grid.size, keyword: an integer that will be used for the width and height attributes of the output<svg>tag. Defaults to the icons’ designed sizes:24for outline and20for solid.- Any number of keyword arguments. These will be added as HTML attributes to the output
<svg>tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g.data-attributes.
For example, to render an outline “academic-cap” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:
{% heroicon_outline "academic-cap" size=48 class="h-4 w-4 inline" data_controller="academia" %}
Jinja templates
Install with
python -m pip install heroicons[jinja].Adjust your Jinja
Environmentto add the two global functionsheroicon_outlineandheroicon_solid, imported fromheroicons.jinja. For example:from heroicons.jinja import heroicon_outline, heroicon_solid from jinja2 import Environment env = Environment() env.globals.update( { "heroicon_outline": heroicon_outline, "heroicon_solid": heroicon_solid, } )
Now in your templates you can call those two functions, which render <svg> icons corresponding to the two icon styles in the set. The functions take these arguments:
name, positional: the name of the icon to use. You can see the icon names on the heroicons.com grid.size, keyword: an integer that will be used for the width and height attributes of the output<svg>tag. Defaults to the icons’ designed sizes:24for outline and20for solid.- Any number of keyword arguments. These will be added as HTML attributes to the output
<svg>tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g.data-attributes.
For example, to render an outline “academic-cap” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:
{{ heroicon_outline("academic-cap", size=48, class="h-4 w-4 inline", data_controller="academia") %}
1 Feb 1, 2022
4 Nov 18, 2021
139 Dec 5, 2022
1.8k Jan 2, 2023
167 Nov 10, 2022
1.3k Dec 30, 2022
2.4k Dec 24, 2022
2.7k Jan 7, 2023
909 Dec 26, 2022
1.1k Dec 14, 2022
703 Dec 22, 2022
1 Dec 9, 2021
384 Nov 23, 2022
59 Dec 21, 2022
940 Jan 3, 2023
68 Oct 19, 2022
8 Oct 28, 2022