how to generate webfont from SVG icons

Question

Does anyone know how to generate webfont from SVG icons. I'm using webpack, angular2 and typescript in my project.

Can somebody give me idea how to achieve this? I'm not getting anything over the internet. Please help me!!

code here doesn't have too many information

I want to generate webfont for below svg icon. Thanks in advance

Answer 1

I achieved this with webfonts-generator plugin

Step1:

1. Add "webfonts-generator": "^0.3.5" dependency in package.json
2. Create a folder icon under src and place all your svg files there
3. Add below code to your webpack.common.js file

webpack.common.js

const webfontsGenerator = require('webfonts-generator');
webfontsGenerator({
    files: [
         'src/icon/search.svg',
         'src/icon/error.svg',
         'src/icon/warning.svg'
      ],
    dest: 'custom-fonts/',
    fontName: 'custom-icons',
    html: true,
    templateOptions: {
      baseClass: 'custom',
      classPrefix: 'custom-'
    }
}, function(error) {
    if (error) {
      console.log('Fail!', error);
    } else {
      console.log('Done!');
  }
});  

module.exports = {
loaders: [
  {
   test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   loader : 'file-loader'
  }
]
}

4. Once you build, webfonts-generator plugin will create a folder named "custom-fonts" and generates css, eot, ttf, html pages etc..
5. By importing generated css file you can use the custom fonts

Something.html

<i class="custom custom-search"></i>

O/P

Reference:

Generator of webfonts from svg icons

Automated webfont generation from SVG icons.