Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use Office UI Fabric React in a non-Microsoft internal application?

I was wondering if I can just use the Office React Fabric UI framework in a company internal application that is not related to Microsoft services such as SharePoint or Office.

I read the License but didn't quite clear my question.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/LICENSE

like image 473
Paul Sancer Avatar asked Mar 28 '19 02:03

Paul Sancer


People also ask

What is the use of office fabric UI?

Office UI Fabric React is the front-end framework for building experiences for Office and Office 365. It includes a robust collection of responsive, mobile-first components that make it easy for you to create web experiences by using the Office Design Language.

What is Office UI fabric react?

Fluent UI React (formerly Office UI Fabric React) is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language. For information about available controls, see the Fluent UI website.

Which of the following commands would you run to leverage Office UI fabric in your SharePoint framework Spfx project?

Office UI Fabric for SharePoint Framework To install the Fabric Core package in your existing project, use the below command. @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore. scss'; However, it is recommended to use "Office UI Fabric React" package with SharePoint Framework.


1 Answers

Yes! You can definitely use Fabric for these kinds of apps. However, according to the assets license linked to from that license doc, the assets (fonts and icons) can only be used if the app connects to a Microsoft service somehow. This could be as simple as hosting the app as an Azure web app.

Here's a related quote from this GitHub comment that expands on this a little:

Fabric's assets (fonts, icons, and product logos) are part of Microsoft's brand, and can only be used in apps & services--including commercial ones--that connect with Microsoft products. These include Add-ins for Office, web parts for SharePoint, and other extensions for Microsoft products. This applies to usage of the assets in application code itself as well as any designs produced by the toolkit.

However, all of Fabric's code (JS, CSS, etc.) is MIT-licensed and can be used in non-Microsoft commercial products. There's even first-class support for Selawik, an open source drop-in substitute for Segoe UI. There is not a substitute for the icon font today, however.

To opt out of those assets, you can you substitute Fabric's default icons with something like Font Awesome like so:

import { registerIcons } from '@uifabric/styling';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

registerIcons({
  icons: {
    'check-square': <FontAwesomeIcon icon='check-square' />,
    ...etc
  }
});

To opt out of Segoe UI, you can use create a custom theme that replaces the defaultFontStyle with a different font. Here's a CodePen illustrating that: https://codepen.io/jahnp/pen/pYMyZM

like image 102
Peter Jahn Avatar answered Oct 19 '22 09:10

Peter Jahn