Fix for FileTypeIcon in extensions

Author: estruyf

CHANGELOG.md

@@ -1,8 +1,12 @@
 # Releases
 
+## 1.1.3
+
+- `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.
+
 ## 1.1.2
 
-- Fix for WebPartTitle control to inherit color
+- Fix for `WebPartTitle` control to inherit color
 - Improved telemetry with some object checks
 
 ## 1.1.1

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,9 @@
 # Releases
 
+## 1.1.3
+
+- `FileTypeIcon` icon fixed. This control should now also work in SPFx extensions.
+
 ## 1.1.2
 
 - Fix for WebPartTitle control to inherit color

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -58,6 +58,6 @@
     "url": "https://github.com/SharePoint/sp-dev-fx-controls-react/issues"
   },
    "main":"lib/index.js",
-  
+
   "homepage": "https://github.com/SharePoint/sp-dev-fx-controls-react"
 }

src/controls/fileTypeIcon/FileTypeIcon.module.scss

@@ -0,0 +1,7 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+// Retrieve all the CSS classes for brand icons from Office UI Fabric
+:global {
+  @import '~office-ui-fabric-react/dist/sass/mixins/BrandIcon.Mixins';
+  @import '~office-ui-fabric-react/dist/sass/BrandIcon';
+}

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96 } from './IFileTypeIcon';
 import * as appInsights from '../../common/appInsights';
+import { Icon, IconType as IconUIType } from 'office-ui-fabric-react/lib/components/Icon';
+import * as styles from './FileTypeIcon.module.scss';
 
 const ICON_GENERIC = 'Page';
 const ICON_DEFAULT_SIZE = 'icon16';
@@ -186,7 +188,8 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
       const iconImage = this._getIconImageName();
       // Check if the image was found, otherwise a generic image will be returned
       if (typeof iconImage.image !== 'undefined' && iconImage.image !== null) {
-        iconElm = <div style={{ display: 'inline-block' }} className={`ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}`}></div>;
+        // iconElm = <div style={{ display: 'inline-block' }} className={`ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}`}></div>;
+        iconElm = <Icon iconType={IconUIType.image} imageProps={{ className: `ms-BrandIcon--${iconImage.size} ms-BrandIcon--${iconImage.image}` }} />;
       } else {
         // Return a generic image
         let imgElm = <img />;
@@ -215,7 +218,8 @@ export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     } else {
       // Return the icon font element
       const iconClass = this._getIconClassName();
-      iconElm = <i className={`ms-Icon ms-Icon--${iconClass}`} aria-hidden='true'></i>;
+      // iconElm = <i className={`ms-Icon ms-Icon--${iconClass}`} aria-hidden='true'></i>;
+      iconElm = <Icon iconName={iconClass} />;
     }
 
     // Return the icon element