npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

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.

About

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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@andylacko/vite-svg-react-loader

v3.0.16

Published

Vite plugin to transform SVGs into React components by default using svgr.

Downloads

321

Readme

THIS PLUGIN IS DEPRECATED

found plugin working with default component imports https://github.com/pd4d10/vite-plugin-svgr

Vite plugin to import SVG files directly as ReactComponent

Installation

npm

$ npm i --save-dev @andylacko/vite-svg-react-loader

yarn

$ yarn add -D @andylacko/vite-svg-react-loader

Usage

Add svgLoader() (or whatever you decide to name your default import) to the list of plugins in the ViteJS configuration file (vite.config.js) of your project.

import svgLoader from '@andylacko/vite-svg-react-loader'

export default defineConfig({
  //...
  plugins: [svgLoader()],
})

Once you have done that, you can import any of your SVG asset as a React component:

// The default behavior of ViteJS will get you the URL of the asset
import SVGAsset from 'assets/yourMama.svg'

// That you can use normally
function SomeComponent() {
  return (
    <button>
      <SVGAsset /> Click Me!
    </button>
  )
}

Typescript

If you are using this plugin in a Typescript project, adding the type definitions to your tsconfig.json will assign correct types to the imported SVG assets:

{
  "compilerOptions": {
    "types": ["@andylacko/vite-svg-react-loader/svgType"]
  }
}

Configuration

query

If you want to import only some components as React components, and import other ones as standard string resource path, you can use the query option:

export default defineConfig({
  //...
  query: 'as-react-component',
})

In your jsx/tsx file:

import MyReactSvg from './my_svg.svg?as-react-component'
import MySvg from './my_svg'
…

<MyReactSvg /> // This one is treated as a react component
<img src={MySvg} /> // This one is imported as a resource path

keepEmittedAssets

By default, the plugin will prevent transformed SVG assets to be emitted when building the production bundle (when using Vite 2.5.0 or later). If you want or need to have those files emitted anyway, pass the {keepEmittedAssets: true} option:

export default defineConfig({
  //...
  plugins: [svgr({keepEmittedAssets: true})],
})

svgrOptions

Allows to pass global svgr configuration flags. See svgr configuration documentation for more details.

export default defineConfig({
  //...
  plugins: [
    svgr({
      svgrOptions: {
        icon: true,
        dimensions: false,
        // etc...
      },
    }),
  ],
})

// for quick overview
interface SVGROptions {
  icon?: boolean
  dimensions?: boolean
  expandProps?: 'start' | 'end' | false
  svgo?: boolean
  ref?: boolean
  memo?: boolean
  replaceAttrValues?: Record<string, string>
  svgProps?: Record<string, string>
  titleProp?: boolean
}

Acknowledgement

This plugin started as a fork of @honkhonk/vite-plugin-svgr, but it can import svg into react component directly.

License

MIT