Begin transition to inline SVG octicons

6 files changed, 22 insertions, 10 deletions

diff --git a/Gemfile b/Gemfile
index dab377d..30cb961 100644
--- a/Gemfile
+++ b/Gemfile
@@ -23,7 +23,6 @@ gem 'jbuilder', '~> 2.0'
 gem 'sdoc', '~> 0.4.0', group: :doc
 
 # packages stuff
-
 gem 'elasticsearch-rails'
 gem 'elasticsearch-persistence'
 
@@ -38,6 +37,9 @@ gem 'sidekiq', require: false
 
 gem 'rdiscount'
 
+# UI
+gem 'octicons_helper'
+
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 241e5ae..9b707f5 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -111,6 +111,11 @@ GEM
     multipart-post (2.0.0)
     nokogiri (1.6.7.2)
       mini_portile2 (~> 2.0.0.rc2)
+    octicons (2.1.0)
+      nokogiri (>= 1.6.3.1)
+    octicons_helper (2.1.0)
+      octicons (~> 2.0)
+      rails
     parallel (1.6.1)
     rack (1.6.4)
     rack-protection (1.5.3)
@@ -209,6 +214,7 @@ DEPENDENCIES
   jbuilder (~> 2.0)
   jquery-rails
   nokogiri
+  octicons_helper
   parallel
   rails (= 4.2.5.1)
   rdiscount
diff --git a/app/assets/stylesheets/misc.scss b/app/assets/stylesheets/misc.scss
index 7e1539f..f051415 100644
--- a/app/assets/stylesheets/misc.scss
+++ b/app/assets/stylesheets/misc.scss
@@ -23,6 +23,12 @@ h1 {
   }
 }
 
+.octicon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+}
+
 .black {
   color: #333;
 }
diff --git a/app/helpers/keywords_helper.rb b/app/helpers/keywords_helper.rb
index 2444a6b..ea8048d 100644
--- a/app/helpers/keywords_helper.rb
+++ b/app/helpers/keywords_helper.rb
@@ -5,9 +5,7 @@ module KeywordsHelper
     css_class = KK_KEYWORD_ICON[keyword]
 
     if css_class
-      content_tag :span,
-                  '',
-                  class: ['octicon', css_class]
+      octicon css_class, height: 16
     else
       ''
     end
diff --git a/app/views/packages/_package_header.html.erb b/app/views/packages/_package_header.html.erb
index 3dcf7a2..1b7876b 100644
--- a/app/views/packages/_package_header.html.erb
+++ b/app/views/packages/_package_header.html.erb
@@ -15,7 +15,7 @@
             <h1 class="stick-top kk-package-title" id="package-title" data-atom="<%= package.atom %>" data-category="<%= package.category %>" data-name="<%= package.name %>">
               <small class="kk-package-cat"><%= package.category_model.name %>/</small>
               <div>
-                <span class="mega-octicon octicon-package kk-package-icon"></span>
+                <%= octicon 'package', :height => 32, :class => 'right left kk-package-icon', :'aria-label' => 'Package icon' %>
                 <div class="kk-package-name"><%= package.name %></div>
               </div>
             </h1>
@@ -27,7 +27,7 @@
 
             <% unless package.homepage.empty? || package.homepage.first.nil? || package.homepage.first.empty? %>
             <p class="kk-package-homepage">
-              <span class="fa fa-fw fa-home"></span> <%= content_tag :a, package.homepage.first, href: package.homepage.first, rel: 'nofollow' %>
+              <%= content_tag :a, package.homepage.first, href: package.homepage.first, rel: 'nofollow' %>
             </p>
             <% end %>
           </div>
diff --git a/config/initializers/kkuleomi_data.rb b/config/initializers/kkuleomi_data.rb
index a00b0f9..6237a05 100644
--- a/config/initializers/kkuleomi_data.rb
+++ b/config/initializers/kkuleomi_data.rb
@@ -1,8 +1,8 @@
 KK_KEYWORD_ICON = {
-  stable:      'octicon-diff-added',
-  testing:     'octicon-diff-modified',
-  unavailable: 'octicon-diff-removed',
-  masked:      'octicon-diff-ignored'
+  stable:      'diff-added',
+  testing:     'diff-modified',
+  unavailable: 'diff-removed',
+  masked:      'diff-ignored'
 }
 
 KK_KEYWORD_CLASS = {