Skip to content

Latest commit

 

History

History
46 lines (36 loc) · 1.43 KB

README.md

File metadata and controls

46 lines (36 loc) · 1.43 KB
Raw

Toolbox Font

This npm package contains the TenForce font (src/fonts/tenforce.woff) and the Source Sans Pro font (src/fonts/SourceSansPro-*.ttf).

Usage

Both font packages can be imported using the style.scss file, but there are also separate SCSS files in case you only need one set of them:

  • src/styles/source-sans-pro.scss
  • src/styles/tenforce-font.scss
@import "~@tenforce/toolbox-fontmap/dist-lib/styles/style";

Symbols Utility

Starting v2.0.0 we have added the src/utils/Symbols.ts file, which maps every TenForce icon to a named variable, to make usage of the font more readable in our code.

import { Symbols } from "@tenforce/toolbox-fontmap"

Updating the TenForce font

  1. Update the src/fonts/tenforce.woff file.
    • Make sure the filename stays the same.
  2. Adding new icons.
    • Add new icons to src/utils/Symbols.ts.
    • Add new tags to the demo page example/src/utils/tags.ts.
  3. Removing icons.
    • Remove icons from src/utils/Symbols.ts.
    • Remove tags from example/src/utils/tags.ts.

Demo page

The demo page will render every single icon in the TenForce font. It also supports search on tags, which are stored in example/src/utils/tags.ts.

Besides this, when you click on an icon, you will see:

  • character code
  • name
  • unicode
  • tags

Running the demo application

To run the demo page, simply go to the example folder and:

yarn install
yarn start