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

A React component that uses SVGInjector to dynamically add SVG to the DOM.

table of contents

• react-svg
• table of contents
• installation
• example
• api
• tests
• releasing
• roadmap
• license

installation

$ npm install react-svg --save

There are also UMD builds available in the dist directory. If you use these, make sure you have already included React as a dependency.

example

import React from 'react';
import ReactDOM from 'react-dom';

import ReactSVG from '../src/index.js';

ReactDOM.render(
  <ReactSVG
    path={'atomic.svg'}
    className={'example'}
    callback={(svg) => console.log(svg)}
  />,
  document.querySelector('.Root')
);

To run the above example:

$ npm start

Then open a browser at localhost:8080.

api

Props

• path - Path to the SVG.
• className - Optional Class name to be added to the SVG.
• evalScripts - Optional Run any script blocks found in the SVG (always, once, or never). Defaults to never.
• fallbackPath - Optional Path to the fallback PNG.
• callback - Optional Function to call after the SVG is injected. Receives the newly injected SVG DOM element as a parameter. Defaults to null.

Example

<ReactSVG
  path={'atomic.svg'}
  className={'example'}
  evalScript={'always'}
  fallbackPath={'atomic.png'}
  callback={(svg) => console.log(svg)}
/>

Refer to the SVGInjector configuration docs for more information.

tests

$ npm test

releasing

The release script for this module uses npm-version under the hood, so you should pass a semver string or release type as an argument.

For example, to publish a patch release:

$ npm run release -- patch

roadmap

react-svg does not currently support being rendered in Node. This is because SVGInjector uses XMLHttpRequest, something that Node does not have locally. It would be nice to rewrite SVGInjector 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

MIT

Changelog

v1.1.2 (2016-04-30)

Full Changelog