add new icon technique

.gitignore

@@ -41,3 +41,4 @@ db/schema.rb
 
 # Ignore Rubymine config
 /.idea
+node_modules

Guardfile

@@ -4,7 +4,7 @@
 guard 'livereload', port: '35738' do
   watch(%r{app/views/.+\.(erb|haml|slim)$})
   watch(%r{app/helpers/.+\.rb})
-  watch(%r{public/.+\.(css|js|html)})
+  watch(%r{public/.+\.(css|js|html|svg)})
   watch(%r{config/locales/.+\.yml})
   # Rails Assets Pipeline
   watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg|svg))).*}) { |m| "/assets/#{m[3]}" }

app/assets/javascripts/app/views/generic/actions.jst.eco

@@ -1,7 +1,7 @@
 <div class="dropdown dropdown--actions">
   <div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
     <% if @type isnt 'small': %>
-      <div class="light cog icon"></div>
+      <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
       <label><%- @T('Action') %></label>
     <% end %>
     <span class="select-arrow icon"></span>

app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco

@@ -4,7 +4,7 @@
     <h2 class="u-textTruncate"><%- @T( item.head ) %></h2>
     <div class="js-actions flex"></div>
     <div class="tabsSidebar-close centered u-clickable">
-      <div class="arrow-right icon"></div>
+      <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
     </div>
   </div>
   <hr>
@@ -16,7 +16,7 @@
 <div class="tabsSidebar-tabs vertical justified">
 <% for item in @items: %>
   <div class="tabsSidebar-tab centered" data-tab="<%= item.name %>">
-    <div class="dark icon <%= item.icon %>"></div>
+    <svg class="icon"><use xlink:href="#icon-<%= item.icon %>" /></svg>
   </div>
 <% end %>
 </div>

app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco

@@ -302,7 +302,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco

@@ -4,7 +4,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="organizationProfile" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco

@@ -4,7 +4,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

app/assets/javascripts/app/views/navigation.jst.eco

@@ -1,11 +1,12 @@
 <form class="search horizontal">
   <div class="search-holder flex">
     <input id="global-search" type="search" autocomplete="off">
-    <div class="empty-search horizontal centered">
-      <div class="white close icon"></div>
+    <svg class="magnifier icon"><use xlink:href="#icon-magnifier" /></svg>
+    <div class="empty-search">
+      <svg class="close icon"><use xlink:href="#icon-close" /></svg>
     </div>
   </div>
-  <div class="logo js-toggleNavigation"></div>
+  <svg class="logo js-toggleNavigation"><use xlink:href="#icon-logo" /></svg>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 

app/assets/javascripts/app/views/navigation/menu.jst.eco

@@ -3,7 +3,7 @@
   <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
     <a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown">
         <span class="nav-item-icon">
-          <span class="<%= item.class %> icon"></span>
+          <svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
         </span>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>
@@ -26,7 +26,7 @@
     <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
       <a class="horizontal center" href="<%= item.target %>">
         <span class="nav-item-icon">
-          <span class="<%= item.class %> icon"></span>
+          <svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
         </span>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>

app/assets/javascripts/app/views/navigation/personal.jst.eco

@@ -1,13 +1,12 @@
 <% for item in @items: %>
   <% if item.child: %>
     <li class="<% if item.class: %><%- item.class %><% end %> dropup <% if @open_tab[item.target] : %>open<% end %>">
-      <a class="list-button horizontal centered dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
+      <a class="list-button dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
         <span class="dropdown-nose"></span>
         <% if item.class is 'user': %>
           <span class="js-avatar"></span>
         <% else: %>
-          <span class="green plus icon"></span>
-          <span class="white plus icon"></span>
+          <svg class="plus icon"><use xlink:href="#icon-plus" /></svg>
         <% end %>
       </a>
       <ul class="dropdown-menu" role="menu">
@@ -22,7 +21,7 @@
             <a href="<%= item.target %>" class="horizontal center">
               <span class="flex u-textTruncate"><%- @T( item.name ) %></span>
               <% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %>
-              <% if item.iconClass: %><span class="<%= item.iconClass %> icon"></span><% end %>
+              <% if item.iconClass: %><svg class="<%= item.iconClass %> icon"><use xlink:href="#icon-<%= item.iconClass %>" /></svg><% end %>
             </a>
           </li>
         <% end %>
@@ -31,8 +30,7 @@
   <% else: %>
     <li class="settings <% if @active_tab[item.target] : %>active<% end %>">
       <a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
-        <span class="light cog icon"></span>
-        <span class="dark cog icon"></span>
+        <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
       </a>
     </li>
   <% end %>