Default Icons

src/services/logic-readout-service.js

@@ -4,6 +4,7 @@ var _ = require('lodash'),
 
 /**
  * Wrap logic groups in a div
+ *
  * @param  {string} content
  * @return {string}
  */
@@ -23,8 +24,8 @@ function wrapUp(content) {
  * @return {String}
  */
 function createReadout(element, name, value) {
-  var logicIconSet = references.tpl.get('.space-logic-icon-set'),
-    iconSelector = `.${name.replace('logic', '').toLowerCase()}-icon`,
+  var logicIconSet = references.tpl.get('.clay-space-edit-icons'),
+    iconSelector = `.icon-${name.replace('logic', '').toLowerCase()}`,
     icon = dom.find(logicIconSet, iconSelector);
 
   return `<span class="logic-group">${icon.outerHTML} ${value}</span>`;
@@ -33,6 +34,7 @@ function createReadout(element, name, value) {
 /**
  * Iterate over all data attributes and create
  * readouts for any prefixed with 'logic'
+ *
  * @param  {Element} element
  * @return {String}
  */

src/styleguide/styles.scss

@@ -51,7 +51,7 @@ $UI_BUTTON: #694C79;
     vertical-align: text-top;
   }
 
-  & > .logic-icon {
+  & > .readout-icon {
     margin-right: 5px;
   }
 }

template.nunjucks

@@ -1,12 +1,12 @@
 {% if locals.edit %}
 <div data-uri="{{ _ref or _self }}" class="clay-space-edit">
 
-  {# styles #}
+  {# Styles #}
   <style>
   {{ ('node_modules/clay-space-edit/dist/clay-space-edit.css')| includeFile | safe }}
   </style>
 
-  {# scripts #}
+  {# Scripts #}
   <script>
   {{ ('node_modules/clay-space-edit/dist/clay-space-edit.js')| includeFile | safe }}
   </script>
@@ -34,5 +34,13 @@
     </button>
   </template>
 
+  {# Readout Icons #}
+  {# Need more icons? Submit a PR to https://github.com/nymag/clay-space-edit with the icon #}
+  <template class="clay-space-edit-icons">
+    <span class="readout-icon icon-tags">{% include 'public/media/components/clay-space-edit/icon-tag.svg' %}</span>
+    <span class="readout-icon icon-time">{% include 'public/media/components/clay-space-edit/icon-time.svg' %}</span>
+    <span class="readout-icon icon-person">{% include 'public/media/components/clay-space-edit/icon-person.svg' %}</span>
+  </template>
+
 </div>
 {% endif %}