@sisinio/font-build

Goal: Build the Material Design Icons SVG icons to a webfont.

Most notably this generates @sisinio/font, but is written to allow others to add custom icons or tweak the output.

CLI

By installing @sisinio/font-build globally one can generate their own webfont build.

# Install Globally
npm install -g @sisinio/font-build
# Reads config from font-build.json
font-build

You can instal @sisinio/font-build localy in you project

# Install Globally
npm install --save-dev @sisinio/font-build
# add your npm build script
# ./node_modules/.bin/font-build

To run without installing use npx @sisinio/font-build

Input

Any version of @sisinio/svg v3.9.95+ will work with no changes. For earlier versions copy the font-build.json and update the version: { major: 3, minor: 9, patch: 95 } values.

Download from MaterialDesign-SVG

font-build --help explains all the possible overrides.

Folder Structure

meta.json
package.json
svg/
  account.svg
  ...

package.json custom section

  "family": {
    "prefix": "default",
    "fileName": "default",
    "font": {
      "name": "default",
      "family": "dmsicons",
      "weight": "normal"
    },
    "color": {
      "header": "374b5a",
      "link": "c5dce4",
      "new": "ebf0f5",
      "deprecated": "cf4c35"
    },
    "icon": "M0,0H8V3H18V0H26V8H23V18H26V26H18V23H8V21H18V18H21V8H18V5H8V8H5V18H8V26H0V18H3V8H0V0M2,2V6H6V2H2M2,20V24H6V20H2M20,2V6H24V2H20M20,20V24H24V20H20Z"
  }

font-build is ran in the root of this folder.

Output

The output is essentially the @sisinio/font package that is released to NPM and the CDN after every release. These are built to target IE11+.

dist/
  css/
    <your-font-name>.css
    <your-font-name>.css.map
    <your-font-name>.min.css
    <your-font-name>.min.css.map
  fonts/
    <your-font-name>-webfont.eot
    <your-font-name>-webfont.ttf
    <your-font-name>-webfont.woff
    <your-font-name>-webfont.woff2
  scss/
    <your-font-name>.scss
    _animated.scss
    _core.scss
    _extras.scss
    _functions.scss
    _icons.scss
    _paths.scss
    _variables.scss
  index.html

Why is the SVG font not generated?

The .svg format is very heavy font format not used by modern browsers, but it can be included. Simply append the --fontSvg flag.

font-build --fontSvg

Request Features

Please let us know if you need any features beyond the current CLI options by opening an issue.

The webfont Package is Amazing!

99% of this is thanks to the https://www.npmjs.com/package/webfont package. They really have done amazing work.