npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.


Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2020 – Pkg Stats / Ryan Hefner




An SVG loader for React









NPM version build status Maintainability Test Coverage

Load inline, local or remote SVGs in your React components.


  • 🏖 Easy to use: Just set the src
  • 🛠 Flexible: Personalize the options to fit your needs
  • ⚡️ Smart: Async requests will be cached.
  • 🚀 SSR: Render a loader until the DOM is available
  • 🟦 Typescript: Nicely typed


npm i react-inlinesvg

And import it into your code:

import React from 'react';
import SVG from 'react-inlinesvg';

const Icon = () => <SVG src={require('/path/to/myfile.svg')} />;


src {string} - required.
The SVG file you want to load. It can be a require, URL or a string (base64 or url encoded). If you are using create-react-app and your file resides in the public directory you can use the path directly without require.

baseURL {string}
An URL to prefix each ID in case you are using the <base> tag and uniquifyIDs.

cacheRequests {boolean} ▶︎ true
Cache remote SVGs.

description {string}
A description for your SVG. It will override an existing <desc> tag.

innerRef {React.Ref|function}
Get the SVG HTMLElement.

loader {node}
A component to be shown while the SVG is loading.
If you set

onError {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument with:

  • a FetchError with:
  message: string;
  type: string;
  errno: string;
  code: string;
  • or an InlineSVGError, which has the following properties:
    name: 'InlineSVGError',
    data?: object,
    message: string

onLoad {function}.
A callback to be invoked upon successful load.
This will receive 2 arguments: the src prop and a hasCache boolean

preProcessor {function} ▶︎ string
A function to process the contents of the SVG text before parsing.

title {string}
A title for your SVG. It will override an existing <title> tag.

uniqueHash {string} ▶︎ a random 8 characters string [A-Za-z0-9]
A string to use with uniquifyIDs.

uniquifyIDs {boolean} ▶︎ false
Create unique IDs for each icon.

Additional props will be spread over the SVG element.


  description="The React logo"
  onError={error => console.log(error.message)}
  onLoad={(src, hasCache) => console.log(src, hasCache)}
  preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}

Browser Support

Any browsers that support inlining SVGs and fetch will work.

If you need to support legacy browsers you'll need to include a polyfiil for fetch and Number.isNaN in your app. Take a look at react-app-polyfill or


If loading SVGs from another domain, you'll need to make sure it allows CORS.

Why you need this package?

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:

  1. Embed the CSS in the SVG document
    • Can't use your CSS preprocessors (LESS, SASS)
    • Can't target parent elements (button hover, etc.)
    • Makes maintenance difficult
  2. Link to a CSS file in your SVG document
    • Sharing styles with your HTML means duplicating paths across your project, making maintenance a pain
    • Not sharing styles with your HTML means extra HTTP requests (and likely duplicating paths between different SVGs)
    • Still can't target parent elements
    • Your SVG becomes coupled to your external stylesheet, complicating reuse.
  3. Embed the SVG in your HTML
    • Bloats your HTML
    • SVGs can't be cached by browsers between pages.
    • A maintenance nightmare

But there's an alternative that sidesteps these issues: load the SVG with a GET request and then embed it in the document. This is 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.


Thanks to @matthewwithanm for creating this component and so kindly transfer it to me. I'll definitely keep the good work! ❤️