Skip to main content

Iconify API implementation and tools for Django projects

Project description

This re-usable app hepls integrating Iconify into Django projects. Iconify is a unified icons framework, providing access to 40,000+ icons from different icon sets.

Iconify replaces classical icon fonts, claiming that such fonts would get too large for some icon sets out there. Instead, it provides an API to add icons in SVG format from its collections.

django-iconify eases integration into Django. Iconify, to be performant, uses a server-side API to request icons from (in batches, with transformations applied, etc.). Upstream provides a CDN-served central API as well as self-hosted options written in PHP or Node.js, all of which are undesirable for Django projects. django-iconify implements the Iconify API as a re-usable Django app.

Installation

To add django-iconify to a project, first add it as dependency to your project, e.g. using poetry:

$ poetry add django-iconify

Then, add it to your INSTALLED_APPS setting to make its views available later:

INSTALLED_APPS = [
    ...
    "dj_iconify.apps.DjIconifyConfig",
    ...
]

You need to make the JSON collection available by some means. You can download it manually, or use your favourite asset management library. For instance, you could use django-yarnpkg to depend on the @iconify/json Yarn package:

YARN_INSTALLED_APPS = [
  "@iconify/json",
]
NODE_MODULES_ROOT = os.path.join(BASE_DIR, "node_modules")

No matter which way, finally, you have to configure the path to the collections in your settings:

ICONIFY_JSON_ROOT = os.path.join(NODE_MODULES_ROOT, "@iconify", "json")

If you do not use django-yarnpkg, construct the path manually, ot use whatever mechanism your asset manager provides.

Finally, include the URLs in your urlpatterns:

from django.urls import include, path

urlpatterns = [
    path("icons/", include("dj_iconify.urls")),
]

Usage

Iconify SVG Framework

To use the Iconify SVG Framework, get its JavaScript from somewhere (e.g. using django-yarnpkg again, or directly from the CDN, from your ow nstatic files, or wherever).

django-iconify provides a view that returns a small JavaScript snippet that configures the Iconify SVG Framework to use its API endpoints. In the following example, we first load this configuration snippet, then include the Iconify SVG Framework from the CDN (do not do this in production, where data protection matters):

<script type="text/javascript" src="{% url 'config.js' %}"></script>
<script type="text/javascript" src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>

Loading SVG directly (“How to use Iconify in CSS”)

django-iconify also implements the direct SVG API. For now, you have to use Django’s regular URL reverse resolver to construct an SVG URL, or craft it by hand:

<img src="{% url 'iconify_svg' 'mdi' 'account' %}?rotate=90deg %}" />

Documentation on what query parameters are supported can be found in the documentation on How to use Iconify in CSS.

In the future, a template tag will be available to simplify this.

Including SVG in template directly

Not implemented yet

In the future, a template tag will be available to render SVG icons directly into the template, which can be helpful in situations where retrieving external resources in undesirable, like HTML e-mails.

Example

The source distribution as well as the Git repository contain a full example application that serves the API under /icons/ and a test page under /test.html.

It is reduced to a minimal working example for the reader’s convenience.

Iconify: https://iconify.design/ django-iconify: https://edugit.org/AlekSIS/libs/django-iconify poetry: https://python-poetry.org/ JSON collection: https://github.com/iconify/collections-json django-yarnpkg: https://edugit.org/AlekSIS/libs/django-yarnpkg Iconify SVG Framework: https://docs.iconify.design/implementations/svg-framework/ How to use Iconify in CSS: https://docs.iconify.design/implementations/css.html Git repository: https://edugit.org/AlekSIS/libs/django-iconify

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

django-iconify-0.1.0.tar.gz (16.8 kB view details)

Uploaded Source

Built Distribution

django_iconify-0.1.0-py3-none-any.whl (18.9 kB view details)

Uploaded Python 3

File details

Details for the file django-iconify-0.1.0.tar.gz.

File metadata

  • Download URL: django-iconify-0.1.0.tar.gz
  • Upload date:
  • Size: 16.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.4 CPython/3.9.1+ Linux/5.10.0-1-amd64

File hashes

Hashes for django-iconify-0.1.0.tar.gz
Algorithm Hash digest
SHA256 6ceb8d3960bdf86c451df767fc186f7ec0180ea1affb7536abe5fd4ccbedbbf1
MD5 f546322ebfe879786358552c3a3d924c
BLAKE2b-256 f131d86e1ae171bdc07b60e59e70cc91a8c23adc3cafede22c2060851ed018d2

See more details on using hashes here.

Provenance

File details

Details for the file django_iconify-0.1.0-py3-none-any.whl.

File metadata

  • Download URL: django_iconify-0.1.0-py3-none-any.whl
  • Upload date:
  • Size: 18.9 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.4 CPython/3.9.1+ Linux/5.10.0-1-amd64

File hashes

Hashes for django_iconify-0.1.0-py3-none-any.whl
Algorithm Hash digest
SHA256 2dd01019ac4ea416b19e6cff72e1fee73ef4831f2163b2cb3b767460b348ac26
MD5 5cbf3edbd625430694635fe2673135ff
BLAKE2b-256 424e935cef1a3f8accb762ee0c0ceccc0080851f4fdc38519d0d810b25bc0e0b

See more details on using hashes here.

Provenance

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