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 in the 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 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 the spending some time on the searching I came to the idea that there should be the smarter way to do this.

3) Obtain separate icons from the font that was used for the icons itself (it was actually 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 actually 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 the 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 were 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:

I am a pretty newbie with the *.svg, but from the articles that I have read (check one of them 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 good 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 just need to apply to your <svg>:

And if you want to mirror horizontally apply:

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:

See the Pen Bold icon from the TinyMCE editor font by Olena Sovyn (@Kiwka) on CodePen.

 

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 have 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 this icons.
Olena Sovyn
Front-end developer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learn something new

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: