Merge branch '225940-replace-fa-paperclip-icons-with-gitlab-svg-paperclip-icon' into 'master'

Replace fa-paperclip icons with GitLab SVG

See merge request gitlab-org/gitlab!43945

app/assets/javascripts/dropzone_input.js

@@ -7,6 +7,7 @@ import csrf from './lib/utils/csrf';
 import axios from './lib/utils/axios_utils';
 import { n__, __ } from '~/locale';
 import { getFilename } from '~/lib/utils/file_upload';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 Dropzone.autoDiscover = false;
 
@@ -25,7 +26,7 @@ function getErrorMessage(res) {
 
 export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
   const divHover = '<div class="div-dropzone-hover"></div>';
-  const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
+  const iconPaperclip = spriteIcon('paperclip', 'div-dropzone-icon');
   const $attachButton = form.find('.button-attach-file');
   const $attachingFileMessage = form.find('.attaching-file-message');
   const $cancelButton = form.find('.button-cancel-uploading-files');

app/assets/javascripts/notes/components/note_attachment.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
   name: 'NoteAttachment',
+  components: {
+    GlIcon,
+  },
   props: {
     attachment: {
       type: Object,
@@ -29,7 +34,7 @@ export default {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <i class="fa fa-paperclip" aria-hidden="true"> </i> {{ attachment.filename }}
+        <gl-icon name="paperclip" /> {{ attachment.filename }}
       </a>
     </div>
   </div>

app/assets/stylesheets/fontawesome_custom.scss

@@ -117,10 +117,6 @@
   content: '\f077';
 }
 
-.fa-paperclip::before {
-  content: '\f0c6';
-}
-
 .fa-bug::before {
   content: '\f188';
 }

app/views/events/event/_note.html.haml

@@ -25,5 +25,5 @@
           = image_tag note.attachment.url, class: 'note-image-attach'
       - else
         = link_to note.attachment.url, target: '_blank', class: 'note-file-attach' do
-          %i.fa.fa-paperclip
+          = sprite_icon("paperclip")
           = note.attachment_identifier

app/views/shared/notes/_note.html.haml

@@ -72,7 +72,7 @@
               = image_tag note.attachment.url, class: 'note-image-attach'
           .attachment
             = link_to note.attachment.url, target: '_blank' do
-              = icon('paperclip')
+              = sprite_icon('paperclip')
               = note.attachment_identifier
               = link_to delete_attachment_project_note_path(note.project, note),
                 title: _('Delete this attachment'), method: :delete, remote: true, data: { confirm: _('Are you sure you want to remove the attachment?') }, class: 'danger js-note-attachment-delete' do

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -52,9 +52,13 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
             <div
               class="div-dropzone-hover"
             >
-              <i
-                class="fa fa-paperclip div-dropzone-icon"
-              />
+              <svg
+                class="div-dropzone-icon"
+              >
+                <use
+                  xlink:href="undefined#paperclip"
+                />
+              </svg>
             </div>
           </div>