Skip to content

Latest commit

 

History

History
91 lines (72 loc) · 3.99 KB

how-to-icons.md

File metadata and controls

91 lines (72 loc) · 3.99 KB

SCION Workbench

SCION Workbench Projects Overview Changelog Contributing Sponsoring

SCION Workbench > How To Guides > Icons

The SCION Workbench requires some icons packed as icon font.

Installation

The icon font can be downloaded from GitHub. Unzip the icon font and place the extracted font files in the /public/fonts folder.

Workbench icons

The workbench requires the following icons with the following ligatures:

Ligature Usage
chevron-down Indicator for opening the views drop down menu
search Decorator for the search field in the views drop down menu
close Button to close a view tab
edit Marker if a view contains dirty content

Configuration

The location of the icon font can be configured via the SCSS module @scion/workbench, required if deploying the application in a subdirectory, or to configure a custom icon font.

@use '@scion/workbench' with (
  $icon-font: (
    directory: '/path/to/font', // defaults to '/fonts' if omitted
    filename: 'custom-workbench-icons' // defaults to 'scion-workbench-icons' if omitted
  )
);

How to change icons

The icons can be replaced using the IcoMoon web application. Open IcoMoon in your browser and import the icon font definition from scion-workbench-icons.json. After changing the icons, regenerate the icon font, download it and place it in the /public/fonts directory.

We recommend incrementing the version when modifying the icon font, enabling browser cache invalidation when icons change.

@use '@scion/workbench' with (
  $icon-font: (
    version: '1.0.0'
  )
);

Deploying the app in a subdirectory

If deploying the application in a subdirectory, use a relative directory path for the browser to load the icon files relative to the document base URL (as specified in the <base> HTML tag). Note that using a relative path requires to exclude the icon files from the application build. Depending on building the application with esbuild @angular-devkit/build-angular:application or webpack @angular-devkit/build-angular:browser, different steps are required to exclude the icons from the build.

Using @angular-devkit/build-angular:application (esbuild)

Configure the @scion/workbench SCSS module to load the icon font relative to the document base URL:

@use '@scion/workbench' with (
  $icon-font: (
    directory: 'path/to/font' // no leading slash, typically `fonts`
  )
);

Add the path to the externalDependencies build option in the angular.json file:

"externalDependencies": [
  "path/to/font/scion-workbench-icons.*"
]

Using @angular-devkit/build-angular:browser (webpack)

Configure the @scion/workbench SCSS module to load the icon font relative to the document base URL:

@use '@scion/workbench' with (
  $icon-font: (
    directory: '^path/to/font' // no leading slash but with a caret (^), typically `^fonts`
  )
);