Icons and icon template tag

lostplaces/lostplaces/settings.py

@@ -148,3 +148,5 @@ THUMBNAIL_ALIASES = {
         'large': {'size': (1920, 1920), 'crop': False},
     },
 }
+
+SVG_ICONS_SOURCE_FILE = os.path.join(BASE_DIR, 'lostplaces_app', 'static', 'icons', 'icons.icomoon.json')

lostplaces/lostplaces_app/static/icons/delete.svg

@@ -0,0 +1 @@
+<svg height="427pt" viewBox="-40 0 427 427.00131" width="427pt" xmlns="http://www.w3.org/2000/svg"><path d="m232.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0"/><path d="m114.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0"/><path d="m28.398438 127.121094v246.378906c0 14.5625 5.339843 28.238281 14.667968 38.050781 9.285156 9.839844 22.207032 15.425781 35.730469 15.449219h189.203125c13.527344-.023438 26.449219-5.609375 35.730469-15.449219 9.328125-9.8125 14.667969-23.488281 14.667969-38.050781v-246.378906c18.542968-4.921875 30.558593-22.835938 28.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094 4.046875-28.0625 11.46875-7.441406 7.425781-11.597656 17.519531-11.539062 28.03125v12.5h-51.199219c-19.1875.003906-35.394531 14.234375-37.878907 33.257812-2.480468 19.027344 9.535157 36.941407 28.078126 41.863282zm239.601562 279.878906h-189.203125c-17.097656 0-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0 18.8125-13.300782 33.5-30.398438 33.5zm-158.601562-367.5c-.066407-5.207031 1.980468-10.21875 5.675781-13.894531 3.691406-3.675781 8.714843-5.695313 13.925781-5.605469h88.796875c5.210937-.089844 10.234375 1.929688 13.925781 5.605469 3.695313 3.671875 5.742188 8.6875 5.675782 13.894531v12.5h-128zm-71.199219 32.5h270.398437c9.941406 0 18 8.058594 18 18s-8.058594 18-18 18h-270.398437c-9.941407 0-18-8.058594-18-18s8.058593-18 18-18zm0 0"/><path d="m173.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0"/></svg>

lostplaces/lostplaces_app/static/icons/icons.icomoon.json

@@ -0,0 +1,13 @@
+{
+	"trash": {
+		"paths": [
+			"m232.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0",
+			"m114.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0",
+			"m28.398438 127.121094v246.378906c0 14.5625 5.339843 28.238281 14.667968 38.050781 9.285156 9.839844 22.207032 15.425781 35.730469 15.449219h189.203125c13.527344-.023438 26.449219-5.609375 35.730469-15.449219 9.328125-9.8125 14.667969-23.488281 14.667969-38.050781v-246.378906c18.542968-4.921875 30.558593-22.835938 28.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094 4.046875-28.0625 11.46875-7.441406 7.425781-11.597656 17.519531-11.539062 28.03125v12.5h-51.199219c-19.1875.003906-35.394531 14.234375-37.878907 33.257812-2.480468 19.027344 9.535157 36.941407 28.078126 41.863282zm239.601562 279.878906h-189.203125c-17.097656 0-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0 18.8125-13.300782 33.5-30.398438 33.5zm-158.601562-367.5c-.066407-5.207031 1.980468-10.21875 5.675781-13.894531 3.691406-3.675781 8.714843-5.695313 13.925781-5.605469h88.796875c5.210937-.089844 10.234375 1.929688 13.925781 5.605469 3.695313 3.671875 5.742188 8.6875 5.675782 13.894531v12.5h-128zm-71.199219 32.5h270.398437c9.941406 0 18 8.058594 18 18s-8.058594 18-18 18h-270.398437c-9.941407 0-18-8.058594-18-18s8.058593-18 18-18zm0 0",
+			"m173.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0"
+		],
+		"height": "427pt",
+		"width": "427pt",
+		"viewBox": "-40 0 427 427.00131"
+	}
+}

lostplaces/lostplaces_app/static/main.css

@@ -296,6 +296,8 @@
 
 .RV-Iconized__Container {
   position: relative; }
+  .RV-Iconized__Container--small {
+    top: -.25em; }
   .RV-Iconized__Container--medium {
     top: -.5em; }
   .RV-Iconized__Container--large {
@@ -312,12 +314,18 @@
   right: 0;
   border: none; }
 
-.RV-Iconized__Container--small .RV-Iconized__Icon {
+.RV-Iconized__Container--extraSmall .RV-Iconized__Icon {
   width: 1em;
   height: 1em;
   position: relative;
   top: .125em; }
 
+.RV-Iconized__Container--small .RV-Iconized__Icon {
+  width: 1.5em;
+  height: 1.5em;
+  position: relative;
+  top: .45em; }
+
 .RV-Iconized__Container--medium .RV-Iconized__Icon {
   width: 2em;
   height: 2em;

lostplaces/lostplaces_app/templates/place/place_detail.html

@@ -1,10 +1,13 @@
 {% extends 'global.html'%}
+
 {% load static %}
+{% load thumbnail %}
+{% load svg_icon %}
+
 {% block additional_head %}
 <link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
 <script src="{% static 'maps/ol.js' %}"></script>
 {% endblock additional_head %}
-{% load thumbnail %}
 
 {% block title %}{{place.name}}{% endblock %}
 
@@ -59,19 +62,9 @@
 						<span class="LP-Text">{{photo_album.label}}</span>
 					</a>
 					{% if user == photo_album.submitted_by or user ==  place.submitted_by %}
-					<a href="google.com" class="LP-Link LP-LinkList__ItemHover">
+					<a href="google.com" class="LP-Link LP-LinkList__ItemHover" title="Delete Photo Album">
 						<div class="RV-Iconized__Container RV-Iconized__Container--small">
-							<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+							{% icon 'trash' className="RV-Iconized__Icon" %}
-								<g>
-									<g>
-										<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
-					L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
-					c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
-					l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
-					L284.286,256.002z" />
-									</g>
-								</g>
-							</svg>
 						</div>
 					</a>
 					{% endif %}

lostplaces/lostplaces_app/templates/svg_icon/icon.html

@@ -0,0 +1,5 @@
+<svg width="{{ width }}" height="{{ height }}" viewBox="{{viewBox}}" class="svg{% if className %} {{ className }}{% endif %}">
+	{% for path in paths %}
+    <path d="{{ path }}"></path>
+    {% endfor %}
+</svg>

lostplaces/lostplaces_app/templatetags/svg_icon.py

@@ -0,0 +1,30 @@
+import json
+from importlib import import_module
+
+from django.core.cache import cache
+from django.conf import settings
+from django.template import Library, TemplateSyntaxError
+
+icons_json_path = getattr(settings, 'SVG_ICONS_SOURCE_FILE')
+icons_json = json.load(open(icons_json_path))
+
+register = Library()
+
+@register.inclusion_tag('svg_icon/icon.html')
+def icon(name, **kwargs):
+
+	icon_config = icons_json.get(name, None)
+
+	if icon_config:
+
+		width = kwargs.get('width', icon_config.get('width', 16))
+		height = kwargs.get('height', icon_config.get('heigh', 16))
+		viewBox = kwargs.get('viewBox', icon_config.get('viewBox', '0 0 1024 1024'))
+
+		return {
+			'width': kwargs.get('size', width),
+			'height': kwargs.get('size', height),
+			'className': kwargs.get('className'),
+			'viewBox': viewBox,
+			'paths': icon_config.get('paths', [''])
+		}