Remove unnecessary attributes from icon.vue

- `cssClasses` is redundant because `class`
  values are merged with the root element anyway.
- `width`, `height`, `x`, `y` are redundant and
  will all pass through.
- `tabIndex` is redundant because `tabindex` can
  be passed through.

https://gitlab.com/gitlab-org/gitlab/merge_requests/17839

app/assets/javascripts/boards/components/issue_time_estimate.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
+      <icon name="hourglass" class="board-card-info-icon align-top" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >

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

@@ -34,7 +34,7 @@ export default {
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -100,7 +100,7 @@ export default {
           <template slot="lastSeen" slot-scope="errors">
             <div class="d-flex align-items-center">
-              <icon name="calendar" css-classes="text-secondary mr-1" />
+              <icon name="calendar" class="text-secondary mr-1" />
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>

app/assets/javascripts/groups/components/item_actions.vue

@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" css-classes="position-top-0" />
+      <icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand"
     >
-      <icon name="settings" css-classes="position-top-0" />
+      <icon name="settings" class="position-top-0" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
+      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
+      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -114,7 +114,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :css-classes="iconClass" />
+          <icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>

app/assets/javascripts/ide/components/external_link.vue

@@ -28,7 +28,7 @@ export default {
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">{{ __('Open in file view') }}</span>
-      <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
+      <icon :size="16" name="external-link" class="vertical-align-middle space-right" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -79,7 +79,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        css-classes="prepend-left-5 ide-file-modified"
+        class="prepend-left-5 ide-file-modified"
       />
     </span>
     <changed-file-icon

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -77,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
+      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" class="card-body">
       <gl-loading-icon v-if="showLoadingIcon" />

app/assets/javascripts/ide/components/mr_file_icon.vue

@@ -18,6 +18,6 @@ export default {
     :title="__('Part of merge request changes')"
     :size="12"
     name="git-merge"
-    css-classes="append-right-8"
+    class="append-right-8"
   />
 </template>

app/assets/javascripts/ide/components/new_dropdown/button.vue

@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :css-classes="iconClasses" />
+    <icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>

app/assets/javascripts/ide/components/repo_file_status_icon.vue

@@ -29,6 +29,6 @@ export default {
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" css-classes="file-status-icon" />
+    <icon name="lock" class="file-status-icon" />
   </span>
 </template>

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

@@ -149,9 +149,9 @@ export default {
         title="Add reaction"
         data-position="right"
       >
-        <icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
-        <icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
-        <icon css-classes="link-highlight award-control-icon-super-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
+        <icon class="link-highlight award-control-icon-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-super-positive" name="smiley" />
       </a>
     </div>
     <reply-button
@@ -168,7 +168,7 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
         @click="onEdit"
       >
-        <icon name="pencil" css-classes="link-highlight" />
+        <icon name="pencil" class="link-highlight" />
       </button>
     </div>
     <div v-if="showDeleteAction" class="note-actions-item">
@@ -191,7 +191,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">

app/assets/javascripts/notes/components/note_actions/reply_button.vue

@@ -26,7 +26,7 @@ export default {
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"
     >
-      <icon name="comment" css-classes="link-highlight" />
+      <icon name="comment" class="link-highlight" />
     </gl-button>
   </div>
 </template>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -194,9 +194,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon name="slight-smile" css-classes="award-control-icon-neutral" />
-                <icon name="smiley" css-classes="award-control-icon-positive" />
-                <icon name="smile" css-classes="award-control-icon-super-positive" />
+                <icon name="slight-smile" class="award-control-icon-neutral" />
+                <icon name="smiley" class="award-control-icon-positive" />
+                <icon name="smile" class="award-control-icon-super-positive" />
               </span>
             </button>
           </span>

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -82,11 +82,7 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon
-      v-show="collapsed"
-      :css-classes="collapsedButtonIconClasses"
-      :name="collapsedButtonIcon"
-    />
+    <icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
     <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
     <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

@@ -19,6 +19,6 @@ export default {
 </script>
 <template>
   <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
-    {{ __('View app') }} <icon css-classes="fgray" name="external-link" />
+    {{ __('View app') }} <icon class="fgray" name="external-link" />
   </a>
 </template>

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

@@ -83,7 +83,7 @@ export default {
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >
-    <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
+    <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
 </template>

app/assets/javascripts/vue_shared/components/ci_icon.vue

@@ -66,5 +66,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <icon :name="icon" :size="size" :css-classes="cssClasses" /> </span>
+  <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
 </template>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -40,7 +40,7 @@ export default {
         </template>
       </p>
       <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
-        <icon :size="16" name="download" css-classes="float-left append-right-8" />
+        <icon :size="16" name="download" class="float-left append-right-8" />
         {{ __('Download') }}
       </gl-link>
     </div>