DEV Community

simprl
simprl

Posted on • Updated on

Streamline SVG Sprites in Your React Applications

Hello, wonderful devs! If you frequently work with SVG icons in your React projects and find the process of managing and referencing them a bit cumbersome, today's your lucky day. I present to you the react-svg-sprite-generator!

What is react-svg-sprite-generator?

The react-svg-sprite-generator is a CLI tool designed for React.js developers. It helps generate SVG sprites from a directory filled with SVG files, automatically preparing them for use within React applications. The real magic, though? The generated names.js file, which not only contains the constants for your SVG icons but also inline Base64 encoded previews!

autocomplete

Why Use It?

  1. Ease of Use: With a simple command, transform your directory of SVG icons into an organized sprite with accompanying JS and markdown documentation.
  2. IDE Support: In IDEs like VSCode and Webstorm, benefit from autocompletion with actual image previews. It boosts your development speed, especially when selecting icons.
  3. No Memorization: Say goodbye to remembering exact SVG paths or names. With autocompletion and inline previews, pick the right icon every time.

Getting Started

Installation



npm i --save-dev react-svg-sprite-generator


Enter fullscreen mode Exit fullscreen mode

Generate SVG sprite

Simply run:



svgsprite


Enter fullscreen mode Exit fullscreen mode

Or specify source and destination:



svgsprite --src ./path/to/your/svg/directory --dest ./path/for/generated/files

Enter fullscreen mode Exit fullscreen mode




Structure

After the command runs, your icons are now structured in a neat manner, with accompanying JS and markdown documentation.

For instance, with two icons icon1.svg and icon2.svg, you get:



src
└── components
└── Icon
├── sprite.svg
├── names.js
└── Readme.md

Enter fullscreen mode Exit fullscreen mode




Usage in React




import * as IconNames from './names.js';
import spriteUrl from './sprite.svg';

interface IconProps {
name: (typeof IconNames)[keyof typeof IconNames];
}

const Icon = ({ name }: IconProps ) => {
return (
<svg>
<use href={</span><span class="p">${</span><span class="nx">spriteUrl</span><span class="p">}</span><span class="s2">#</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">} />
</svg>
);
};
export default Icon;

Enter fullscreen mode Exit fullscreen mode


import * as IconNames from './names.js';
import Icon from './Icon.js';

<Icon name={IconNames.ICON1} />

Enter fullscreen mode Exit fullscreen mode




Wrapping Up

The react-svg-sprite-generator is here to revamp how you deal with SVG icons in React. Try it out and let's make icon management in React a breeze!

If you find the library useful, consider giving it a star ⭐ on GitHub. Feedback, PRs, and issues are always welcome!

Top comments (5)

Collapse
 
kurtextrem profile image
Jacob "kurtextrem" Groß

This is really nice!

Collapse
 
saikiranmarripati profile image
saikiranmarripati

xlinkHref is not working or depricated

Collapse
 
simprl profile image
simprl • Edited

Thank you for pointing out the issue with xlinkHref in the code snippet from my article.
xlinkHref attribute is indeed deprecated in favor of href in SVG 2.

I have updated the example in the article to reflect the correct usage:

<svg>
    <use href={`${spriteUrl}#${name}`} />
</svg>
Enter fullscreen mode Exit fullscreen mode

Thank you again for your valuable feedback!

Collapse
 
madhan_s_75443f5c2ccf613c profile image
Madhan S

Hi Team
This does not working any idea how to run it

Collapse
 
simprl profile image
simprl

Hi Madhan! Thanks for your comment. To demonstrate how this works in practice, I've recorded a short video youtu.be/vAYOcxCrKUw. I hope it clarifies everything. You can check it out here. If you have any more questions or suggestions, feel free to share!