Skip to main content

Wagtail Icon Chooser

Project description

Wagtail Icon Chooser

Icon chooser widget for Page/Model fields and Stream Field

Installation

pip install wagtail-icon-chooser

Add wagtailiconchooser to your installed apps

 INSTALLED_APPS = [
        ...
        "wagtailiconchooser",
        ...
        ]

Usage

  • Use wagtailiconchooser.widgets.IconChooserWidget in FieldPanels
  • Use wagtailiconchooser.blocks.IconChooserBlock in StreamField blocks
from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.fields import StreamField
from wagtail.models import Page

from wagtailiconchooser.blocks import IconChooserBlock
from wagtailiconchooser.widgets import IconChooserWidget


class MyPage(Page):
    icon = models.CharField(max_length=100, null=True, blank=True)
    stream_field_with_icon = StreamField([
        ('icon', IconChooserBlock()),
    ], use_json_field=True, blank=True, null=True)

    content_panels = Page.content_panels + [
        FieldPanel("icon", widget=IconChooserWidget),
        FieldPanel("stream_field_with_icon"),
    ]

Screenshots

  • Icon Chooser Widgets for Page field and Stream field

Sample Panels

  • Icon List Modal

Icon Modal

Showing icons on your frontend templates

The Icons can be used out of the box in templates rendered on the Wagtail admin, without any custom configuration.

Below are two possible ways of getting your svg icon to show on your custom frontend template:

1. Including individual SVG markup

You can use the svg_icon template tag as below:

{% load wagtailiconchooser_tags %}

....

{% block content %}

<div>
    {% svg_icon name=page.icon classname="your-custom-class" %}
</div>

{% endblock content %}

.....

2. Using SVG Sprites

  • Add all icons to your template's context, and have them as a svg sprite. Wagtail provides a way to get all the admin icons as a svg sprite, using a view found at wagtail.admin.views.home.icons
  • Add the svg sprite to your template
  • use the icon template tag from wagtailadmin_tags to render your svg, which will the link with the icon from the svg sprite
  • or directly render the svg to the template

We provide custom abstract page CustomIconPage, that helps you to achieve the above.

This just overrides the get_context method of the Wagtail Page class, to add the svg sprite string.

from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page

from wagtailiconchooser.models import CustomIconPage
from wagtailiconchooser.widgets import IconChooserWidget


class MyPage(CustomIconPage, Page):
    icon = models.CharField(max_length=100, null=True, blank=True)

    content_panels = Page.content_panels + [
        FieldPanel("icon", widget=IconChooserWidget)
    ]

Your template will now have a svg sprite context object, with the key icons_svg_sprite

You can add the svg sprite anywhere in the template, and use the icon tag

{% load wagtailadmin_tags %}

....

{% block content %}

{% if icons_svg_sprite %}
{{ icons_svg_sprite|safe }}
{% endif %}

<div>
    {% icon name=page.icon %}
</div>

{% endblock content %}


.....

You can also directly render your icon without using the icon from wagtailadmin_tags template tag, sincewagtailadmin_tags is clearly meant to be used on the admin side of things.

Just replace {% icon name=page.icon %} with

{{ icons_svg_sprite|safe }}

<svg class="icon">
    <use href="#icon-{{ page.icon }}"></use>
</svg>

NOTE This approach will load all the icons added to Wagtail (using the register_icons hook) to your template. If you have registered many SVG icons, this might increase your page's loading bandwidth and might not be efficient since you might not use all the icons.

If you have a list of icons that are known, you can create a svg sprite containing only those icons, by using the function get_svg_sprite_for_icons. This can be used in a view. For example:

from django.shortcuts import render
from wagtailiconchooser.utils import get_svg_sprite_for_icons


def my_view(request):
    icons = ["some-icon", "some-other-icon", ...]
    svg_sprite = get_svg_sprite_for_icons(icons)

    context = {
        "svg_sprite": svg_sprite
    }

    return render(request, "template.html", context=context)

In your template.html you will have access to the svg_sprite context, and you can render and use as below:

<div>
    {{ svg_sprite|safe }}
</div>

<svg class="icon">
    <use href="#icon-some-icon"></use>
</svg>

<svg class="icon">
    <use href="#icon-some-other-icon"></use>
</svg>

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

wagtail_icon_chooser-0.0.7.tar.gz (8.2 kB view details)

Uploaded Source

Built Distribution

wagtail_icon_chooser-0.0.7-py3-none-any.whl (11.3 kB view details)

Uploaded Python 3

File details

Details for the file wagtail_icon_chooser-0.0.7.tar.gz.

File metadata

  • Download URL: wagtail_icon_chooser-0.0.7.tar.gz
  • Upload date:
  • Size: 8.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/5.0.0 CPython/3.12.3

File hashes

Hashes for wagtail_icon_chooser-0.0.7.tar.gz
Algorithm Hash digest
SHA256 5bc78c21a6e275419073636dbe6ed811d6d2e3550fcbde2cbdd31d8961d6e774
MD5 6ddb8111d42f57082f0702dc4b04b744
BLAKE2b-256 93fe51f481ce08813ccba18e13b29bfe207e29cd2296c11bff0b2e7f21d5044b

See more details on using hashes here.

File details

Details for the file wagtail_icon_chooser-0.0.7-py3-none-any.whl.

File metadata

File hashes

Hashes for wagtail_icon_chooser-0.0.7-py3-none-any.whl
Algorithm Hash digest
SHA256 e6533bd1656a9b3068c613acb15b5e8c29d781ea47670c73c7f91ef9a5fc1ac4
MD5 797a37441a744bb600c3144ce8ed2d7b
BLAKE2b-256 39170d6c1b9ab070dbda9e9bc5db5a0eda1aae424fb6f65e64e415ed1ac715bd

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page