Skip to main content

Use heroicons in your Django and Jinja templates.

Project description

https://img.shields.io/github/workflow/status/adamchainz/heroicons/CI/main?style=for-the-badge https://img.shields.io/badge/Coverage-100%25-success?style=for-the-badge https://img.shields.io/pypi/v/heroicons.svg?style=for-the-badge https://img.shields.io/badge/code%20style-black-000000.svg?style=for-the-badge pre-commit

Use heroicons in your Django and Jinja templates.

Requirements

Python 3.7 to 3.10 supported.

Django 3.2 to 4.0 supported.


Working on a Django project? Improve your skills with one of my books.


Usage

The heroicons package supports both Django templates and Jinja templates. Follow the appropriate guide below.

Django templates

  1. Install with python -m pip install heroicons[django].

  2. 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: 24 for outline and 20 for solid.

  • Any number of keyword arguments. These will be added as attributes in the output HTML. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

    Most attributes will be added to the <svg> tag containing the icon, but these attributes will be attached to the inner <path> tags instead:

    • stroke-linecap
    • stroke-linejoin
    • vector-effect

Note: unlike the SVG code you can copy from heroicons.com, there is no default class.

Examples

An outline “academic-cap” icon:

{% heroicon_outline "academic-cap" %}

The same icon, solid, at 40x40 pixels, with some CSS classes:

{% heroicon_outline "academic-cap" size=40 class="h-4 w-4 inline" %}

That icon again, but with the paths changed to a narrower stroke width, and a “data-controller” attribute declared:

{% heroicon_outline "academic-cap" stroke_width=1 data_controller="academia" %}

Jinja templates

  1. Install with python -m pip install heroicons[jinja].

  2. Adjust your Jinja Environment to add the two global functions heroicon_outline and heroicon_solid, imported from heroicons.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: 24 for outline and 20 for solid.

  • Any number of keyword arguments. These will be added as HTML attributes to the output HTML. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

    Most attributes will be added to the <svg> tag containing the icon, but these attributes will be attached to the inner <path> tags instead:

    • stroke-linecap
    • stroke-linejoin
    • vector-effect

Note: unlike the SVG code you can copy from heroicons.com, there is no default class.

Examples

An outline “academic-cap” icon:

{{ heroicon_outline("academic-cap") }}

The same icon, solid, at 40x40 pixels, with some CSS classes:

{{ heroicon_solid("academic-cap", size=40, class="h-4 w-4 inline") %}

That icon again, but with the paths changed to a narrower stroke width, and a “data-controller” attribute declared:

{{ heroicon_outline("academic-cap", stroke_width=1, data_controller="academia") %}

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

heroicons-1.7.0.tar.gz (124.5 kB view hashes)

Uploaded source

Built Distribution

heroicons-1.7.0-py3-none-any.whl (121.0 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page