How to make a font for svg?

Question

css

The site will have a lot of svg icons, I want to make a font out of them and embed them on the site. I use the iconmoon service for this purpose, the problem is that all the icons are of different sizes, somewhere around 15px, somewhere around 35px. Iconmoon makes all the icons the same width, can I somehow make the icons to be the original sizes? or advise some other way how it can be implemented?

Answer 1

First you need to understand what an SVG sprite
is. This is a regular svg document .. with a list of icons and with a style : display:none; which is inserted anywhere in the html document and has a list of the necessary icons, or it’s correct to say path and everything further, as SmthTo said in the html document, we make a soft link and paste it where required.
In order for the icon to be displayed the same everywhere and be the same size, as a rule they are drawn in a large size of 1000px
x 1000px and the exposure is in the center, i.e. the icon itself it looks like this:

<svg width="" height="" viewbox="" style="display:none;">
 <symbol id="ico1" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico2" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico3" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico4" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
</svg>

In html, we refer to any path exactly as stated above, i.e. in this way:

<svg>
  <use xlink:href='#ico1' />
</svg>

If without a bunch of words, then like this: