将一组SVG文件集成到FontAwesome的JS中？

Question

我不确定是否已经存在这样的问题并且可能重复这个问题,但我想知道如何将SVG文件集合制作成与FontAwesome的JS完全相同的东西？

我想用所有的图标从这个包,并使其可被称为和HTML一样使用FontAwesome的JS例如<i class="icon-leaf"></i>,<i class="icon-sun"></i>或<i class="icon-rainbow"></i>.我见过一些在线工具,如https://icomoon.io/app/或http://fontello.com/,但这并不是我想要做的.我不需要css或webfonts(eot,woff等).我只想像上面的FontAwesome的js一样包含.js.

Answer 1

您可以使用自己的SVG数据创建自定义图标.这是一个可以玩的演示GitHub仓库.而且这里有一个CodePen,说明如何类似的东西可能在完成<script>块.

在任何一种情况下,它只是涉及使用library.add()添加这样的对象:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

请注意,代码示例中由注释"svg path data"标记的元素将被指定为元素的d属性值,该<path>元素是该子元素的元素<svg>.像这样(为了清楚起见,省略一些细节):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

SVG能够提供更多可能的元素组合及其各种属性.因此,我不知道您可以使用此方法将任何 SVG转换为可以作为自定义图标加载的表单.但是,如果你可以减少你想要的只是这个路径数据,那么它将像链接的例子一样工作.