Copy as SVG

[grimen]

Would be neat to be able to copy an icon as SVG.

[grimen]

Relevant: Client-side string compression library that could be used for fast compression of icon SVG markup, and fast uncompression on copy: https://github.com/pieroxy/lz-string

[thomaspark]

This should be doable. All of the font libraries have SVG. The main hurdle I see is material-design-icons, where files are organized into different category folders. Might be tricky to find the relevant SVG file to grab the markup.

It didn't cross my mind that copying SVG would be useful. Curious what your use case is for it?

[grimen]

@thomaspark Yes. Well I in a few occasions prefer SVG, especially when hacking around - but specific use cases are multi-color and animated icons. I also recently posted about GlyphSearch in a active developer forum and the biggest critique against Webfonts - and implicitly the lack of support in GlyphSearch - was that many prefer SVG for various reasons in modern browsers nowadays. There seem to be a ~50/50 opinion on this one.

A few articles on the topic:

• http://www.sitepoint.com/icon-fonts-vs-svg-debate
• http://blog.cloudfour.com/seriously-dont-use-icon-fonts
• http://benfrain.com/seriously-use-icon-fonts
• http://mir.aculo.us/2014/10/31/icon-fonts-vs-inline-svg
• etc

I am interested in looking into adding the support, but wanted to anchor it first.

[grimen]

@thomaspark Did a first pass of a little JS script that when needed load and convert SVG Font-Face/Glyphs to SVG Paths, and ability to lookup icon by unicode value:

As you mention material-design-icons is a special case (which I will be looking into more), but for the ~40-50 icon font sets i listed that's the only project that have this problem I think it would be a great feature, especially as it is mostly a plugin - only need to add the copy-button for SVG that calls the svg-path-by-unicode method.

Will try to figure out address material-design-icons-issue before I create a pull request.

[grimen]

I tried ttf2svg (https://github.com/qdsang/ttf2svg) for material-design-icons and it worked perfectly fine. I suggest adding it to postinstall build step of bower.json (a best practice in these cases for bower and npm).

Picture or it didn't happen:

Sidenote: In fact I would suggest moving away from bower in favor of npm as that is the trend I see happening lately, everything is ending up in both places but the vision of npm is more grand.

[grimen]

Repository for SVG conversion example/sandbox: https://github.com/grimen/svg-fontglyphs2svg

[grimen]

For the record:

Issue: https://github.com/google/material-design-icons/issues/149 Pull Request: https://github.com/google/material-design-icons/pull/282

Should be merged soon so material-design-icons will have an SVG font bundled soon.