File types (mime types) issue in Outlook web addin using Fabric UI

问题

I am working on an Outlook Web Addin using Fabric UI framework. Im using Fabric UI Core without React or AngularJS. I am facing an issue in getting File Types (MIME types) icons. Whatever references I found online for File types in Fabric UI are for React framework.

Is there a way to get file types in Fabric UI with plain Javascript without React? I found the following links where file types are available:

https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/csv.svg

https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/pptx_16x1.svg

I can write a simple JS code to pass appropriate file extension in the above URL to load the intended file type icon. For example :

https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/[file extension]_16x1.svg

Is it correct to get file types this way? Are these URLs reliable source for getting file types icon?

Any help is appreciated with thanks.

回答1:

@uifabric/file-type-icons is the current package containing the set of file type icon mappings. It includes a registration helper along with a few functions to derive a given extension to an image mapping.

@uifabric/styling contains the general icon helper getIcon to pull registered icons from any icon registrations.

I've made a codesandbox example here using vanilla JS: https://codesandbox.io/s/uifabric-filetypeicons-example-yoyp6

...and a cleaner more interactive example in React: https://codesandbox.io/s/file-type-icons-2s54c

The important steps are:

1. Call initializeFileTypeIcons to register file type icons in the icon registry.
2. Call getIconProps({ extension: 'docx', size: 16 }) to get details on the iconName to map to.
3. Call getIcon to get the details of the icon, where you can access the url, which you can inject into raw HTML or use your framework of choice to render an img.

Note that the styling package has a peer dependency on React, so I needed to add it, but it is not being used here. This is something we could certainly improve on.

Hope this helps.

来源：https://stackoverflow.com/questions/60107098/file-types-mime-types-issue-in-outlook-web-addin-using-fabric-ui