jaredlunde / snowpack-plugin-svgr

Use svgr to transform your SVGs into React components with Snowpack

---

snowpack-plugin-svgr

Use svgr to transform your SVGs into React components with Snowpack

npm i -D snowpack-plugin-svgr

---

Quick start

// snowpack.config.json
{
  "plugins": [["snowpack-plugin-svgr", { /* see "Plugin Options" below */ }]]
}

Plugin Options

interface SnowpackPluginSvgrOptions {
  /**
   * Includes only the  specified paths
   */
  include?: string[]
  /**
   * Excludes the specified paths
   */
  exclude?: string[]
  /**
   * These options are passed directly to babel.transformAsync()
   */
  babelOptions?: TransformOptions
  /**
   * These options are passed directly to `@svgr/core`'s `convert()` function
   * See: https://react-svgr.com/docs/options/
   */
  svgrOptions?: any
}

Usage

import CatIcon from './assets/icons/cat.svg'

// Use like you would an `<svg>` component
<CatIcon />

Adding types to a TypeScript app

In types/static.d.ts

// Replace this
declare module '*.svg' {
  const ref: string
  export default ref
}

// With this
declare module '*.svg' {
  const ref: React.RefForwardingComponent<
    SVGSVGElement,
    React.SVGAttributes<SVGSVGElement>
  >
  export default ref
}

LICENSE

MIT

snowpack-plugin-svgr's Issues

React.RefForwardingComponent deprecated

Describe the bug
The custom type suggested:

declare module '*.svg' {
  const ref: React.RefForwardingComponent<
    SVGSVGElement,
    React.SVGAttributes<SVGSVGElement>
  >
  export default ref
}

Uses the deprecated property RefForwardingComponent.

Expected behavior
I'm not sure what the proper replacement/migration is.

Is it possible to use with url-loader?

SVGR can be configured so the .svg can be used both as a React Component and as a URL. This is the rollup config: https://react-svgr.com/docs/rollup/#using-with-url-plugin

It would be nice to have some help/instructions on how to get this working with Snowpack.

The end result would be that it could be used like this:

import starUrl, { ReactComponent as Star } from './star.svg'

The tag name provided is not a valid name

Describe the bug
I'm trying to style a svg with styled components but are running into issues.

To Reproduce
Steps to reproduce the behavior:

1. Install snowpack and follow the instructions of this repository.
2. import Logo from 'assets/logo.svg';
3. Try to style a svg with styled components
   const StyledLogo = styled(Logo)({ display: 'block', margin: '0 auto', position: 'relative', width: 56, height: 56 });
4. See error

Expected behavior
To be able to use it as a react component like you do in create-react-app.
import { ReactComponent as Logo } from './logo.svg';

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 86

Question: works in dev mode?

Really neat plugin! Trying it out and I see it works perfectly when I build the project for production (snowpack build) but in the dev mode (snowpack dev), it doesn't seem to work.
I'd get a 404 not found when the app is looking for the generated react component file for an svg.

for example,

import Logo from './logo.svg';

 <Logo />

In dev mode, I get the following error:
http://localhost:8080/_dist_/logo.js net::ERR_ABORTED 404 (Not Found)

Is this as expected as of now?

Looking into this, it seems the plugin needs to generate a proxy response for dev mode.
possibly related: FredKSchott/snowpack#542 (comment)
but I'm not entirely sure how to suggest a solution right now. need to checkout the snowpack plugin interface some more.
thought I'd pose the question in case this is in the works.

SVGs ignored by plugin will not be handled by snowpack default assets plugin

Consider we have flowing projext:

|-dir1
|--foo.svg
|-dir2
|--bar.svg

and we have this configration of snowpack:

// snowpack.config.json
{
  "plugins": [
    "snowpack-plugin-svgr",
    {"include": ["dir1/**/*.svg"]}
}

now in application code:

import FooIcon from 'dir1/foo.svg';
import bar from 'dir2/bar.svg';

bar is expected to be the url of dir2/bar.svg
but we get a 404 error because bar.svg.proxy.js was not generated.

https://github.com/jaredLunde/snowpack-plugin-svgr/blob/master/src/index.ts#L41
here return null will cause snowpack ignore the svg file.

svgrOptions do not seem to apply

Describe the bug

when using the following configuration:

module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  installOptions: {
    polyfillNode: true,
    sourceMap: true,
  },
  devOptions: {
    port: 1234,
  },
  plugins: [
    [
      '@snowpack/plugin-build-script',
      { cmd: 'postcss', input: ['.css'], output: ['.css'] },
    ],
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-babel',
    [
      'snowpack-plugin-svgr',
      {
        svgrOptions: {
          svgoConfig: {
            plugins: {
              removeViewBox: false,
            },
          },
        },
      },
    ],
  ],
};

It is expected that the following SVG file imported through the plugin would preserve the view-box attribute of the SVG.

<svg
  fill="none"
  view-box="0 0 20 20"
  stroke="currentColor"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
  />
</svg>

But it does not:

I'm filing the issue on this project as it it top-of-the-tree in this setup.

To Reproduce
Steps to reproduce the behavior:

1. setup a snowpack project using the above configuration
2. import an SVG with the view-box attribute set
3. open the browser and inspect element
4. See that the attribute is not set

Desktop (please complete the following information):

• OS: OSX
• Browser [chrome, safari]

Thanks in advance for any help you can provide !