react-svg-sprites v1.0.3
react-svg-sprites
react-svg-sprites is an extension to generate SVG sprites and provide an icon component in React applications.
Installation
To install the package, run the following command:
npm install react-svg-sprites
Configuration
Make sure you have a configuration file sprites.config.json in your root directory with the following format:
{
"iconsFolders": ["public/icons/flat", "public/icons/cms"],
"outputDir": "public/sprites"
}
Sprite generation
To generate SVG sprites, you can run the following command in your terminal:
npx react-svg-sprites
This will look in the folders specified in your configuration file and generate the sprites in the specified output directory.
Result files
Usage
To use the SpriteIcon
component, you must first configure it with the paths to your SVG files. Here is an example of how to use it:
import React from 'react';
import { SpriteIcon } from 'react-svg-sprites';
const App = () => {
return (
<div>
<h1>SpriteIcon Example</h1>
<SpriteIcon
className="text-primary"
src="/flat/timer.svg"
width="25px"
height="25px"
/>
</div>
);
};
export default App;
This will print something like the following:
<svg class="text-primary" width="25px" height="25px">
<use href="/sprites/flat/flat-sprite.svg#timer"></use>
</svg>
Properties
- className (string, required): Class of the component.
- src (string, required): Relative path to the SVG file to be used as icon.
- width (number, required): Width of the icon.
- height (number, required): Height of the icon.
- spritePath (string, optional): Base path of the generated sprites. Default is /sprites.
Contributions
If you want to contribute to this project, feel free to send a pull request or open an issue in the repository.