angularjs - 我如何 "pull-out"只有我实际使用的十几个图标？

Question

我有一个使用 grunt 构建的 angular 项目，它使用了来自 font-awesome 的十几个图标。目前，我正在包括并分发整个 font-awesome 库。有没有办法“拉出”我实际使用的图标(最好是作为构建过程的一部分)？

我看过 icomoon 应用程序，这似乎给了我想要的结果，但它是一个手动过程，可以在图标使用情况发生变化时进行更新。

Answer 1

第一次使用 Font-Awesome-SVG-PNG为每个 Font Awesome 图标获取单独的 SVG 文件。

font-awesome-svg-png --color black --sizes 128 --no-png

然后使用 grunt-webfont , 将您选择的图标(来自上一步中生成的 SVG)组合到自定义 webfont 中。

例如，如果您只想包含具有 的图标 Angular - 您的 webfont 中的关键字，那么 grunt 任务就像 -

webfont: {
    icons: {
        src: 'black/svg/angle-*.svg',
        dest: 'build/fonts'
    }
}