Skip to main content

Use iconic.app icons in your Django and Jinja templates.

Project description

https://img.shields.io/github/workflow/status/monty5811/iconic/CI/main?style=for-the-badge https://img.shields.io/codecov/c/github/monty5811/iconic/main?style=for-the-badge https://img.shields.io/pypi/v/iconicicons.svg?style=for-the-badge https://img.shields.io/badge/code%20style-black-000000.svg?style=for-the-badge pre-commit

Use iconic.app icons in your Django and Jinja templates.

Requirements

Python 3.6 to 3.9 supported.

Django 2.2 to 3.2 supported.


This was forked from adamchainz/heroicons <https://github.com/adamchainz/heroicons>

Are your tests slow? Check out Adam’s book Speed Up Your Django Tests which covers loads of best practices so you can write faster, more accurate tests.


Usage

The iconic package supports both Django templates and Jinja2 templates. Follow the appropriate guide below.

Django templates

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

  2. Add to your INSTALLED_APPS:

    INSTALLED_APPS = [
        ...,
        'iconic',
        ...,
    ]
    

Now in your templates you can load the template library with:

{% load iconic %}

This provides a tag to render <svg> icons: iconic_icon. The tags take these arguments:

  • name, positional: the name of the icon to use. You can see the icon names on the iconic.app 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 size: 24.
  • 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 “announcement” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{% iconic_icon "announcement" size=48 class="h-4 w-4 inline" data_controller="academia" %}

Jinja templates

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

  2. Adjust your Jinja Environment to add the global function iconic, imported from iconic.jinja. For example:

    from iconic.jinja import iconic_icon
    from jinja2 import Environment
    
    env = Environment()
    env.globals.update(
        {
            "iconic_icon": iconic_icon,
        }
    )
    

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 iconic.app 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 size: 24.
  • 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 “announcement” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{% iconic("announcement", size=48, class="h-4 w-4 inline", 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.

Files for iconic, version 1.0.0
Filename, size File type Python version Upload date Hashes
Filename, size iconic-1.0.0-py3-none-any.whl (66.1 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size iconic-1.0.0.tar.gz (69.1 kB) File type Source Python version None Upload date Hashes View

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 Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page