如何从SVG图标

Question

有没有人知道如何从SVG图标生成webfont。我在我的项目中使用webpack，angular2和typescript。

有人能告诉我如何实现这个目标吗？我没有通过互联网获得任何东西。 请帮帮我!!

code here doesn't have too many information

我想为svg图标生成webfont。 提前致谢

Answer 1

我通过 webfonts-generator 插件

实现了这一目标

<强>步骤1：

1. 添加＆＃34; webfonts-generator＆＃34;：＆＃34; ^ 0.3.5＆＃34; package.json中的依赖
2. 在src下创建一个文件夹图标并将所有svg文件放在那里
3. 将以下代码添加到 webpack.common.js 文件

<强> 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'
  }
]
}

1. 构建完成后，webfonts-generator插件将创建一个名为＆＃34; custom-fonts＆＃34;的文件夹。并生成css，eot，ttf，html页面等。
2. 通过导入生成的css文件，您可以使用自定义字体

<强> Something.html

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

<强> O / P

<强>参考：

Generator of webfonts from svg icons

Automated webfont generation from SVG icons.

Answer 2

https://github.com/FontCustom/fontcustom是一个用于从SVG输入文件生成webfont的简洁工具。

当与Vagrant（或者也许是Docker，但到目前为止我还没有尝试过Docker）结合使用时，您可以构建一个漂亮的，完全自动化的图标生成工作流程。