SVG icons for Django.
Project description
django-svgicon
SVG icons for Django.
- Automatic SVG Sprite generator based on icons used in the page
- Read icons from directory and Python dict
- Customizable template tags
- In-memory cache
Requirements
- Django >= 5
- Python >= 3.10
Installation
pip install django-svgicon
To parse SVG files faster, install lxml [optional]:
pip install lxml
Configuration
Add svgicon to your INSTALLED_APPS:
INSTALLED_APPS = (
...
"svgicon",
"YOUR_APP",
...
)
Add the middleware:
MIDDLEWARE = [
...
"svgicon.middleware.SvgiconMiddleware",
...
]
Usage
- Put the icons in
yourapp/static/svgicons, for example:
yourapp/static/svgicons/menu.svg
- Use it in your templates like this:
{% load svgicon %}
<!DOCTYPE html>
<html>
<head>
<title>The App</title>
{% svgicon_style %} <!-- before your app.css -->
</head>
<body>
{% svgicon_sprite %}
<main>
<p>Click on the {% icon "menu" %} button to open the menu.</p>
<button>{% icon "menu" %}</button>
</main>
</body>
</html>
Rendered output:
<!DOCTYPE html>
<html>
<head>
<title>The App</title>
<style>.svgicon{width:1em;height:1em;fill:currentColor;vertical-align:middle;}</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;"><symbol id="icon-menu" viewbox="0 0 24 24"><path d="M3,3V21H21V3" /></symbol></svg>
<main>
<p>Click on the <svg class="svgicon" aria-hidden="true"><use href="#icon-menu"></use></svg> button to open the menu.</p>
<button><svg class="svgicon" aria-hidden="true"><use href="#icon-menu"></use></svg></button>
</main>
</body>
</html>
For more examples like changing size or using aria-label, follow the
demo template.
Settings
# By default, svgicon searches for icons using Django's static finders,
# unless you specify a directory like this
SVGICON_ICONS_DIR = BASE_DIR / "myicons"
# Load icons from dict
SVGICON_ICONS = dict(
square=(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">'
'<path d="M3,3V21H21V3" />'
"</svg>"
),
)
# svgicon uses '1em' width and height for icons, which are relative to the parent's
# font-size.
SVGICON_WIDTH = '1em'
SVGICON_HEIGHT = '1em'
# Default CSS class for each icon
SVGICON_CSS_CLASS = 'svgicon'
# SVG symbol id prefix
SVGICON_SYMBOL_PREFIX = 'icon-'
# svgicon template tag names
SVGICON_TAGS = dict(
ICON="icon",
SPRITE="svgicon_sprite",
STYLE="svgicon_style",
)
To auto-load svgicon without mentioning {% load svgicon %},
modify template settings like this:
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [],
"APP_DIRS": True,
"OPTIONS": {
...
"builtins": ["svgicon.templatetags.svgicon"], # add this
...
},
},
]
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
django_svgicon-0.1.1.tar.gz
(10.3 kB
view details)
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django_svgicon-0.1.1.tar.gz.
File metadata
- Download URL: django_svgicon-0.1.1.tar.gz
- Upload date:
- Size: 10.3 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.12.9
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
e38035fd674aadad3d800ebc6c07d91434bbe1ccbaa384ec99cba64a6169dfa1
|
|
| MD5 |
782f54f995383415baf984215fd0b1cf
|
|
| BLAKE2b-256 |
8d3e875f060fc7cd23208729f0728edeffb3491d8f289920b4fb4aba5865d7dc
|
File details
Details for the file django_svgicon-0.1.1-py3-none-any.whl.
File metadata
- Download URL: django_svgicon-0.1.1-py3-none-any.whl
- Upload date:
- Size: 12.8 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.12.9
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
421aa9d5295ee9631db9d45b695ab2574b135cef6b1eb2665741f4b9afd771c6
|
|
| MD5 |
e77357d23698a4b24ee8754f0e81e95f
|
|
| BLAKE2b-256 |
7f7eb665feedfd13786f57c52ac1ee69ec9617bc3794d8e42bb775f1a546430a
|
