Multi File Editor File icons

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

@@ -3,6 +3,7 @@
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
   import newDropdown from './new_dropdown/index.vue';
+  import fileIcon from '../../vue_shared/components/file_icon.vue';
 
   export default {
     mixins: [
@@ -11,6 +12,7 @@
     components: {
       skeletonLoadingContainer,
       newDropdown,
+      fileIcon,
     },
     props: {
       file: {
@@ -26,13 +28,6 @@
       ...mapState([
         'leftPanelCollapsed',
       ]),
-      fileIcon() {
-        return {
-          'fa-spinner fa-spin': this.file.loading,
-          [this.file.icon]: !this.file.loading,
-          'fa-folder-open': !this.file.loading && this.file.opened,
-        };
-      },
       isSubmodule() {
         return this.file.type === 'submodule';
       },
@@ -94,16 +89,18 @@
       class="multi-file-table-name"
       :colspan="submoduleColSpan"
     >
-      <i
-        class="fa fa-fw file-icon"
-        :class="fileIcon"
-        :style="levelIndentation"
-        aria-hidden="true"
-      >
-      </i>
       <a
         class="repo-file-name"
       >
+        <file-icon
+          :file-name="file.name"
+          :loading="file.loading"
+          :folder="file.type === 'tree'"
+          :opened="file.opened"
+          :style="levelIndentation"
+          :size="16"
+        >
+        </file-icon>
         {{ file.name }}
       </a>
       <new-dropdown

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

 <script>
 import { mapActions } from 'vuex';
+import fileIcon from '../../vue_shared/components/file_icon.vue';
 
 export default {
   props: {
@@ -8,7 +9,9 @@ export default {
       required: true,
     },
   },
-
+  components: {
+    fileIcon,
+  },
   computed: {
     closeLabel() {
       if (this.tab.changed || this.tab.tempFile) {
@@ -63,6 +66,11 @@ export default {
       :class="{active : tab.active }"
       :title="tab.url"
     >
+      <file-icon
+        :file-name="tab.name"
+        :size="16"
+      >
+      </file-icon>
       {{ tab.name }}
     </div>
   </li>

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

+<script>
+  import getIconForFile from './file_icon/file_icon_map';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+
+  /* This is a re-usable vue component for rendering a svg sprite
+    icon
+
+    Sample configuration:
+
+    <file-icon
+      name="retry"
+      :size="32"
+      css-classes="top"
+    />
+
+  */
+  export default {
+    props: {
+      fileName: {
+        type: String,
+        required: true,
+      },
+
+      folder: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      opened: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      size: {
+        type: Number,
+        required: false,
+        default: 16,
+      },
+
+      cssClasses: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    components: {
+      loadingIcon,
+      icon,
+    },
+    computed: {
+      spriteHref() {
+        const iconName = getIconForFile(this.fileName) || 'file';
+        return `${gon.sprite_file_icons}#${iconName}`;
+      },
+      folderIconName() {
+        // We don't have a open folder icon yet
+        return this.opened ? 'folder' : 'folder';
+      },
+      iconSizeClass() {
+        return this.size ? `s${this.size}` : '';
+      },
+    },
+  };
+</script>
+<template>
+  <span>
+    <svg
+      :class="[iconSizeClass, cssClasses]"
+      v-if="!loading && !folder">
+      <use 
+        v-bind="{'xlink:href':spriteHref}"/>
+    </svg>
+    <icon
+      v-if="!loading && folder"
+      :name="folderIconName"
+      :size="size"
+    />
+    <loading-icon
+      v-if="loading"
+      :inline="true"
+    />
+  </span>
+</template>

app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js

+const fileExtensionIcons = {
+  html: 'html',
+  htm: 'html',
+  html_vm: 'html',
+  asp: 'html',
+  jade: 'pug',
+  pug: 'pug',
+  md: 'markdown',
+  'md.rendered': 'markdown',
+  markdown: 'markdown',
+  'markdown.rendered': 'markdown',
+  rst: 'markdown',
+  blink: 'blink',
+  css: 'css',
+  scss: 'sass',
+  sass: 'sass',
+  less: 'less',
+  json: 'json',
+  yaml: 'yaml',
+  'YAML-tmLanguage': 'yaml',
+  yml: 'yaml',
+  xml: 'xml',
+  plist: 'xml',
+  xsd: 'xml',
+  dtd: 'xml',
+  xsl: 'xml',
+  xslt: 'xml',
+  resx: 'xml',
+  iml: 'xml',
+  xquery: 'xml',
+  tmLanguage: 'xml',
+  manifest: 'xml',
+  project: 'xml',
+  png: 'image',
+  jpeg: 'image',
+  jpg: 'image',
+  gif: 'image',
+  svg: 'image',
+  ico: 'image',
+  tif: 'image',
+  tiff: 'image',
+  psd: 'image',
+  psb: 'image',
+  ami: 'image',
+  apx: 'image',
+  bmp: 'image',
+  bpg: 'image',
+  brk: 'image',
+  cur: 'image',
+  dds: 'image',
+  dng: 'image',
+  exr: 'image',
+  fpx: 'image',
+  gbr: 'image',
+  img: 'image',
+  jbig2: 'image',
+  jb2: 'image',
+  jng: 'image',
+  jxr: 'image',
+  pbm: 'image',
+  pgf: 'image',
+  pic: 'image',
+  raw: 'image',
+  webp: 'image',
+  js: 'javascript',
+  ejs: 'javascript',
+  esx: 'javascript',
+  jsx: 'react',
+  tsx: 'react',
+  ini: 'settings',
+  dlc: 'settings',
+  dll: 'settings',
+  config: 'settings',
+  conf: 'settings',
+  properties: 'settings',
+  prop: 'settings',
+  settings: 'settings',
+  option: 'settings',
+  props: 'settings',
+  toml: 'settings',
+  prefs: 'settings',
+  'sln.dotsettings': 'settings',
+  'sln.dotsettings.user': 'settings',
+  ts: 'typescript',
+  'd.ts': 'typescript-def',
+  marko: 'markojs',
+  pdf: 'pdf',
+  xlsx: 'table',
+  xls: 'table',
+  csv: 'table',
+  tsv: 'table',
+  vscodeignore: 'vscode',
+  vsixmanifest: 'vscode',
+  vsix: 'vscode',
+  'code-workplace': 'vscode',
+  suo: 'visualstudio',
+  sln: 'visualstudio',
+  csproj: 'visualstudio',
+  vb: 'visualstudio',
+  pdb: 'database',
+  sql: 'database',
+  pks: 'database',
+  pkb: 'database',
+  accdb: 'database',
+  mdb: 'database',
+  sqlite: 'database',
+  cs: 'csharp',
+  zip: 'zip',
+  tar: 'zip',
+  gz: 'zip',
+  xz: 'zip',
+  bzip2: 'zip',
+  gzip: 'zip',
+  '7z': 'zip',
+  rar: 'zip',
+  tgz: 'zip',
+  exe: 'exe',
+  msi: 'exe',
+  java: 'java',
+  jar: 'java',
+  jsp: 'java',
+  c: 'c',
+  m: 'c',
+  h: 'h',
+  cc: 'cpp',
+  cpp: 'cpp',
+  mm: 'cpp',
+  cxx: 'cpp',
+  hpp: 'hpp',
+  go: 'go',
+  py: 'python',
+  url: 'url',
+  sh: 'console',
+  ksh: 'console',
+  csh: 'console',
+  tcsh: 'console',
+  zsh: 'console',
+  bash: 'console',
+  bat: 'console',
+  cmd: 'console',
+  ps1: 'powershell',
+  psm1: 'powershell',
+  psd1: 'powershell',
+  ps1xml: 'powershell',
+  psc1: 'powershell',
+  pssc: 'powershell',
+  gradle: 'gradle',
+  doc: 'word',
+  docx: 'word',
+  rtf: 'word',
+  cer: 'certificate',
+  cert: 'certificate',
+  crt: 'certificate',
+  pub: 'key',
+  key: 'key',
+  pem: 'key',
+  asc: 'key',
+  gpg: 'key',
+  woff: 'font',
+  woff2: 'font',
+  ttf: 'font',
+  eot: 'font',
+  suit: 'font',
+  otf: 'font',
+  bmap: 'font',
+  fnt: 'font',
+  odttf: 'font',
+  ttc: 'font',
+  font: 'font',
+  fonts: 'font',
+  sui: 'font',
+  ntf: 'font',
+  mrf: 'font',
+  lib: 'lib',
+  bib: 'lib',
+  rb: 'ruby',
+  erb: 'ruby',
+  fs: 'fsharp',
+  fsx: 'fsharp',
+  fsi: 'fsharp',
+  fsproj: 'fsharp',
+  swift: 'swift',
+  ino: 'arduino',
+  dockerignore: 'docker',
+  dockerfile: 'docker',
+  tex: 'tex',
+  cls: 'tex',
+  sty: 'tex',
+  pptx: 'powerpoint',
+  ppt: 'powerpoint',
+  pptm: 'powerpoint',
+  potx: 'powerpoint',
+  pot: 'powerpoint',
+  potm: 'powerpoint',
+  ppsx: 'powerpoint',
+  ppsm: 'powerpoint',
+  pps: 'powerpoint',
+  ppam: 'powerpoint',
+  ppa: 'powerpoint',
+  webm: 'movie',
+  mkv: 'movie',
+  flv: 'movie',
+  vob: 'movie',
+  ogv: 'movie',
+  ogg: 'movie',
+  gifv: 'movie',
+  avi: 'movie',
+  mov: 'movie',
+  qt: 'movie',
+  wmv: 'movie',
+  yuv: 'movie',
+  rm: 'movie',
+  rmvb: 'movie',
+  mp4: 'movie',
+  m4v: 'movie',
+  mpg: 'movie',
+  mp2: 'movie',
+  mpeg: 'movie',
+  mpe: 'movie',
+  mpv: 'movie',
+  m2v: 'movie',
+  vdi: 'virtual',
+  vbox: 'virtual',
+  'vbox-prev': 'virtual',
+  ics: 'email',
+  mp3: 'music',
+  flac: 'music',
+  m4a: 'music',
+  wma: 'music',
+  aiff: 'music',
+  coffee: 'coffee',
+  txt: 'document',
+  graphql: 'graphql',
+  rs: 'rust',
+  raml: 'raml',
+  xaml: 'xaml',
+  hs: 'haskell',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  patch: 'git',
+  lua: 'lua',
+  clj: 'clojure',
+  cljs: 'clojure',
+  groovy: 'groovy',
+  r: 'r',
+  rmd: 'r',
+  dart: 'dart',
+  as: 'actionscript',
+  mxml: 'mxml',
+  ahk: 'autohotkey',
+  swf: 'flash',
+  swc: 'swc',
+  cmake: 'cmake',
+  asm: 'assembly',
+  a51: 'assembly',
+  inc: 'assembly',
+  nasm: 'assembly',
+  s: 'assembly',
+  ms: 'assembly',
+  agc: 'assembly',
+  ags: 'assembly',
+  aea: 'assembly',
+  argus: 'assembly',
+  mitigus: 'assembly',
+  binsource: 'assembly',
+  vue: 'vue',
+  ml: 'ocaml',
+  mli: 'ocaml',
+  cmx: 'ocaml',
+  'js.map': 'javascript-map',
+  'css.map': 'css-map',
+  lock: 'lock',
+  hbs: 'handlebars',
+  mustache: 'handlebars',
+  pl: 'perl',
+  pm: 'perl',
+  hx: 'haxe',
+  'spec.ts': 'test-ts',
+  'test.ts': 'test-ts',
+  'ts.snap': 'test-ts',
+  'spec.tsx': 'test-jsx',
+  'test.tsx': 'test-jsx',
+  'tsx.snap': 'test-jsx',
+  'spec.jsx': 'test-jsx',
+  'test.jsx': 'test-jsx',
+  'jsx.snap': 'test-jsx',
+  'spec.js': 'test-js',
+  'test.js': 'test-js',
+  'js.snap': 'test-js',
+  'routing.ts': 'angular-routing',
+  'routing.js': 'angular-routing',
+  'module.ts': 'angular',
+  'module.js': 'angular',
+  'ng-template': 'angular',
+  'component.ts': 'angular-component',
+  'component.js': 'angular-component',
+  'guard.ts': 'angular-guard',
+  'guard.js': 'angular-guard',
+  'service.ts': 'angular-service',
+  'service.js': 'angular-service',
+  'pipe.ts': 'angular-pipe',
+  'pipe.js': 'angular-pipe',
+  'filter.js': 'angular-pipe',
+  'directive.ts': 'angular-directive',
+  'directive.js': 'angular-directive',
+  'resolver.ts': 'angular-resolver',
+  'resolver.js': 'angular-resolver',
+  pp: 'puppet',
+  ex: 'elixir',
+  exs: 'elixir',
+  ls: 'livescript',
+  erl: 'erlang',
+  twig: 'twig',
+  jl: 'julia',
+  elm: 'elm',
+  pure: 'purescript',
+  tpl: 'smarty',
+  styl: 'stylus',
+  re: 'reason',
+  rei: 'reason',
+  cmj: 'bucklescript',
+  merlin: 'merlin',
+  v: 'verilog',
+  vhd: 'verilog',
+  sv: 'verilog',
+  svh: 'verilog',
+  nb: 'mathematica',
+  wl: 'wolframlanguage',
+  wls: 'wolframlanguage',
+  njk: 'nunjucks',
+  nunjucks: 'nunjucks',
+  robot: 'robot',
+  sol: 'solidity',
+  au3: 'autoit',
+  haml: 'haml',
+  yang: 'yang',
+  tf: 'terraform',
+  'tf.json': 'terraform',
+  tfvars: 'terraform',
+  tfstate: 'terraform',
+  'blade.php': 'laravel',
+  'inky.php': 'laravel',
+  applescript: 'applescript',
+  cake: 'cake',
+  feature: 'cucumber',
+  nim: 'nim',
+  nimble: 'nim',
+  apib: 'apiblueprint',
+  apiblueprint: 'apiblueprint',
+  tag: 'riot',
+  vfl: 'vfl',
+  kl: 'kl',
+  pcss: 'postcss',
+  sss: 'postcss',
+  todo: 'todo',
+  cfml: 'coldfusion',
+  cfc: 'coldfusion',
+  lucee: 'coldfusion',
+  cabal: 'cabal',
+  nix: 'nix',
+  slim: 'slim',
+  http: 'http',
+  rest: 'http',
+  rql: 'restql',
+  restql: 'restql',
+  kv: 'kivy',
+  graphcool: 'graphcool',
+  sbt: 'sbt',
+  'reducer.ts': 'ngrx-reducer',
+  'rootReducer.ts': 'ngrx-reducer',
+  'state.ts': 'ngrx-state',
+  'actions.ts': 'ngrx-actions',
+  'effects.ts': 'ngrx-effects',
+  cr: 'crystal',
+  'drone.yml': 'drone',
+  cu: 'cuda',
+  cuh: 'cuda',
+  log: 'log',
+};
+
+const fileNameIcons = {
+  '.jscsrc': 'json',
+  '.jshintrc': 'json',
+  'tsconfig.json': 'json',
+  'tslint.json': 'json',
+  'composer.lock': 'json',
+  '.jsbeautifyrc': 'json',
+  '.esformatter': 'json',
+  'cdp.pid': 'json',
+  '.htaccess': 'xml',
+  '.jshintignore': 'settings',
+  '.buildignore': 'settings',
+  makefile: 'settings',
+  '.mrconfig': 'settings',
+  '.yardopts': 'settings',
+  'gradle.properties': 'gradle',
+  gradlew: 'gradle',
+  'gradle-wrapper.properties': 'gradle',
+  license: 'certificate',
+  'license.md': 'certificate',
+  'license.md.rendered': 'certificate',
+  'license.txt': 'certificate',
+  licence: 'certificate',
+  'licence.md': 'certificate',
+  'licence.md.rendered': 'certificate',
+  'licence.txt': 'certificate',
+  dockerfile: 'docker',
+  'docker-compose.yml': 'docker',
+  '.mailmap': 'email',
+  '.gitignore': 'git',
+  '.gitconfig': 'git',
+  '.gitattributes': 'git',
+  '.gitmodules': 'git',
+  '.gitkeep': 'git',
+  'git-history': 'git',
+  '.Rhistory': 'r',
+  'cmakelists.txt': 'cmake',
+  'cmakecache.txt': 'cmake',
+  'angular-cli.json': 'angular',
+  '.angular-cli.json': 'angular',
+  '.vfl': 'vfl',
+  '.kl': 'kl',
+  'postcss.config.js': 'postcss',
+  '.postcssrc.js': 'postcss',
+  'project.graphcool': 'graphcool',
+  'webpack.js': 'webpack',
+  'webpack.ts': 'webpack',
+  'webpack.base.js': 'webpack',
+  'webpack.base.ts': 'webpack',
+  'webpack.config.js': 'webpack',
+  'webpack.config.ts': 'webpack',
+  'webpack.common.js': 'webpack',
+  'webpack.common.ts': 'webpack',
+  'webpack.config.common.js': 'webpack',
+  'webpack.config.common.ts': 'webpack',
+  'webpack.config.common.babel.js': 'webpack',
+  'webpack.config.common.babel.ts': 'webpack',
+  'webpack.dev.js': 'webpack',
+  'webpack.dev.ts': 'webpack',
+  'webpack.config.dev.js': 'webpack',
+  'webpack.config.dev.ts': 'webpack',
+  'webpack.config.dev.babel.js': 'webpack',
+  'webpack.config.dev.babel.ts': 'webpack',
+  'webpack.prod.js': 'webpack',
+  'webpack.prod.ts': 'webpack',
+  'webpack.server.js': 'webpack',
+  'webpack.server.ts': 'webpack',
+  'webpack.client.js': 'webpack',
+  'webpack.client.ts': 'webpack',
+  'webpack.config.server.js': 'webpack',
+  'webpack.config.server.ts': 'webpack',
+  'webpack.config.client.js': 'webpack',
+  'webpack.config.client.ts': 'webpack',
+  'webpack.config.production.babel.js': 'webpack',
+  'webpack.config.production.babel.ts': 'webpack',
+  'webpack.config.prod.babel.js': 'webpack',
+  'webpack.config.prod.babel.ts': 'webpack',
+  'webpack.config.prod.js': 'webpack',
+  'webpack.config.prod.ts': 'webpack',
+  'webpack.config.production.js': 'webpack',
+  'webpack.config.production.ts': 'webpack',
+  'webpack.config.staging.js': 'webpack',
+  'webpack.config.staging.ts': 'webpack',
+  'webpack.config.babel.js': 'webpack',
+  'webpack.config.babel.ts': 'webpack',
+  'webpack.config.base.babel.js': 'webpack',
+  'webpack.config.base.babel.ts': 'webpack',
+  'webpack.config.base.js': 'webpack',
+  'webpack.config.base.ts': 'webpack',
+  'webpack.config.staging.babel.js': 'webpack',
+  'webpack.config.staging.babel.ts': 'webpack',
+  'webpack.config.coffee': 'webpack',
+  'webpack.config.test.js': 'webpack',
+  'webpack.config.test.ts': 'webpack',
+  'webpack.config.vendor.js': 'webpack',
+  'webpack.config.vendor.ts': 'webpack',
+  'webpack.config.vendor.production.js': 'webpack',
+  'webpack.config.vendor.production.ts': 'webpack',
+  'webpack.test.js': 'webpack',
+  'webpack.test.ts': 'webpack',
+  'webpack.dist.js': 'webpack',
+  'webpack.dist.ts': 'webpack',
+  'webpackfile.js': 'webpack',
+  'webpackfile.ts': 'webpack',
+  'ionic.config.json': 'ionic',
+  '.io-config.json': 'ionic',
+  'gulpfile.js': 'gulp',
+  'gulpfile.ts': 'gulp',
+  'gulpfile.babel.js': 'gulp',
+  'package.json': 'nodejs',
+  'package-lock.json': 'nodejs',
+  '.nvmrc': 'nodejs',
+  '.npmignore': 'npm',
+  '.npmrc': 'npm',
+  '.yarnrc': 'yarn',
+  'yarn.lock': 'yarn',
+  '.yarnclean': 'yarn',
+  '.yarn-integrity': 'yarn',
+  'yarn-error.log': 'yarn',
+  'androidmanifest.xml': 'android',
+  '.env': 'tune',
+  '.env.example': 'tune',
+  '.babelrc': 'babel',
+  'contributing.md': 'contributing',
+  'contributing.md.rendered': 'contributing',
+  'readme.md': 'readme',
+  'readme.md.rendered': 'readme',
+  changelog: 'changelog',
+  'changelog.md': 'changelog',
+  'changelog.md.rendered': 'changelog',
+  CREDITS: 'credits',
+  'credits.txt': 'credits',
+  'credits.md': 'credits',
+  'credits.md.rendered': 'credits',
+  '.flowconfig': 'flow',
+  'favicon.ico': 'favicon',
+  'karma.conf.js': 'karma',
+  'karma.conf.ts': 'karma',
+  'karma.conf.coffee': 'karma',
+  'karma.config.js': 'karma',
+  'karma.config.ts': 'karma',
+  'karma-main.js': 'karma',
+  'karma-main.ts': 'karma',
+  '.bithoundrc': 'bithound',
+  'appveyor.yml': 'appveyor',
+  '.travis.yml': 'travis',
+  'protractor.conf.js': 'protractor',
+  'protractor.conf.ts': 'protractor',
+  'protractor.conf.coffee': 'protractor',
+  'protractor.config.js': 'protractor',
+  'protractor.config.ts': 'protractor',
+  'fuse.js': 'fusebox',
+  procfile: 'heroku',
+  '.editorconfig': 'editorconfig',
+  '.gitlab-ci.yml': 'gitlab',
+  '.bowerrc': 'bower',
+  'bower.json': 'bower',
+  '.eslintrc.js': 'eslint',
+  '.eslintrc.yaml': 'eslint',
+  '.eslintrc.yml': 'eslint',
+  '.eslintrc.json': 'eslint',
+  '.eslintrc': 'eslint',
+  '.eslintignore': 'eslint',
+  'code_of_conduct.md': 'conduct',
+  'code_of_conduct.md.rendered': 'conduct',
+  '.watchmanconfig': 'watchman',
+  'aurelia.json': 'aurelia',
+  'mocha.opts': 'mocha',
+  jenkinsfile: 'jenkins',
+  'firebase.json': 'firebase',
+  '.firebaserc': 'firebase',
+  'rollup.config.js': 'rollup',
+  'rollup.config.ts': 'rollup',
+  'rollup-config.js': 'rollup',
+  'rollup-config.ts': 'rollup',
+  'rollup.config.prod.js': 'rollup',
+  'rollup.config.prod.ts': 'rollup',
+  'rollup.config.dev.js': 'rollup',
+  'rollup.config.dev.ts': 'rollup',
+  'rollup.config.prod.vendor.js': 'rollup',
+  'rollup.config.prod.vendor.ts': 'rollup',
+  '.hhconfig': 'hack',
+  '.stylelintrc': 'stylelint',
+  'stylelint.config.js': 'stylelint',
+  '.stylelintrc.json': 'stylelint',
+  '.stylelintrc.yaml': 'stylelint',
+  '.stylelintrc.yml': 'stylelint',
+  '.stylelintrc.js': 'stylelint',
+  '.stylelintignore': 'stylelint',
+  '.codeclimate.yml': 'code-climate',
+  '.prettierrc': 'prettier',
+  'prettier.config.js': 'prettier',
+  '.prettierrc.js': 'prettier',
+  '.prettierrc.json': 'prettier',
+  '.prettierrc.yaml': 'prettier',
+  '.prettierrc.yml': 'prettier',
+  'nodemon.json': 'nodemon',
+  '.sonarrc': 'sonar',
+  browserslist: 'browserlist',
+  '.browserslistrc': 'browserlist',
+  '.snyk': 'snyk',
+  '.drone.yml': 'drone',
+};
+
+export default function getIconForFile(name) {
+  return fileNameIcons[name] ||
+         fileExtensionIcons[name ? name.split('.').pop() : ''] ||
+         '';
+}

app/assets/stylesheets/pages/repo.scss

@@ -96,8 +96,14 @@
   padding: 6px 12px;
 }
 
-.multi-file-table-name {
+table.table tr td.multi-file-table-name {
   width: 350px;
+  padding: 6px 12px;
+
+  svg {
+    vertical-align: middle;
+    margin-right: 2px;
+  }
 }
 
 .multi-file-table-col-commit-message {
@@ -132,6 +138,10 @@
   border-bottom: 1px solid $white-dark;
   cursor: pointer;
 
+  svg {
+    vertical-align: middle;
+  }
+
   &.active {
     background-color: $white-light;
     border-bottom-color: $white-light;

app/helpers/icons_helper.rb

@@ -30,6 +30,13 @@ module IconsHelper
     ActionController::Base.helpers.image_path('icons.svg', host: sprite_base_url)
   end
 
+  def sprite_file_icons_path
+    # SVG Sprites currently don't work across domains, so in the case of a CDN
+    # we have to set the current path deliberately to prevent addition of asset_host
+    sprite_base_url = Gitlab.config.gitlab.url if ActionController::Base.asset_host
+    ActionController::Base.helpers.image_path('file_icons.svg', host: sprite_base_url)
+  end
+
   def sprite_icon(icon_name, size: nil, css_class: nil)
     css_classes = size ? "s#{size}" : ""
     css_classes << " #{css_class}" unless css_class.blank?

lib/gitlab/gon_helper.rb

@@ -21,6 +21,7 @@ module Gitlab
       gon.revision               = Gitlab::REVISION
       gon.gitlab_logo            = ActionController::Base.helpers.asset_path('gitlab_logo.png')
       gon.sprite_icons           = IconsHelper.sprite_icon_path
+      gon.sprite_file_icons      = IconsHelper.sprite_file_icons_path
 
       if current_user
         gon.current_user_id = current_user.id

spec/javascripts/repo/components/repo_file_spec.js

@@ -32,13 +32,9 @@ describe('RepoFile', () => {
     vm.$mount();
 
     const name = vm.$el.querySelector('.repo-file-name');
-    const fileIcon = vm.$el.querySelector('.file-icon');
 
-    expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
     expect(name.href).toMatch('');
     expect(name.textContent.trim()).toEqual(vm.file.name);
-    expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
-    expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
@@ -49,17 +45,6 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
   });
 
-  it('renders a spinner if the file is loading', () => {
-    const f = file();
-    f.loading = true;
-    vm = createComponent({
-      file: f,
-    });
-
-    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).not.toBeNull();
-    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${vm.file.level * 16}px`);
-  });
-
   it('does not render commit message and datetime if mini', (done) => {
     vm = createComponent({
       file: file(),

spec/javascripts/vue_shared/components/file_icon_spec.js

+import Vue from 'vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('File Icon component', () => {
+  let vm;
+  let FileIcon;
+
+  beforeEach(() => {
+    FileIcon = Vue.extend(fileIcon);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render a span element with an svg', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+    });
+
+    expect(vm.$el.tagName).toEqual('SPAN');
+    expect(vm.$el.querySelector('span > svg')).toBeDefined();
+  });
+
+  it('should render a javascript icon based on file ending', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+    });
+
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#javascript`);
+  });
+
+  it('should render a image icon based on file ending', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.png',
+    });
+
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#image`);
+  });
+
+  it('should render a webpack icon based on file namer', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'webpack.js',
+    });
+
+    expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#webpack`);
+  });
+
+  it('should render a standard folder icon', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'js',
+      folder: true,
+    });
+
+    expect(vm.$el.querySelector('span > svg > use').getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#folder`);
+  });
+
+  it('should render a loading icon', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+      loading: true,
+    });
+
+    expect(
+      vm.$el.querySelector('i').getAttribute('class'),
+    ).toEqual('fa fa-spin fa-spinner fa-1x');
+  });
+
+  it('should add a special class and a size class', () => {
+    vm = mountComponent(FileIcon, {
+      fileName: 'test.js',
+      cssClasses: 'extraclasses',
+      size: 120,
+    });
+
+    const classList = vm.$el.firstChild.classList;
+    const containsSizeClass = classList.contains('s120');
+    const containsCustomClass = classList.contains('extraclasses');
+    expect(containsSizeClass).toBe(true);
+    expect(containsCustomClass).toBe(true);
+  });
+});