Two SVG-ish things you might notice from the above example. See the Pen SVG Icon in React by Sarah Drasner ( on CodePen.Īnd we can use it again and again, but unlike the older way, we don’t have an additional HTTP request. which makes this reusable component for other views Tl dr: You don’t need in ReactĪfter Michael patiently listened to me explain how we use and had me show him an example icon system, his solution was simple: it’s not really necessary.Ĭonsider this: the only reason we were defining icons to then reuse them (usually as s in ) was so that we didn’t have to repeat ourselves and could just update the SVG paths in one spot. But if you’re rewriting your views and updating them with React, it’s worth revisiting an opportunity here. It might not be worth the time in that instance. If you’re like me and updating an enormous codebase, where in order to move over from an icon font to SVG you’d have to update literally hundreds of instances of markup, I get it. Not everyone would want to do this, but it sure is nice to have the option. SVGs offer a navigable DOM to animate parts of an icon, or colorize sections. You can’t animate pieces of them without hacky stacking. They’re an image that you’re positioning with font styles. Be it CORS problems or Opera mini, it’s a headache. Most developers I know have run into scenarios with missing glyph X in a box, there are a lot of ways that icon fonts can fail where SVGs do not. Icon fonts fail a good amount of the time.SVGs are more crisp in general, drawing is what they’re built for. You can avoid this by doing some fancy font-smoothing in CSS, but here’s one caveat I’ve noticed: it’s difficult to override without turning font-smoothing off entirely. Icon fonts aren’t as crisp on some displays.Think: blind people, dyslexic people, the elderly (You will be elderly too someday, hopefully, so if you’re not the kind of dev to care about this subset, do it for the karma! But seriously, care for the elderly.) SVG has the ability to add title and ARIA tags, which provide a huge boon to accessibility, particularly in cases when the icon is alone and a single source of informative navigation. Icon fonts are hard to make accessible. Here are some of the more compelling reasons, in my mind: Plus there are a ton of people writing and speaking about this right now We have our own comparison on that subject. Some of you at this point might be wondering why we would use an SVG icon system rather than an icon font to begin with. See the Pen bc5441283414ae5085f3c19e2fd3f7f2 by Sarah Drasner ( on CodePen. Here’s a small example if you’d like to see what the markup looks like: Joni Trythall has a great article about use and SVG icons, and Chris Coyier wrote another awesome article here on CSS-Tricks as well. Using allows us to keep the path data and basic appearance of our icons defined in one place so that they could be updated once and change everywhere, while still giving us the benefit of updating them on the fly. You could, but then every icon would be an individual request and you wouldn’t have access change parts of the SVG, such as the fill color. You may wonder why one wouldn’t just use an SVG as an tag. The element clones a copy of any other SVG shape element with the ID you reference in the xlink:href attribute, and still manipulate it without reiterating all of the path data. What is ?įor those not familiar how SVG icon systems are typically built, it works a little like this. We’ll show you another, cleaner way here. Note: It’s worth saying that use support was recently improved, but I’ve noticed it’s spotty at best and there are other routing and XML issues. We’ll go over this technique so that you can get started writing scalable SVG Icon Systems in React, as well as some tricks I’d propose could work nicely, too. I asked Michael if he thought better support might be coming for some of these features, but he showed me a much better way of working with it, circumventing this method entirely. One of the major gaps for me was the element, as most SVG icon systems are built with. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. I was really excited to attend, partially because I had so many questions about SVG and React. I recently went to Michael Jackson and Ryan Florence’s ReactJS Training.
0 Comments
Leave a Reply. |