Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
react-inlinesvg
Advanced tools
The react-inlinesvg package allows you to easily include and manipulate SVG files directly within your React components. This can be useful for adding icons, illustrations, and other vector graphics to your application without the need for additional HTTP requests.
Basic SVG Inclusion
This feature allows you to include an SVG file directly in your React component by specifying the path to the SVG file.
import React from 'react';
import SVG from 'react-inlinesvg';
const App = () => (
<div>
<SVG src="/path/to/your.svg" />
</div>
);
export default App;
Customizing SVG with Props
You can customize the SVG by passing additional props such as className or using the preProcessor function to modify the SVG code before it is rendered.
import React from 'react';
import SVG from 'react-inlinesvg';
const App = () => (
<div>
<SVG src="/path/to/your.svg" className="custom-class" preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')} />
</div>
);
export default App;
Handling Load and Error Events
This feature allows you to handle load and error events when the SVG is being fetched and rendered, providing better control over the SVG loading process.
import React from 'react';
import SVG from 'react-inlinesvg';
const App = () => (
<div>
<SVG src="/path/to/your.svg" onLoad={() => console.log('SVG loaded!')} onError={(error) => console.error('Error loading SVG:', error)} />
</div>
);
export default App;
The react-svg package is another popular library for including SVGs in React applications. It provides similar functionality to react-inlinesvg, allowing you to load and manipulate SVG files. However, react-svg focuses more on ease of use and simplicity, while react-inlinesvg offers more customization options.
The svg-react-loader package is a Webpack loader that transforms SVG files into React components. This approach allows for more advanced manipulation and optimization of SVGs at build time, but it requires a more complex setup compared to react-inlinesvg.
The react-svg-loader package is similar to svg-react-loader but is specifically designed for use with React. It converts SVG files into React components, allowing for easy inclusion and manipulation of SVGs within your React application. It offers a balance between ease of use and customization.
One of the reasons SVGs are awesome is because you can style them with CSS. Unfortunately, this winds up not being too useful in practice because the style element has to be in the same document. This leaves you with three bad options:
But there's an alternative that sidesteps these issues: load the SVG with an XHR request and then embed it in the document. That's what this component does.
The SVG <use>
element can be used to achieve something similar to
this component. See this article for more information and this
table for browser support and caveats.
var isvg = require('react-inlinesvg');
<isvg src="/path/to/myfile.svg">
Here's some optional content for browsers that don't support XHR or inline
SVGs. You can use other React components here too. Here, I'll show you.
<img src="/path/to/myfile.png" />
</isvg>
Name | Type | Description |
---|---|---|
src | string | The URL of the SVG file you want to load. |
wrapper | function |
A React class or other function that returns a component instance to be
used as the wrapper component. Defaults to React.DOM.span .
|
preloader | function | A React class or other function that returns a component instance to be shown while the SVG is loaded. |
onLoad | function | A callback to be invoked upon successful load. |
onError | function |
A callback to be invoked if loading the SVG fails. This will receive a
single argument: an instance of InlineSVGError , which has
the following properties:
|
Any browsers that support inlining SVGs and XHR will work. The component goes out of its way to handle IE9's weird XHR support so, IE9 and up get your SVG; lesser browsers get the fallback.
If loading SVGs from another domain, you'll need to make sure it allows CORS.
This component places the loaded file into your DOM, so you need to be careful
about XSS attacks. Only load trusted content, and don't use unsanitized user
input to generate the src
!
FAQs
An SVG loader for React
The npm package react-inlinesvg receives a total of 211,308 weekly downloads. As such, react-inlinesvg popularity was classified as popular.
We found that react-inlinesvg demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.