制作的SVG文件的集合到像FontAwesome的JS？(Make a collection of

我不知道是否已经存在这样的问题，可能重复这个 ，但我想知道如何让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，或网络字体（EOT，WOFF，等等）。 我只是想包括的.js就像上面的FontAwesome的JS。

Answer 1:

我可能会使用SVG <use>标签，它可以让你在其他地方宣布你的SVG在HTML，然后在任何时候调用它。

它看起来有点像这样<svg height="1em" viewBox="0 0 385.278 385.278"><use xlink:href="#umbrella"></use></svg>

下面是文档： LINK

下面是使用的是一个例子：

 body { font-size: 21px; } 

 It's looking like it might <svg height="1em" viewBox="0 0 385.278 385.278"><use xlink:href="#rain"></use></svg> so don't forget your <svg height="1em" viewBox="0 0 385.278 385.278"><use xlink:href="#umbrella"></use></svg> <!-- This is where the SVGs are declared --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 385.278 385.278" style="enable-background:new 0 0 385.278 385.278;" xml:space="preserve"> <defs> <g id="umbrella"> <path d="M192.599,0c14.359,0.015,25.988,11.667,25.973,26.027c-0.002,1.683-0.167,3.362-0.493,5.013 c-16.892-2.541-34.068-2.541-50.96,0c-2.784-14.087,6.38-27.763,20.467-30.547C189.237,0.167,190.916,0.002,192.599,0L192.599,0z" /> <path d="M177.279,349.72V147.48c0-7.036,5.704-12.74,12.74-12.74s12.74,5.704,12.74,12.74v202.24 c-0.353,5.622,3.919,10.466,9.542,10.818c5.622,0.353,10.466-3.919,10.818-9.542c0.027-0.425,0.027-0.852,0-1.277 c0-7.036,5.704-12.74,12.74-12.74c7.036,0,12.74,5.704,12.74,12.74c0.006,9.442-3.751,18.497-10.44,25.16 c-13.941,13.896-36.507,13.859-50.402-0.082c-6.648-6.67-10.386-15.7-10.398-25.118L177.279,349.72z"/> <path d="M23.439,205.96h-0.32c-4.021,0-7.28-3.259-7.28-7.28c0.012-97.644,79.179-176.79,176.822-176.778 c97.626,0.012,176.765,79.151,176.778,176.778c-0.022,4.012-3.268,7.258-7.28,7.28h-0.32c-4.012-0.022-7.258-3.268-7.28-7.28 c0-27.117-21.983-49.1-49.1-49.1c-27.117,0-49.1,21.983-49.1,49.1c0,4.032-3.268,7.3-7.3,7.3c-4.032,0-7.3-3.268-7.3-7.3 c0.006-27.106-21.964-49.084-49.07-49.09s-49.084,21.964-49.09,49.07c0,0.007,0,0.013,0,0.02c0,4.032-3.268,7.3-7.3,7.3 s-7.3-3.268-7.3-7.3c0-27.117-21.983-49.1-49.1-49.1s-49.1,21.983-49.1,49.1c0,4.021-3.259,7.28-7.28,7.28 C23.492,205.96,23.466,205.96,23.439,205.96z"/> </g> <g id="rain"> <path d="M303.204,111.054c45.365,0,82.14,36.775,82.14,82.14s-36.775,82.14-82.14,82.14l0,0H64.244 C28.765,275.337,0.002,246.578,0,211.099s28.757-64.242,64.236-64.244c0.003,0,0.006,0,0.009,0c1.467,0,2.92,0,4.36,0 c-5.38-54.966,34.818-103.885,89.784-109.265c51.899-5.079,98.988,30.574,108.176,81.905 C277.957,113.874,290.501,110.985,303.204,111.054L303.204,111.054z"/> <path d="M215.524,289.254l20.56,29.36c2.298,3.314,1.474,7.862-1.84,10.16s-7.862,1.474-10.16-1.84l0,0 l-26.4-37.68L215.524,289.254z M166.884,289.254l33.28,47.52c2.298,3.314,1.474,7.862-1.84,10.16s-7.863,1.474-10.16-1.84l0,0 l-39.12-56L166.884,289.254z M118.244,289.254l20.56,29.36c2.298,3.314,1.474,7.862-1.84,10.16s-7.863,1.474-10.16-1.84l0,0 l-26.12-37.68L118.244,289.254z M264.164,289.254l33.28,47.52c2.298,3.314,1.474,7.862-1.84,10.16s-7.862,1.474-10.16-1.84l0,0 l-12.76-18.16l-26.4-37.68H264.164z"/> </g> </defs> </svg> 

如果你希望它是更像真棒的字体，你可以使用一些JavaScript一个能赋予<use>标记为您服务。

这个方法查找特定类，然后附加一些HTML给他们。

 class replaceElement { constructor(ele) { this.element = ele; this.sybol = ele.className.replace("font-change-", ""); this.insertSVG(); } insertSVG() { let svgCont = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); let useCont = document.createElementNS('http://www.w3.org/2000/svg', 'use'); useCont.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${this.sybol}`); svgCont.append(useCont); svgCont.setAttributeNS(null, 'height', '1em'); svgCont.setAttributeNS(null, 'viewBox', '0 0 385.278 385.278'); this.element.append(svgCont); } } let changedFonts = []; for (let element of document.querySelectorAll('i[class^="font-change-"]')) { changedFonts.push(new replaceElement(element)) } 

 body { font-size: 21px; } 

 It's looking like it might <i class="font-change-rain"></i> so don't forget your <i class="font-change-umbrella"></i> <!-- Again just declaring the SVGs --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 385.278 385.278" style="enable-background:new 0 0 385.278 385.278;" xml:space="preserve"> <defs> <g id="umbrella"> <path d="M192.599,0c14.359,0.015,25.988,11.667,25.973,26.027c-0.002,1.683-0.167,3.362-0.493,5.013 c-16.892-2.541-34.068-2.541-50.96,0c-2.784-14.087,6.38-27.763,20.467-30.547C189.237,0.167,190.916,0.002,192.599,0L192.599,0z" /> <path d="M177.279,349.72V147.48c0-7.036,5.704-12.74,12.74-12.74s12.74,5.704,12.74,12.74v202.24 c-0.353,5.622,3.919,10.466,9.542,10.818c5.622,0.353,10.466-3.919,10.818-9.542c0.027-0.425,0.027-0.852,0-1.277 c0-7.036,5.704-12.74,12.74-12.74c7.036,0,12.74,5.704,12.74,12.74c0.006,9.442-3.751,18.497-10.44,25.16 c-13.941,13.896-36.507,13.859-50.402-0.082c-6.648-6.67-10.386-15.7-10.398-25.118L177.279,349.72z"/> <path d="M23.439,205.96h-0.32c-4.021,0-7.28-3.259-7.28-7.28c0.012-97.644,79.179-176.79,176.822-176.778 c97.626,0.012,176.765,79.151,176.778,176.778c-0.022,4.012-3.268,7.258-7.28,7.28h-0.32c-4.012-0.022-7.258-3.268-7.28-7.28 c0-27.117-21.983-49.1-49.1-49.1c-27.117,0-49.1,21.983-49.1,49.1c0,4.032-3.268,7.3-7.3,7.3c-4.032,0-7.3-3.268-7.3-7.3 c0.006-27.106-21.964-49.084-49.07-49.09s-49.084,21.964-49.09,49.07c0,0.007,0,0.013,0,0.02c0,4.032-3.268,7.3-7.3,7.3 s-7.3-3.268-7.3-7.3c0-27.117-21.983-49.1-49.1-49.1s-49.1,21.983-49.1,49.1c0,4.021-3.259,7.28-7.28,7.28 C23.492,205.96,23.466,205.96,23.439,205.96z"/> </g> <g id="rain"> <path d="M303.204,111.054c45.365,0,82.14,36.775,82.14,82.14s-36.775,82.14-82.14,82.14l0,0H64.244 C28.765,275.337,0.002,246.578,0,211.099s28.757-64.242,64.236-64.244c0.003,0,0.006,0,0.009,0c1.467,0,2.92,0,4.36,0 c-5.38-54.966,34.818-103.885,89.784-109.265c51.899-5.079,98.988,30.574,108.176,81.905 C277.957,113.874,290.501,110.985,303.204,111.054L303.204,111.054z"/> <path d="M215.524,289.254l20.56,29.36c2.298,3.314,1.474,7.862-1.84,10.16s-7.862,1.474-10.16-1.84l0,0 l-26.4-37.68L215.524,289.254z M166.884,289.254l33.28,47.52c2.298,3.314,1.474,7.862-1.84,10.16s-7.863,1.474-10.16-1.84l0,0 l-39.12-56L166.884,289.254z M118.244,289.254l20.56,29.36c2.298,3.314,1.474,7.862-1.84,10.16s-7.863,1.474-10.16-1.84l0,0 l-26.12-37.68L118.244,289.254z M264.164,289.254l33.28,47.52c2.298,3.314,1.474,7.862-1.84,10.16s-7.862,1.474-10.16-1.84l0,0 l-12.76-18.16l-26.4-37.68H264.164z"/> </g> </defs> </svg> 

Answer 2:

您可以创建自定义图标用自己的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路径数据”的代码示例中标记的元件是什么将被指定为值d属性的上<path>元件，其的子<svg> 像这样（留出为清楚起见，一些细节）：

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

SVG能够其它更多的与他们的各种属性元素的可能组合的。 所以我不知道，你可以使用此方法的任何 SVG转换成可加载自定义图标的形式。 但是，如果你能减少你只想这个路径的数据，那么它的工作只是在链接的例子是什么。

文章来源: Make a collection of SVG files into something like FontAwesome's JS?