react-svg

What is react-svg?

The react-svg npm package is a React component that allows you to easily include and manipulate SVG files in your React applications. It provides a simple way to load SVG files and apply various transformations and customizations to them.

What are react-svg's main functionalities?

Basic SVG Loading

This feature allows you to load an SVG file into your React component. The 'src' prop specifies the path to the SVG file.

<ReactSVG src="/path/to/your.svg" />

Customizing SVG with Props

This feature allows you to customize the SVG before it is injected into the DOM. The 'beforeInjection' prop is a function that receives the SVG element and allows you to manipulate it.

<ReactSVG src="/path/to/your.svg" beforeInjection={(svg) => { svg.classList.add('svg-class'); svg.setAttribute('style', 'width: 200px'); }} />

Using SVG as a Component

This feature allows you to use the SVG as a React component, making it easy to include and manage within your React application.

import { ReactSVG } from 'react-svg';

const MyComponent = () => (
  <ReactSVG src="/path/to/your.svg" />
);

Handling SVG Load Events

This feature allows you to handle events when the SVG is loaded. The 'onLoad' prop is a function that is called when the SVG has been successfully loaded.

<ReactSVG src="/path/to/your.svg" onLoad={() => console.log('SVG loaded!')} />

Other packages similar to react-svg

react-inlinesvg

react-inlinesvg is a React component that allows you to load and inline SVGs. It provides similar functionality to react-svg but focuses on inlining SVGs directly into the DOM, which can be useful for applying CSS styles directly to the SVG elements.

svgr

SVGR is a tool that transforms SVGs into React components. It allows you to import SVG files as React components, providing a more integrated approach to using SVGs in React applications. Unlike react-svg, SVGR converts SVG files into React components at build time.

react-svg-loader

react-svg-loader is a Webpack loader that allows you to import SVG files as React components. It provides a similar functionality to SVGR but is specifically designed to work with Webpack. This package is useful if you are already using Webpack in your build process.

README

React SVG

react-svg is a react component that uses svg-injector to dynamically add svg to your DOM. This allows you to pass in an svg path ('/path/icon.svg'), and react-svg will fetch the svg object and mutate it into the dom.

Also supports non-svg capable browsers by falling back to images if a fallback path is given.

Install

npm install react-svg

Usage

var SVG = React.createFactory(require('react-svg'));

...

render: function() {
  return SVG({
    path: 'path/to/your/vector.svg',
    // [Required] Local or remote (supports CORS)
    className: 'vectors',
    // [Optional] Binds a class to the svg
    evalScripts: false,
    // [Optional] Evals any javascript in the svg - [always|once|never]
    fallbackPath: 'path/to/your/vector.png',
    // [Optional]
    callback: function(svg) { console.log(svg); }
    // [Optional]
  });
};

Roadmap

Currently, svg-injector does not exist on npm, so we've manually included it in this package. It would be nice to have svg-injector as a npm dependency, hopefully it can be published at some stage.

react-svg does not currently support being rendered in node, this is because svg-injector uses XMLHttpRequest, something that node does not have locally. It would be nice to rewrite svg-injector to use something environment agnostic, like superagent or anything along those lines. This would allow react-svg to be rendered on both client and server.

License

The MIT License (MIT)

Copyright (c) 2014 Atomic

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Changelog

v11.0.0 (2019-12-04)

Full Changelog

:boom: Breaking Change

• #507 Export type definitions (@tanem)

:house: Internal

• #508 Remove master issue approval for major dep updates (@tanem)