Replaced the remaining code-fork icons

app/assets/javascripts/cycle_analytics/components/stage_review_component.vue

@@ -2,6 +2,7 @@
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
   };
 </script>
@@ -52,7 +54,10 @@
           </template>
           <template v-else>
             <span class="merge-request-branch" v-if="mergeRequest.branch">
-              <i class= "fa fa-code-fork"></i>
+              <icon
+                name="fork"
+                :size="16">
+              </icon>
               <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
             </span>
           </template>

app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue

@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -13,6 +14,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBranch() {
@@ -37,7 +39,10 @@
           <user-avatar-image :img-src="build.author.avatarUrl"/>
           <h5 class="item-title">
             <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
-            <i class="fa fa-code-fork"></i>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>

app/assets/javascripts/cycle_analytics/components/stage_test_component.vue

@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
     components: {
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBuildStatus() {
@@ -40,7 +42,10 @@
             <a :href="build.url" class="item-build-name">{{ build.name }}</a>
             &middot;
             <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
-            <i class="fa fa-code-fork"></i>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

 <script>
   import tooltip from '../../vue_shared/directives/tooltip';
-  import Icon from '../../vue_shared/components/icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -13,7 +13,7 @@
       tooltip,
     },
     components: {
-      Icon,
+      icon,
     },
   };
 </script>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
-import Icon from '../../vue_shared/components/icon.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
@@ -11,7 +11,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    icon,
   },
   computed: {
     shouldShowCommitsBehindText() {

app/assets/stylesheets/framework/wells.scss

@@ -16,6 +16,10 @@
       .commit-sha,
       .commit-info {
         margin-left: 4px;
+
+        .fork-svg {
+          margin-right: 4px;
+        }
       }
 
       .ref-name {
@@ -79,7 +83,7 @@
     }
 
     .limit-icon {
-      margin: 0 8px;
+      margin: 0 4px;
     }
 
     .limit-message {

app/assets/stylesheets/pages/merge_requests.scss

@@ -725,7 +725,5 @@
 }
 
 .fork-sprite {
-  width: 12px;
-  height: 12px;
   margin-right: -5px;
 }

app/assets/stylesheets/pages/pipeline_schedules.scss

@@ -39,6 +39,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    svg {
+      vertical-align: middle;
+    }
   }
 
   .next-run-cell {

app/helpers/commits_helper.rb

@@ -63,7 +63,7 @@ module CommitsHelper
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
     link_to(url, class: 'label label-gray ref-name branch-link') do
-      icon('code-fork', class: 'append-right-5') + "#{text}"
+      sprite_icon('fork', size: 16, css_class: 'fork-svg') + "#{text}"
     end
   end
 

app/views/projects/branches/_branch.html.haml

@@ -8,7 +8,7 @@
 %li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
-      = sprite_icon('fork', size: 8)
+      = sprite_icon('fork', size: 12)
       = branch.name
      
     - if branch.name == @repository.root_ref

app/views/projects/commit/_limit_exceeded_message.html.haml

 .has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: "Project has too many #{label_for_message} to search"} }
   .limit-icon
     - if objects == :branch
-      = icon('code-fork')
+      = sprite_icon('fork', size: 12)
     - else
       = icon('tag')
   .limit-message

app/views/projects/deployments/_commit.html.haml

@@ -2,7 +2,7 @@
   .branch-commit
     - if deployment.ref
       %span.icon-container
-        = deployment.tag? ? icon('tag') : icon('code-fork')
+        = deployment.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
       = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
     .icon-container.commit-icon
       = custom_icon("icon_commit")

app/views/projects/forks/error.html.haml

@@ -2,7 +2,7 @@
 - if @forked_project && !@forked_project.saved?
   .alert.alert-danger.alert-block
     %h4
-      %i.fa.fa-code-fork
+      = sprite_icon('fork', size: 16)
       Fork Error!
     %p
       You tried to fork
@@ -21,5 +21,4 @@
 
     %p
       = link_to new_project_fork_path(@project), title: "Fork", class: "btn" do
-        %i.fa.fa-code-fork
         Try to fork again

app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml

@@ -19,7 +19,7 @@
     - if ref
       - if generic_commit_status.ref
         .icon-container
-          = generic_commit_status.tags.any? ? icon('tag') : icon('code-fork')
+          = generic_commit_status.tags.any? ? icon('tag') : sprite_icon('fork', size: 10)
         = link_to generic_commit_status.ref, project_commits_path(generic_commit_status.project, generic_commit_status.ref)
       - else
         .light none

app/views/projects/merge_requests/_merge_request.html.haml

@@ -30,7 +30,7 @@
           %span.project-ref-path
              
             = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
-              = sprite_icon('fork', css_class: 'fork-sprite')
+              = sprite_icon('fork', size: 12, css_class: 'fork-sprite')
               = merge_request.target_branch
         - if merge_request.labels.any?
            

app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml

@@ -3,7 +3,7 @@
     %td
       = pipeline_schedule.description
     %td.branch-name-cell
-      = icon('code-fork')
+      = sprite_icon('fork', size: 12)
       - if pipeline_schedule.ref.present?
         = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
     %td

spec/javascripts/vue_shared/components/commit_spec.js

@@ -10,7 +10,7 @@ describe('Commit component', () => {
     CommitComponent = Vue.extend(commitComp);
   });
 
-  it('should render a code-fork icon if it does not represent a tag', () => {
+  it('should render a fork icon if it does not represent a tag', () => {
     component = new CommitComponent({
       propsData: {
         tag: false,
@@ -30,7 +30,7 @@ describe('Commit component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
+    expect(component.$el.querySelector('.icon-container').children).toContain('svg');
   });
 
   describe('Given all the props', () => {