diff --git a/brambling/static/brambling/brambling.kickoff.js b/brambling/static/brambling/brambling.kickoff.js index 2157f8f6..b205c91e 100644 --- a/brambling/static/brambling/brambling.kickoff.js +++ b/brambling/static/brambling/brambling.kickoff.js @@ -146,4 +146,8 @@ $(function() { }); }); + // Enable SVG injection + var svgIconElements = document.querySelectorAll('.js-svg-icon'); + SVGInjector(svgIconElements); + }); diff --git a/brambling/static/brambling/sass/modules/_icons.sass b/brambling/static/brambling/sass/modules/_icons.sass new file mode 100644 index 00000000..908e7b3a --- /dev/null +++ b/brambling/static/brambling/sass/modules/_icons.sass @@ -0,0 +1,10 @@ +.svg-icon + width: 16px + height: 16px + vertical-align: middle + path + fill: #000 + +.svg-icon-white + path + fill: #FFF diff --git a/brambling/static/brambling/sass/styles.sass b/brambling/static/brambling/sass/styles.sass index 5a9d45a8..bcd28483 100644 --- a/brambling/static/brambling/sass/styles.sass +++ b/brambling/static/brambling/sass/styles.sass @@ -65,6 +65,7 @@ @import modules/footer @import modules/forms @import modules/headings +@import modules/icons @import modules/images @import modules/layout @import modules/list-group diff --git a/brambling/templates/brambling/_icon.html b/brambling/templates/brambling/_icon.html new file mode 100644 index 00000000..bb663727 --- /dev/null +++ b/brambling/templates/brambling/_icon.html @@ -0,0 +1,2 @@ +{% load static %} +{{ alt }} diff --git a/brambling/templatetags/__init__.py b/brambling/templatetags/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/brambling/templatetags/icon.py b/brambling/templatetags/icon.py new file mode 100644 index 00000000..70878501 --- /dev/null +++ b/brambling/templatetags/icon.py @@ -0,0 +1,11 @@ +from django import template +from django.template.loader import render_to_string + +register = template.Library() + +ICON_PATH = "brambling/lib/picons/{key}.svg" + +@register.simple_tag +def icon(key, alt): + path = ICON_PATH.format(key=key) + return render_to_string('brambling/_icon.html', {'key': key, 'alt': alt, 'path': path})