Make a collection of SVG files into something like FontAwesome's JS?

Question

I'm not sure if there's already a question like this and possible duplicate of this but I'd like to know how to make a collection of SVG files into something exactly like FontAwesome's JS?

I wish to use all the icons from this pack, and make them available to be called and used in HTML like FontAwesome's JS for example <i class="icon-leaf"></i>, <i class="icon-sun"></i>, or <i class="icon-rainbow"></i>. I've seen some online tools like https://icomoon.io/app/ or http://fontello.com/ but that's not exactly what I want to do. I don't need the css, or webfonts (eot, woff, etc). I just want to include the .js just like the FontAwesome's js above.

It's not the complete answer, but maybe [this](https://stackoverflow.com/questions/48994506/how-to-create-custom-font-awesome-5-svg-definition) can point you in the right direction. — ccprog, May 14 '18 at 14:30
@ccprog Thank you for the reference, however, I did not make it clear that I dont want to extend the FA but I'd like something similiar to how FA works because I'll be using a collection of icon pack from flaticon without any other icon libraries (not even the basic FA icons). — Rangka Kacang, May 15 '18 at 04:40
Possible duplicate: [Add custom icons to font awesome](https://stackoverflow.com/questions/11426172/add-custom-icons-to-font-awesome) — Gert Arnold, Sep 15 '20 at 19:45

score 6 · Answer 1 · answered May 14 '18 at 20:48

You can create custom icons with your own SVG data. Here's a demo GitHub repo that you can play with. And here's a CodePen that shows how something similar might be done in <script> blocks.

In either case, it simply involves using library.add() to add an object like this:

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

Note that the element labelled by the comment "svg path data" in the code sample is what will be assigned as the value of the d attribute on a <path> element that is a child of the <svg>. Like this (leaving out some details for clarity):

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

SVG is capable of lots more possible combinations of elements with their various attributes. So I don't know that you'd be able to use this method to convert any SVG into a form that could be loaded as a custom icon. But if you can reduce what you want to just this path data, then it will work just as in the linked examples.

Hi, it looks like you're a FA developer. I think your answer is great but it seems like this solution is extending the FontAwesome's script. I'm looking into making something purely like FA but limited to a certain icon packs from flaticons only (without any extra icons from other libraries). But thank you I might need this code in the future to make custom FA icons... — Rangka Kacang, May 15 '18 at 04:39

Andrew Bone · Accepted Answer · 2018-05-14T15:08:38.120

I would probably use the SVG <use> tag which allows you to declare your SVG elsewhere in the HTML and then call it at any point.

It will look a little like this <svg height="1em" viewBox="0 0 385.278 385.278"><use xlink:href="#umbrella"></use></svg>

Here is the documentation: LINK

Here is an example using that:

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>

If you want it to be more like awesome-font you can use some javascript that puts in the <use> tags for you.

This method looks for specific classes and then appends some HTML to them.

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>

Thank you. I'm accepting this as an answer. However, how do I separate the "definition" file? I mean I don't want to declare all of the SVGs into a single html, there will be a lot of custom icons and I might need to redeclare it in other html files. I'd like it to have its own javascript files to call from ` — Rangka Kacang, May 15 '18 at 04:33
You can store your SVGs in an external file, here is some documentation of how [LINK](https://css-tricks.com/svg-use-external-source/) — Andrew Bone, May 15 '18 at 07:47

Make a collection of SVG files into something like FontAwesome's JS?

2 Answers2

Linked