Consolidate user avatar Vue logic

Creates 3 vue components:

1. user-avatar-link
2. user-avatar-image
3. user-avatar-svg

and implements them in several places.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/31017

• Port to EE
• Test each implementation manually

EE Compatible Branch: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1699

app/assets/javascripts/boards/components/issue_card_inner.js

 import Vue from 'vue';
-import eventHub from '../eventhub';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link';
+import eventHub from '../eventhub';
 const Store = gl.issueBoards.BoardsStore;
@@ -54,15 +54,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     showLabelFooter() {
       return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
     },
-    avatarLinkImageConfig() {
-      return {
-        title: this.avatarUrlTitle,
-        styles: 'avatar avatar-inline s20 js-no-trigger',
-        src: this.issue.assignee.avatar,
-        size: 20,
-        alt: this.avatarUrlTitle,
-      };
-    },
+
   },
   methods: {
     showLabel(label) {
@@ -118,13 +110,15 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             {{ issueId }}
           </span>
         </h4>
-        <user-avatar-link
-          data-container='body'
-          v-if='assigneeUrl'
-          class='card-assignee has-tooltip js-no-trigger'
-          :img='avatarLinkImageConfig'
+        <user-avatar-link v-if='assigneeUrl'
+          class='card-assignee js-no-trigger'
           :href='assigneeUrl'
-          :disabled='false'>
+          :title='avatarUrlTitle'
+          :img-alt='avatarUrlTitle'
+          :img-src='issue.assignee.avatar'
+          :img-size='20'
+          :tooltip-text='issue.assignee.name'
+          :tooltip-container="'body'">
         </user-avatar-link>
         </a>
       </div>