Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-inlinesvg

Package Overview
Dependencies
Maintainers
2
Versions
78
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-inlinesvg

An SVG loader for React

  • 0.3.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
262K
decreased by-16.49%
Maintainers
2
Weekly downloads
 
Created

What is react-inlinesvg?

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.

What are react-inlinesvg's main functionalities?

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;

Other packages similar to react-inlinesvg

Keywords

FAQs

Package last updated on 04 Mar 2015

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc