@magic/glyphs

UNFINISHED, WIP.

takes a directory of svgs and builds

• iconfont files (ttf, woff2, woff, eot, svg),
• a @magic/css file,
• a css file,
• a file with a @magic-module for each icon
• and a html-preview.

install

// globally installed cli
npm install -g @magic/glyphs

// locally in your app
npm install --save-dev --save-exact @magic/glyphs

usage

after installing globally, magic-glyphs will be available as an executable on the PATH.

if installed as app dependency, magic-glyphs will be available in package.json npm run scripts, and installed in node_modules/.bin/magic-glyphs.

cli

read all svg files in src,

then write svg, ttf, woff, woff2, and eot,
js, css, html, @magic/css, and @magic/modules files to dist.

magic-glyphs --dir src --out dist --name fontname --cssPrefix fn-

api

import glyphs from '@magic/glyphs'

const options = {
  // settings that get used in output files
  name: 'magic-icons', // name of the font when using it in css
  cssPrefix: 'mi',     // prefix of the icon class, mi-iconname
  dir: 'svg',          // the directory to read from
  output: 'dist',      // the directory to write to
  webRoot: '/',        // web root of the resulting homepage
  fontDir: '',         // sub directory to write font files to.
  cssDir: '',          // sub directory to write css files to.
  jsDir: '',           // sub directory to write js files to.
  minimal: false,      // only output minimal files, no preview, no js.
  noCss: false,        // do not generate css file
  noMagicCss: false,   // do not generate magicCss.mjs file
  noJs: false,         // do not generate javascript file
  noPreview: false,    // do not generate preview
  noModules: false,    // do not generate @magic-module file
  noWrite: false,      // do not write any files

  // default options for svg <> font generators
  ascent: undefined,
  centerHorizontally: true,
  descent: 0,
  fixedWidth: false,
  fontId: null,
  formats: ['svg', 'ttf', 'eot', 'woff2', 'woff'],
  formatsOptions: {
    ttf: {
      copyright: null,
      ts: null,
      version: null,
    },
  },
  glyphTransformFn: null,
  metadata: null,
  metadataProvider: null,
  fontHeight: 1000,
  normalize: true,
  prependUnicode: false,
  round: 10e12,
  startUnicode: 0xea01,
  verbose: false,
}

const results = glyphs(options)

libraries used to build font files:

• svgicons2svgfont
• svg2ttf
• ttf2eot
• ttf2woff
• ttf2woff2

changelog

0.0.1

first release

0.0.2 - unreleased

...