React SVG Sprite Component
A basic react component that will create an svg
sprite based on an svg
array
.
installation
npm install react-svg-sprite --save
How to Use
This component only requires an array
of your given symbols with name
, and svg
string.
Minimum Example
Component { return <SvgSprite symbols= name: 'cloud' svg: '<svg></svg>' name: 'rain' svg: '<svg></svg>' /> ; }
To then use your svg
icons anywhere on your page you'll want to use the following markup.
You can use an npm
package like react-svg-use to help speed up development, and decrease maintainability.
Example Output
Given your component looks like this...
Component { return <SvgSprite className="weather-icons" symbols= className: 'weather-icon' name: 'cloud' svg: '<svg viewBox="0 0 32 32">...</svg>' className: 'weather-icon' name: 'rain' svg: '<svg viewBox="0 0 32 32">...</svg>' /> ; }
Your output would look something like this...
... ...