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 add SVG to the DOM.

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import ReactSVG from 'react-svg'

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

There is a working version of the above in the example dir. First run npm start, then point a browser at localhost:8080.

API

Props

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

Example

<ReactSVG
  path="atomic.svg"
  callback={(svg) => console.log(svg)}
  className="example"
  evalScript="always"
  style={{ width: 200 }}
/>

Refer to the SVGInjector configuration docs for more information.

Install

$ npm install react-svg --save

There are also UMD builds available via unpkg:

• https://unpkg.com/react-svg/dist/ReactSVG.js
• https://unpkg.com/react-svg/dist/ReactSVG.min.js

If you use these, make sure you have already included React, ReactDOM and ReactDOMServer as dependencies.

License

MIT

Changelog

v2.1.13 (2017-01-11)

Full Changelog