svg2font

Webfont generater based on jaywcjlove/svgtofont.

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font, Generator of fonts from SVG icons.

Install ·Command · Usage ·Scss mixin ·Options

Information

This project has been moved uuki/iconfont-helper.

The issue I wanted to solve in the first place was the handling of icon font styles.

So, while the icon font generator itself is freely selectable by the developer, we wanted to generate a common, generic mixin.

Fortunately, all icon font generators have similar output styles, so we separated the process of adding useful mixins to the css after building.

The process is also based on the original project that I forked.

Thanks for a great project (jaywcjlove/svgtofont)!

3 changes

• selectable font type
• svg2font.config.js
• built-in scss mixin

Install

yarn add @uuki/svg2font

Using With Command

{
  "scripts": {
    "font": "svg2font --sources ./icons --output ./fonts --config ./svg2font.config.js"
  }
}

You can also configuration it by creating svg2font.config.js.

module.exports = {
  src: './example/icons',
  dist: './example/fonts',
  fontName: 'iconfont',
  fontTypes: ['ttf', 'woff', 'woff2'],
  css: {
    output: './example/css',
    cssPath: '../fonts/',
    fontSize: '16px',
  },
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: false,
    fixedWidth: true,
  },
  svgoOptions: {
    multipass: true, // boolean. false by default
    datauri: 'enc', // 'base64', 'enc' or 'unenc'. 'base64' by default
    js2svg: {
      indent: 2, // string with spaces or number of spaces. 4 by default
    },
    plugins: [
      'removeDoctype',
      'removeXMLProcInst',
      'removeComments',
      'removeMetadata',
      'removeEditorsNSData',
      'cleanupAttrs',
      'mergeStyles',
      'inlineStyles',
      'minifyStyles',
      'cleanupIDs',
      'removeUselessDefs',
      'convertColors',
      'removeUnknownsAndDefaults',
      'removeNonInheritableGroupAttrs',
      'removeUselessStrokeAndFill',
      'cleanupEnableBackground',
      'removeHiddenElems',
      'removeEmptyText',
      'convertShapeToPath',
      'convertEllipseToCircle',
      'moveElemsAttrsToGroup',
      'moveGroupAttrsToElems',
      'collapseGroups',
      'convertPathData',
      'convertTransform',
      'removeEmptyAttrs',
      'removeEmptyContainers',
      'removeUnusedNS',
      'sortDefsChildren',
      'removeTitle',
      'removeDesc',
      { name: 'cleanupNumericValues', active: false },
      { name: 'removeViewBox', active: false },
      { name: 'mergePaths', active: false },
    ],
  },
  ...[more options](https://github.com/jaywcjlove/svgtofont#options)
}

*Currently, website option is not supported.

Using With Nodejs

const svg2font = require('@uuki/svg2font')
const path = require('path')

svg2font({
  src: path.resolve(process.cwd(), 'src/icons'), // svg path
  dist: path.resolve(process.cwd(), 'dist/fonts'), // output path
  fontName: 'iconfont', // font name
  css:
    output: './dist/css',
    cssPath: '../fonts/',
  }, // Create CSS files.
}).then(() => {
  console.log('done!')
})

Using scss mixin

@import 'path/to/iconfont';

/// @param {string} $filename - SVG name (no prefix)
/// @param {string} $insert - Pseudo class (default: before)
/// @param {bool} $extend - If you want to extend only the style for iconfont. (default: false)
///
@include icon('arrow-top');

Options

Please refer to here options