How to convert icons from fonts to separate svg files

Recently I have moved out rich text editor from the TinyMCE to the Draft.js. I wanted to make this transfer as less noticeable as possible for our end-users in terms of the UI. One of the interesting points was to create buttons in the editor toolbar similar to the ones that were in the TinyMCE editor. Icons that are used on the button in the TinyMCE editor are done using the specific TinyMCE font that is part of the TinyMCE package. I will go through some ideas on how this can be done.

1) Use the same font in the newly created rich editor. I wasn’t very fancy about this idea, as the font weights a lot, and bring it to the project only for showing three icons doesn’t make a lot of sense from my perspective.

2) Find free icons for the buttons that are similar to the ones used in the TinyMCE. After spending some time on the searching, I came to the idea that there should be a smarter way to do this.

3) Obtain separate icons from the font that was used for the icons itself (it was the way I have used and was happy with it). I was trying to look up the online resources that give an ability to obtain the separate signs from the whole font file. But it was not so easy, and I did not find any program that was easy to use for this purpose (if you know any, please, write about it in the comments).

Then I remembered that for the iOS font is shipped in the *.svg format, so then I thought even with my smallest knowledge of the *.svg I can make some magic and to obtain the separate icon (check TinyMCE font in the *.svg format here – https://cdn.tinymce.com/4/skins/lightgray/fonts/tinymce.svg). Also, I have found not a lot but quite a few articles from the people, that we’re trying to achieve the same thing as me (for example, http://helpfulsheep.com/2015-03-25-converting-svg-fonts-to-svg/, http://taoofmac.com/space/blog/2013/08/22/2200). Let’s now check how for example the separate glyph path will look like in that font file:
<glyph xmlns="http://www.w3.org/2000/svg" unicode="" glyph-name="bold" d="M707.88 475.348c37.498 44.542 60.12 102.008 60.12 164.652 0 141.16-114.842 256-256 256h-320v-896h384c141.158 0 256 114.842 256 256 0 92.956-49.798 174.496-124.12 219.348zM384 768h101.5c55.968 0 101.5-57.42 101.5-128s-45.532-128-101.5-128h-101.5v256zM543 128h-159v256h159c58.45 0 106-57.42 106-128s-47.55-128-106-128z"/>
I am a pretty newbie with the *.svg, but from the articles that I have read (check one of the above), I figure out that I can freely to change the glyph in the notation to the path. But it is not enough, I should also need to wrap the resulting code with the <svg> tag and scale it properly using the different attributes in the <svg> tag like width, height, and viewBox (check this article in the CSS-Tricks to know more about the scaling in the *.svg):

See the Pen Glyph after changing to the path by Olena Sovyn (@Kiwka) on CodePen.

You can notice that the sign is not exactly as we have expected. In the fonts, all the glyphs are shipped in the reverted vertical state (haven’t found any article that contains useful technical info why it is done this way – if you know any – leave the link in the comment, please). In the *.svg, it is possible to apply similar attributes to CSS one. With the scale transformation, it is possible not only to scale something but also to mirror it if to apply negative values for x or y arguments in the scale.

For example, if you want to mirror vertically something you need to apply to your <svg>:
transform=scale(1, -1);
And if you want to mirror horizontally apply:
transform=scale(-1, 1);
Keep in mind then, even when you use the scaling only for the mirroring, you should change the viewBox on you <svg> also after that, so your icon will be viewable.

In my case, after playing a little bit with the scale, and viewBox, I have obtained the icon that was similar to the one, that is used in the TinyMCE editor:

Other thoughts:

• before doing the thing with the font that I described it is good to check the license agreement that is shipped with that font to know does it allow anyone to do such things
• actually, I was quite happy that I have chosen to have the icons in the *.svg format. It not only easily solve the problem with proper maintaining icons for the retina screen (so it is needed to have the separate set of icons for the retina screens and separate icons for the not retina screens), but also as the SVG are valid react components it was pretty easy to make them part of my rich editor component. Especially, I had felt all the benefits of it when I moved the rich editor from the separate project to the react storybook (that we are using as the UI components library between all the projects that we have). It was quite easy to do, I do not need to worry about how properly to import these icons.