Add icons to SDG index

app/assets/stylesheets/sdg/goals/index.scss

@@ -0,0 +1,25 @@
+.sdg-goals-index {
+
+  .sdg-goal-list {
+    @include grid-row;
+    @include grid-column-gutter;
+    list-style: none;
+    margin-bottom: 0;
+    max-width: 40rem;
+
+    li {
+      display: inline-block;
+      $spacing: 1vw;
+
+      line-height: 0;
+      margin-bottom: $spacing;
+      padding-left: $spacing / 2;
+      padding-right: $spacing / 2;
+      width: 1 * 100% / 6;
+
+      .sdg-goal-icon {
+        width: 100%;
+      }
+    }
+  }
+}

app/components/sdg/goals/index_component.html.erb

@@ -1 +1,3 @@
-<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %>
+<div class="sdg-goals-index">
+  <%= link_list(*goal_links, class: "sdg-goal-list") %>
+</div>

app/components/sdg/goals/index_component.rb

@@ -5,4 +5,18 @@ class SDG::Goals::IndexComponent < ApplicationComponent
   def initialize(goals)
     @goals = goals
   end
+
+  private
+
+    def goal_links
+      goals.map { |goal| goal_link(goal) }
+    end
+
+    def goal_link(goal)
+      [icon(goal), sdg_goal_path(goal.code)]
+    end
+
+    def icon(goal)
+      render SDG::Goals::IconComponent.new(goal)
+    end
 end