How to use @uifabric/file-type-icons - 10 common examples

To help you get started, we’ve selected a few @uifabric/file-type-icons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoftgraph / msgraph-training-smartui-components / LabFiles / Cards / Groups / GroupDetails.tsx View on Github external
name: doc.title,
        url: doc.webUrl,
        previewImageSrc: doc.thumbnailUrl,
        iconSrc: globalSettings.icons[iconProps.iconName].code.props.src   // hack for file-type-icons
      };
      recentDocs.previewImages.push(previewImage);
      documentCardDocTitle = <DocumentCardTitle title={doc.title} shouldTruncate={true} />;
    }
    else {

      let docs = this.props.group.driveRecentItems;
      for (var i = 0; i < docs.length; i++) {
        let iconProps: IIconProps = {};
        switch (docs[i].fileType) {
          case "folder":
            iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 16 });
            break;
          default:
            iconProps = getFileTypeIconProps({ extension: docs[i].fileType, size: 16 });
            break;
        }

        let previewImage: IDocumentCardPreviewImage = {
          name: docs[i].title,
          url: docs[i].webUrl,
          iconSrc: globalSettings.icons[iconProps.iconName].code.props.src   // hack for file-type-icons
        };
        recentDocs.previewImages.push(previewImage);
      }
    }

    libraryActivity = (
github microsoftgraph / msgraph-training-smartui-components / Demos / 03-adaptive-cards / GraphUI / Components / GroupDetails.tsx View on Github external
let iconProps: IIconProps = this.getIconProps((doc.fileType));
      let previewImage: IDocumentCardPreviewImage = {
        name: doc.title,
        url: doc.webUrl,
        previewImageSrc: doc.thumbnailUrl,
        iconSrc: globalSettings.icons[iconProps.iconName].code.props.src   // hack for file-type-icons
      };
      recentDocs.previewImages.push(previewImage);
      documentCardDocTitle = <DocumentCardTitle title={doc.title} shouldTruncate={true} />;
    } else {
      let docs = this.props.group.driveRecentItems;
      for (var i = 0; i < docs.length; i++) {
        let iconProps: IIconProps = {};
        switch (docs[i].fileType) {
          case "folder":
            iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 16 });
            break;
          default:
            iconProps = getFileTypeIconProps({ extension: docs[i].fileType, size: 16 });
            break;
        }

        let previewImage: IDocumentCardPreviewImage = {
          name: docs[i].title,
          url: docs[i].webUrl,
          iconSrc: globalSettings.icons[iconProps.iconName].code.props.src   // hack for file-type-icons
        };
        recentDocs.previewImages.push(previewImage);
      }
    }

    libraryActivity = (
github OfficeDev / office-ui-fabric-react / apps / fabric-website / src / root.tsx View on Github external
import { registerIcons } from 'office-ui-fabric-react';
import { initializeFileTypeIcons } from '@uifabric/file-type-icons';
import { createSite } from './utilities/createSite';
import * as platformPickerStyles from '@uifabric/example-app-base/lib/components/PlatformPicker/PlatformPicker.module.scss';
import { SiteDefinition } from './SiteDefinition/index';
import { HomePage } from './pages/HomePage/HomePage';
import { NotFoundPage } from './pages/NotFoundPage/NotFoundPage';
import { AndroidLogo, AppleLogo, WebLogo } from './utilities/index';

// TODO: handle redirects

initializeFileTypeIcons('https://static2.sharepointonline.com/files/fabric/assets/item-types-fluent/');

registerIcons({
  icons: {
    'AndroidLogo-platformPicker': AndroidLogo({
      className: platformPickerStyles.icon
    }),
    'AppleLogo-platformPicker': AppleLogo({
      className: platformPickerStyles.icon
    }),
    'WebLogo-platformPicker': WebLogo({
      className: platformPickerStyles.icon
    })
  }
});

createSite(SiteDefinition, [NotFoundPage, HomePage]);
github microsoftgraph / msgraph-training-smartui-components / LabFiles / Cards / Groups / GroupDetails.tsx View on Github external
private getIconProps(fileSuffix: string): IIconProps {
    let iconProps: IIconProps = {};

    switch (fileSuffix) {
      case "folder":
        iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 16 });
        break;
      default:
        iconProps = getFileTypeIconProps({ extension: fileSuffix, size: 16 });
        break;
    }
    return iconProps;
  }
github microsoftgraph / msgraph-training-smartui-components / Demos / 03-adaptive-cards / GraphUI / Components / GroupDetails.tsx View on Github external
private getIconProps(fileSuffix: string): IIconProps {
    let iconProps: IIconProps = {};

    switch (fileSuffix) {
      case "folder":
        iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 16 });
        break;
      default:
        iconProps = getFileTypeIconProps({ extension: fileSuffix, size: 16 });
        break;
    }
    return iconProps;
  }
}
github microsoftgraph / msgraph-training-smartui-components / LabFiles / Cards / Groups / GroupDetails.tsx View on Github external
private getIconProps(fileSuffix: string): IIconProps {
    let iconProps: IIconProps = {};

    switch (fileSuffix) {
      case "folder":
        iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 16 });
        break;
      default:
        iconProps = getFileTypeIconProps({ extension: fileSuffix, size: 16 });
        break;
    }
    return iconProps;
  }
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / FileTypeIcon / examples / FileTypeIcon.Basic.Example.tsx View on Github external
<h3>Size 16 dotx icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'dot', size: 16, imageFileType: 'svg' })} />
        <h3>Size 20 email icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: '.msg', size: 20, imageFileType: 'svg' })} />
        <h3>Size 32 exe icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'msi', size: 32 })} />
        <h3>Size 40 font icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: '.woff', size: 40 })} />
        <h3>Size 48 html icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'html', size: 48 })} />
        <h3>Size 64 mpp icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'mpp', size: 64 })} />
        <h3>Size 96 link icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'url', size: 96 })} />
        <h3>Size 16 docset icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.docset, size: 16, imageFileType: 'png' })} />
        <h3>Size 20 folder icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.folder, size: 20, imageFileType: 'svg' })} />
        <h3>Size 40 genericfile icon as .png</h3>
        <Icon {...getFileTypeIconProps({ size: 40, imageFileType: 'png' })} />
        <h3>Size 48 listitem icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.listItem, size: 48, imageFileType: 'svg' })} />
        <h3>Size 64 sharedfolder icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.sharedFolder, size: 64, imageFileType: 'png' })} />
      </div>
    );
  }
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / FileTypeIcon / examples / FileTypeIcon.Basic.Example.tsx View on Github external
<h3>Size 20 email icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: '.msg', size: 20, imageFileType: 'svg' })} />
        <h3>Size 32 exe icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'msi', size: 32 })} />
        <h3>Size 40 font icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: '.woff', size: 40 })} />
        <h3>Size 48 html icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'html', size: 48 })} />
        <h3>Size 64 mpp icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'mpp', size: 64 })} />
        <h3>Size 96 link icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'url', size: 96 })} />
        <h3>Size 16 docset icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.docset, size: 16, imageFileType: 'png' })} />
        <h3>Size 20 folder icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.folder, size: 20, imageFileType: 'svg' })} />
        <h3>Size 40 genericfile icon as .png</h3>
        <Icon {...getFileTypeIconProps({ size: 40, imageFileType: 'png' })} />
        <h3>Size 48 listitem icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.listItem, size: 48, imageFileType: 'svg' })} />
        <h3>Size 64 sharedfolder icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.sharedFolder, size: 64, imageFileType: 'png' })} />
      </div>
    );
  }
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / FileTypeIcon / examples / FileTypeIcon.Basic.Example.tsx View on Github external
<h3>Size 40 font icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: '.woff', size: 40 })} />
        <h3>Size 48 html icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'html', size: 48 })} />
        <h3>Size 64 mpp icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'mpp', size: 64 })} />
        <h3>Size 96 link icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'url', size: 96 })} />
        <h3>Size 16 docset icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.docset, size: 16, imageFileType: 'png' })} />
        <h3>Size 20 folder icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.folder, size: 20, imageFileType: 'svg' })} />
        <h3>Size 40 genericfile icon as .png</h3>
        <Icon {...getFileTypeIconProps({ size: 40, imageFileType: 'png' })} />
        <h3>Size 48 listitem icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.listItem, size: 48, imageFileType: 'svg' })} />
        <h3>Size 64 sharedfolder icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.sharedFolder, size: 64, imageFileType: 'png' })} />
      </div>
    );
  }
}
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / FileTypeIcon / examples / FileTypeIcon.Basic.Example.tsx View on Github external
<h3>Size 48 html icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'html', size: 48 })} />
        <h3>Size 64 mpp icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'mpp', size: 64 })} />
        <h3>Size 96 link icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ extension: 'url', size: 96 })} />
        <h3>Size 16 docset icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.docset, size: 16, imageFileType: 'png' })} />
        <h3>Size 20 folder icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.folder, size: 20, imageFileType: 'svg' })} />
        <h3>Size 40 genericfile icon as .png</h3>
        <Icon {...getFileTypeIconProps({ size: 40, imageFileType: 'png' })} />
        <h3>Size 48 listitem icon as .svg</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.listItem, size: 48, imageFileType: 'svg' })} />
        <h3>Size 64 sharedfolder icon as .png</h3>
        <Icon {...getFileTypeIconProps({ type: FileIconType.sharedFolder, size: 64, imageFileType: 'png' })} />
      </div>
    );
  }
}