SVG Everywhere

There are two primary options for icon systems: scalable vector graphics (SVG) and icon fonts. When considering the best solution, a developer has to determine which is most performant, with the highest quality, at the lowest cost of development. Having compared these options at Split, we believe SVG icons are the best choice.

Benefits to using SVG icons

SVG is an image format for vector graphics that provides some key advantages, including:

• Icons can be resized up and down without losing quality, are extra sharp on retina displays, and have a small file size.
• You have all the same CSS control as a font and more, because you can control individual parts of a multi-part icon and use SVG-specific CSS, like stroke and fill properties (and many other SVG properties for styling).
• Positioning SVG icons is similar to positioning a div element, unlike font icons that are inserted via pseudo element. How you position depends on the line-height, vertical-align, and word-spacing. Due to how font is designed, there will occasionally be empty space around it.

Methods to Implementing svg

1. As an HTML image tag

If we have the SVG in a file, we can use it with an <img> tag:

<img src="./icon.svg" alt="Icon example" />

2. As a background image

SVGs can also be applied as a CSS background-image:

.icon {
  background-image: url(./icon.svg);
  width: 10px;
  height: 10px;
}

3. As an inline SVG element

As the SVG information is like any html element, you can drop that code directly into an HTML document and the SVG image will show up the same as if in an img.

This technique has advantages over using the <img> tag or css background-image, where you can’t modify your SVG. With inline SVG, the image is downloaded in the same document and doesn’t need to make an additional HTTP request, i.e. you can control the styles of your SVG element!

There are other ways to handle SVG in React; using SVG as an <object> and as data URIs, although those techniques will not be covered in this article.

Browser Support

These previously explained techniques work almost everywhere, with the exception of IE8. If you want to ensure support for svg in every browser, this post outlines the many options you have.

• Browser support for css background-image
• Browser support for <img>
• Browser support for inline SVG

Optimizing SVG

Any design software used to create an svg icon will also create unnecessary data, like doctypes and generators notes. You can reduce the file and remove this extra information by using the app svgomg to save some bytes.

Implementing SVG in React

So now you have your SVG file, and like every element in react we need to create a component that will keep all the SVG data together. This step is simple enough, just use your SVG icon everywhere as appropriate, and use the inline SVG type so that you can add or modify styles going forward.

When adding many and/or large tables of icons, we can use a technique called sprites. Here, we must only put the svg data in one time (using the inline implementation), then using the <use> tag with the xlink:href, we reference the svg icons without repasting into the html every time.

NOTE: When using sprites, you won’t be able to edit any css styles of the icons, and if you change any attribute of the icon, this change will propagate for all icons.

Implementing svg icons with React is simple and lightweight:

1. Get your svg
2. Optimize it
3. Make it a component

In the above example the default React component is used for clarity, but be sure to also consider a stateless component that wraps your icon if more appropriate.

In summary, SVG is the clear winner when evaluating between icon systems. Using inline SVG within a React component provides tons of flexibility and an easy and clean implementation.

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Deliver Features That Matter, Faster. And Exhale.

Split is a feature management platform that attributes insightful data to everything you release. Whether your team is looking to test in production, perform gradual rollouts, or experiment with new features–Split ensures your efforts are safe, visible, and highly impactful. What a Release. Get going with a free account, schedule a demo to learn more, or contact us for more information.