Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save colemanw/9c9a12aae16a4bfe2678de86b661d922 to your computer and use it in GitHub Desktop.
Save colemanw/9c9a12aae16a4bfe2678de86b661d922 to your computer and use it in GitHub Desktop.
Font Awesome File Icons: Mapping MIME Types to correct icon classes
<?php
/**
* Get font awesome file icon class for specific MIME Type
* @see https://gist.github.com/guedressel/0daa170c0fde65ce5551
*
*/
function ($mime_type) {
// List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
$icon_classes = array(
// Media
'image' => 'fa-file-image-o',
'audio' => 'fa-file-audio-o',
'video' => 'fa-file-video-o',
// Documents
'application/pdf' => 'fa-file-pdf-o',
'application/msword' => 'fa-file-word-o',
'application/vnd.ms-word' => 'fa-file-word-o',
'application/vnd.oasis.opendocument.text' => 'fa-file-word-o',
'application/vnd.openxmlformats-officedocument.wordprocessingml' => 'fa-file-word-o',
'application/vnd.ms-excel' => 'fa-file-excel-o',
'application/vnd.openxmlformats-officedocument.spreadsheetml' => 'fa-file-excel-o',
'application/vnd.oasis.opendocument.spreadsheet' => 'fa-file-excel-o',
'application/vnd.ms-powerpoint' => 'fa-file-powerpoint-o',
'application/vnd.openxmlformats-officedocument.presentationml' => 'fa-file-powerpoint-o',
'application/vnd.oasis.opendocument.presentation' => 'fa-file-powerpoint-o',
'text/plain' => 'fa-file-text-o',
'text/html' => 'fa-file-code-o',
'application/json' => 'fa-file-code-o',
// Archives
'application/gzip' => 'fa-file-archive-o',
'application/zip' => 'fa-file-archive-o',
);
foreach ($icon_classes as $text => $icon) {
if (strpos($mime_type, $text) === 0) {
return $icon;
}
}
return 'fa-file-o';
}
@Disane87
Copy link

Disane87 commented Apr 25, 2020

My contribution for using it with Angular and Angular Fontawesome within a pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mimeFontawesome'
})
export class MimeFontawesomePipe implements PipeTransform {

  transform(mimeType: string): string {
    return this.getFontAwesomeIconFromMIME(mimeType);
  }

  getFontAwesomeIconFromMIME(mimeType) {
    // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
    var icon_classes = {
      // Media
      image: "file-image",
      audio: "file-audio",
      video: "file-video",
      // Documents
      "application/pdf": "file-pdf",
      "application/msword": "file-word",
      "application/vnd.ms-word": "file-word",
      "application/vnd.oasis.opendocument.text": "file-word",
      "application/vnd.openxmlformatsfficedocument.wordprocessingml": "file-word",
      "application/vnd.ms-excel": "file-excel",
      "application/vnd.openxmlformatsfficedocument.spreadsheetml": "file-excel",
      "application/vnd.oasis.opendocument.spreadsheet": "file-excel",
      "application/vnd.ms-powerpoint": "file-powerpoint",
      "application/vnd.openxmlformatsfficedocument.presentationml":"file-powerpoint",
      "application/vnd.oasis.opendocument.presentation": "file-powerpoint",
      "text/plain": "file-alt",
      "text/html": "file-code",
      "application/json": "file-code",
      // Archives
      "application/gzip": "file-archive",
      "application/zip": "file-archive"
    };

    for (var key in icon_classes) {
      if (icon_classes.hasOwnProperty(key)) {
        if (mimeType.search(key) === 0) {
          // Found it
          return icon_classes[key];
        }
      } else {
        return "file";
      }
    }
  }

}

Usage within the template:

 <fa-icon [icon]="['fas', file.type | mimeFontawesome]"></fa-icon>

@adamjhickey
Copy link

"application/vnd.openxmlformatsfficedocument.wordprocessingml": "file-word",
      "application/vnd.ms-excel": "file-excel",
      "application/vnd.openxmlformatsfficedocument.spreadsheetml": "file-excel",
      "application/vnd.oasis.opendocument.spreadsheet": "file-excel",
      "application/vnd.ms-powerpoint": "file-powerpoint",
      "application/vnd.openxmlformatsfficedocument.presentationml":"file-powerpoint",

Did some of these end up losing their formatting?
openxmlformatsfficedocument vs. openxmlformats-officedocument

@7sedam7
Copy link

7sedam7 commented Jan 5, 2021

Instead of all those weird loops when you have a dictionary-like structure it's more efficient to do sth like this:
return iconClasses[this.mimeType.split('/')[0]] || iconClasses[this.mimeType] || 'fa-file-o';

@scand1sk
Copy link

scand1sk commented Mar 13, 2021

I agree that the loop is not very efficient, @7sedam7's solution is incomplete, since the loops are designed to find a prefix of the mimetype. For example, the actual prefix for a DOCX document is application/vnd.openxmlformats-officedocument.wordprocessingml.document. Given icon class only contain the prefix. An optimal implementation will probably require a variant of tries. Note that the problem here is to find the longest prefix of a given string, which is not the standard use case for tries. This will be overkill for such a small data set.

I propose the following TypeScript code to simplify the loop, however (using the Fontawesome React package) :

const iconClasses: { [key: string]: IconDefinition } = {
  // Media
  "image": faFileImage,
  "audio": faFileAudio,
  "video": faFileVideo,
  // Documents
  "application/pdf": faFilePdf,
  "application/msword": faFileWord,
  "application/vnd.ms-word": faFileWord,
  "application/vnd.oasis.opendocument.text": faFileWord,
  "application/vnd.openxmlformats-officedocument.wordprocessingml":
  faFileWord,
  "application/vnd.ms-excel": faFileExcel,
  "application/vnd.openxmlformats-officedocument.spreadsheetml":
  faFileExcel,
  "application/vnd.oasis.opendocument.spreadsheet": faFileExcel,
  "application/vnd.ms-powerpoint": faFilePowerpoint,
  "application/vnd.openxmlformats-officedocument.presentationml":
  faFilePowerpoint,
  "application/vnd.oasis.opendocument.presentation": faFilePowerpoint,
  "text/plain": faFileAlt,
  "text/html": faFileCode,
  "application/json": faFileCode,
  // Archives
  "application/gzip": faFileArchive,
  "application/zip": faFileArchive
};

export function getFontAwesomeIconFromMIME(mimeType: string): IconDefinition {
  // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml

  const candidate = Object.entries(iconClasses).find(([k]) =>
    mimeType.startsWith(k)
  )

  if (candidate === undefined) {
    return faFile;
  } else {
    return candidate[1];
  }

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment