search

getsentry / sentry

Developer-first error tracking and performance monitoring
https://sentry.io
Other
38.38k stars 4.11k forks source link

Transition from icon font to SVG #2880

Closed ckj closed 6 years ago

ckj commented 8 years ago

In addition to the reasons listed in the following posts, from a maintenance and visibility perspective, we'd benefit from the ease of just being able to drop icons in a folder.

http://blog.cloudfour.com/seriously-dont-use-icon-fonts/ https://speakerdeck.com/ninjanails/death-to-icon-fonts https://github.com/blog/2112-delivering-octicons-with-svg

mitsuhiko commented 8 years ago

I was all for it until I discovered that you need to inline the SVG into the dom tree if you want to color it :(

mitsuhiko commented 8 years ago

Leaving this here. That might be better than what I was trying: https://github.com/kisenka/svg-sprite-loader

Chrissy commented 6 years ago

reviving this because we should do it soon!

To the best of my knowledge, there are two reasonable ways to do this client-side:

  1. Use <use> with an SVG sprite utility like @mitsuhiko mentioned.
  2. Use an svg-to-jsx loader like this one to import SVGs as valid jsx components.

Off the top of the dome it seems like <use> would be the better way to go. I haven't been able to get it working reliably in the past for support reasons, but noticed Mapbox currently uses it on their dashboard, and was able to change the color and size of the icons in both chrome and safari using only css so perhaps things have gotten better.

The only downside to <use> is that we lose the ability to change svgs based on prop types, but as @ckj and I have discussed this is maybe a power we don't want anyways, as it would involve changing the SVGs after rendering them from Sketch.

Chrissy commented 6 years ago

Closing this as I added it and it works great. You can see the nitty gritty here (https://github.com/getsentry/sentry/pull/6764) and here (https://github.com/getsentry/sentry/pull/6843)