如何从 SVG 图标生成 webfont答案

【问题标题】：how to generate webfont from SVG icons如何从 SVG 图标生成 webfont
【发布时间】：2017-06-24 18:05:24
【问题描述】：

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

有人可以告诉我如何实现这一目标吗？我没有通过互联网得到任何东西。请帮帮我！！

code here doesn't have too many information

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

【问题讨论】：

标签： angular typescript svg webpack webfonts

【解决方案1】：

https://github.com/FontCustom/fontcustom 是一个从 SVG 输入文件生成网络字体的简洁工具。

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

【讨论】：

【解决方案2】：

我通过 webfonts-generator 插件实现了这一点

第一步：

在 package.json 中添加 "webfonts-generator": "^0.3.5" 依赖
在 src 下创建一个文件夹图标并将所有 svg 文件放在那里
将以下代码添加到您的 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'
  }
]
}

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

Something.html

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

O/P

参考：

Generator of webfonts from svg icons

Automated webfont generation from SVG icons.

【讨论】：