jaredlunde / snowpack-plugin-svgr Goto Github PK

View Code? Open in Web Editor NEW

18.0 4.0 4.0 2.51 MB

Use svgr to transform your SVGs into React components with Snowpack

License: MIT License

JavaScript 14.76% TypeScript 85.24%

snowpack snowpack-plugin svgr snowpack-svgr

snowpack-plugin-svgr's Introduction

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 People

Contributors

Stargazers

Watchers

Forkers

constgen nexure aguilera51284 henrik-knudsen

snowpack-plugin-svgr's Issues

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:

setup a snowpack project using the above configuration
import an SVG with the view-box attribute set
open the browser and inspect element
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 !

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.

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:

Install snowpack and follow the instructions of this repository.
import Logo from 'assets/logo.svg';
Try to style a svg with styled components
const StyledLogo = styled(Logo)({ display: 'block', margin: '0 auto', position: 'relative', width: 56, height: 56 });
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

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'

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.

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.