Replace external-link icons with GitLab SVG

In Vue/JS

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 import gkeDropdownMixin from './gke_dropdown_mixin';
@@ -10,6 +10,7 @@ export default {
   components: {
     GlSprintf,
     GlLink,
+    GlIcon,
   },
   mixins: [gkeDropdownMixin],
   props: {
@@ -178,14 +179,14 @@ export default {
               'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'
             "
             target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
-          ></gl-link>
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+          /></gl-link>
         </template>
 
         <template #docsLink="{ content }">
           <gl-link :href="docsUrl" target="_blank"
-            >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i
-          ></gl-link>
+            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+          /></gl-link>
         </template>
 
         <template #error>

app/assets/javascripts/reports/codequality_report/store/getters.js

 import { LOADING, ERROR, SUCCESS } from '../../constants';
 import { sprintf, __, s__, n__ } from '~/locale';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 export const hasCodequalityIssues = state =>
   Boolean(state.newIssues?.length || state.resolvedIssues?.length);
@@ -48,7 +49,7 @@ export const codequalityPopover = state => {
         s__('ciReport|%{linkStartTag}Learn more about codequality reports %{linkEndTag}'),
         {
           linkStartTag: `<a href="${state.helpPath}" target="_blank" rel="noopener noreferrer">`,
-          linkEndTag: '<i class="fa fa-external-link" aria-hidden="true"></i></a>',
+          linkEndTag: `${spriteIcon('external-link', 's16')}</a>`,
         },
         false,
       ),

ee/app/assets/javascripts/vue_shared/security_reports/mixins/security_report_mixin.js

 import { sprintf, s__ } from '~/locale';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 // Securely open external links in a new tab.
 function getLinkStartTag(url) {
@@ -6,7 +7,7 @@ function getLinkStartTag(url) {
 }
 
 // Add in the external link icon at the end of every link.
-const linkEndTag = '<i class="fa fa-external-link" aria-hidden="true"></i></a>';
+const linkEndTag = `${spriteIcon('external-link', 's16')}</a>`;
 
 export default {
   computed: {

ee/spec/frontend/vue_shared/security_reports/mixins/security_report_mixin_spec.js

@@ -26,6 +26,6 @@ describe('securityReportMixin', () => {
     expect(mixinLink).toContain(`href="${link}`);
     expect(mixinLink).toContain('target="_blank"');
     expect(mixinLink).toContain('rel="noopener noreferrer"');
-    expect(mixinLink).toContain('<i class="fa fa-external-link" aria-hidden="true"></i>');
+    expect(mixinLink).toContain('external-link');
   });
 });