Merge pull request #15 from divio/bugfix/icon-prefix

Changed the way iconset is generated

CHANGELOG.rst

@@ -8,6 +8,7 @@ djangocms-boilerplate-webpack
 - Fixed data attributes for correct messages consumption in django CMS 3.5
 - Added example for preoading fonts in ``base.html`` template
 - Added json generation for icons plugins
+- Changed the names of the icons generated (iconset prefix is always added)
 
 
 2.0.1

static/iconset.json

@@ -5,7 +5,7 @@
                 "iconClass": "icon",
                 "iconClassFix": "icon-",
                 "icons": [
-                    "circle"
+                    "icon-circle"
                 ]
             }
 

templates/includes/icon.html

@@ -1,8 +1,8 @@
-{% load static %}<span class="icon icon-{{ icon|cut:"icon-" }}{% if color %} icon-{{ color }}{% endif %}{% if class %} {{ class }}{% endif %}">
+{% load static %}<span class="icon {{ icon }}{% if color %} icon-{{ color }}{% endif %}{% if class %} {{ class }}{% endif %}">
     <svg role="presentation">
-        {% if sprite %}<use xlink:href="{% static "sprites/"|add:sprite %}.svg#{{ icon|cut:"icon-" }}"></use>{% else %}<use xlink:href="{% static "sprites/icons.svg" %}#{{ icon|cut:"icon-" }}"></use>{% endif %}
+        {% if sprite %}<use xlink:href="{% static "sprites/"|add:sprite %}.svg#{{ icon|cut:"icon-" }}"></use>{% else %}<use xlink:href="{% static "sprites/icons.svg" %}#{{ icon }}"></use>{% endif %}
     </svg>
     {% if title %}
         <span class="sr-only">{{ title }}</span>
     {% endif %}
-</span>
+</span>

tools/tasks/icons/json.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 module.exports = function(gulp, opts) {
     return function() {
         const list = fs.readdirSync(opts.PROJECT_PATH.svg + '/' + opts.svg).map(file =>
-            `"${file.replace(/\.svg$/, '')}"`
+            `"icon-${file.replace(/\.svg$/, '')}"`
         ).join(',\n');
 
         const content = `

tools/tasks/icons/svgsprite.js

@@ -8,6 +8,7 @@ module.exports = function(gulp, opts) {
             mode: 'symbols',
             preview: true,
             svgPath: `../sprites/${opts.svg}.svg`,
+            selector: "icon-%f",
             svg: {
                 symbols: `${opts.PROJECT_PATH.sprites}/${opts.svg}.svg`,
             },