@matrix-widget-toolkit/semantic-ui

This package provides a Semantic UI theme that fits to the default Element theme. See matrix-example-widget-semantic-ui for some examples.

Warning This package is deprecated. We are about to migrate all our packages to use Material UI in the future.

Usage

This package should be used with a CRACO project.

Install it with:

1yarn add @matrix-widget-toolkit/semantic-ui semantic-ui-react
2yarn add --dev @semantic-ui-react/craco-less

Register the plugin in your craco.config.js:

1module.exports = {
2  plugins: [
3    {
4      plugin: require('@matrix-widget-toolkit/semantic-ui/craco/buildSemanticUiThemePlugin'),
5    },
6  ],
7};

Add the following to your package.json so jest finds the virtual modules that are used inside of the package:

1  "jest": {
2    "moduleNameMapper": {
3      "semantic-ui-less/semantic.less(.+)": "semantic-ui-less/semantic.less"
4    }
5  }

Now you can use it in your application:

1import {
2  SemanticUiThemeProvider,
3  SemanticUiWidgetApiProvider,
4} from '@matrix-widget-toolkit/semantic-ui';
5import { Button } from 'semantic-ui-react';
6
7function App() {
8  return (
9    <SemanticUiThemeProvider>
10      <SemanticUiWidgetApiProvider>
11        <Button primary>A styled button</Button>
12      </SemanticUiWidgetApiProvider>
13    </SemanticUiThemeProvider>
14  );
15}
16
17export default App;

Customization

You can override the primary color by setting the REACT_APP_PRIMARY_COLOR environment variable to a custom color during build.

Update Font Awesome icons

The Font Awesome version coming with Semantic UI is to old and is missing icons. Therefore this theme includes a newer set of icons. To update the icons, use the following steps:

1. Use create-fomantic-icons to download the newest stable version of fontawesome and generate the files needed by Semantic UI. Run yarn create fomantic-icons to generate the required files.
2. Modify fui-icons/ui/src/themes/default/elements/icon.variables and remove the #icons references from SVG font imports.