Hi, I have a little problem with Jest tests runner.

My simple component:

import React from 'react';

import {ReactComponent as CloseIcon} from '../images/close.svg';

const CloseBubble = ({minimize}) => (
    <div className='thulium-chat-bubble'>
        <a onClick={event => {
            event.preventDefault();
            minimize()
        }} href=''>
            <CloseIcon/>
        </a>
    </div>
);

export default CloseBubble;

test class:

import CloseBubble from '../CloseBubble';

describe('CloseBubble', () => {
    test('sample', () => {
        expect(1).toBe(1);
    });
});

And after I run this test I got following error:

  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>cancel_icon</title><path class="cls-1" d="M52.08,50,70.32,31.84a1.49,1.49,0,0,0-2.11-2.11L50,47.87,31.82,29.63a1.8,1.8,0,0,0-2.22,0,1.82,1.82,0,0,0,0,2.21L47.85,50.09,29.6,68.23a1.47,1.47,0,0,0,0,2.12,1.74,1.74,0,0,0,2.22,0L50.06,52.1,68.31,70.35a1.73,1.73,0,0,0,2.21,0,1.46,1.46,0,0,0,0-2.12Z"/></svg>
                                                                                             ^
    
    SyntaxError: Unexpected token <

       9 |             minimize()
      10 |         }} href=''>
    > 11 |             <CloseIcon/>
      12 |         </a>
      13 |     </div>
      14 | );
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/CloseBubble.js:11:14)

What I've do wrong?

Hi! I am using two kinds of imports in my application, like: import starUrl from './star.svg' and import { ReactComponent as Star } from './star.svg' This works well if using file-loader. But in webpack 5 the file-loader, raw-loader, raw-loader is deprecated. Now we need to use asset-modules (https://webpack.js.org/guides/asset-modules/). I tried to use all kinds, but nothing worked for me.

Judging from the readme, you can only enable/disable svgo and some of its plugin, but I wanted to use some other svgo plugins.

Does the svgo parameter in node work also as a config object? It's not clear in the readme.

The svgo plugins I wanted to use are removeStyleElement, convertColors: { currentColor: true }, or the inlineStyles plugin.

Thanks for the great library! I have created an SVG transformer for React Native.

It's currently using react-native-svg-loader to transform SVG images to a format that React Native can understand.

I am currently trying to switch to use SVGR instead, because the output is cleaner, the code of the library is easier to understand and the project is maintained.

This is my the setup that I'm using:

"@svgr/core": "^4.0.3",
"@svgr/webpack": "^4.0.0",
"react-native-svg": "^8.0.8",

const svgr = require("@svgr/core").default;
svgr(src, { native: true })

🐛 Bug Report

1) Bug when rendering this file: ember.svg

When I switch to use svgr to render the images inside the transformer file, React Native throws an error during the transform:

SyntaxError: /Users/kristerkari/Git/SVGDemo/logos/ember.svg: 
Namespace tags are not supported by default. 
React's JSX doesn't support namespace tags. 
You can turn on the 'throwIfNamespace' flag to bypass this warning.

This happens because of the xmlns:svg="http://www.w3.org/2000/svg" attribute on the ember.svg image. If I remove that attribute, then the error is not thrown. The svg->svgr transform should probably take of that.

2) Bug when rendering this file: ember.svg

The ember.svg image is using <use xlink:href="#D_3_" overflow="visible" /> which throws an error during runtime:

TypeError: undefined is not an object (evaluating 'href.match')

This error is located at:
    in Use (at ember.svg:4)
    in RNSVGClipPath (at ClipPath.js:11)
    in ClipPath (at ember.svg:4)
    in RNSVGGroup (at G.js:23)
    in G (at ember.svg:4)
    in RNSVGGroup (at G.js:23)
    in G (at Svg.js:109)
    in RNSVGSvgView (at Svg.js:90)
    in Svg (at ember.svg:4)
    in SvgComponent (at App.js:37)
    in RCTScrollContentView (at ScrollView.js:852)
    in RCTScrollView (at ScrollView.js:977)
    in ScrollView (at App.js:29)
    in RCTSafeAreaView (at SafeAreaView.ios.js:35)
    in SafeAreaView (at App.js:28)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

If change the element to be <use href="#D_1_" overflow="visible" />, the image will render.

Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

3) Inconsistent rendering when width and height props are omitted between @svgr/core + React Native and @svgr/webpack.

Actual:

When I have this code <RubyMine width={256} height={256} style={styles.logo} /> the image renders the same way in the browser (using @svgr/webpack) and in React Native with @svgr/core.

However, if I remove the width and height props, then it still displays the same way in browser but is not rendered at all in React Native.

Expected:

The SVG image should render in React Native without width and height props on the React element, and using the width and height of the image.

Link to repl or repo (highly encouraged)

App that I use for testing: https://github.com/kristerkari/react-native-svg-example Images that I want to render: https://github.com/kristerkari/react-native-svg-example/tree/master/logos

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
 - Memory: 675.03 MB / 16.00 GB
 - Shell: 2.7.1 - /usr/local/bin/fish
## Binaries:
 - Node: 8.11.4 - /usr/local/bin/node
 - Yarn: 1.12.1 - /usr/local/bin/yarn
 - npm: 6.4.0 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @svgr/core: ^4.0.3 => 4.0.3 
 - @svgr/webpack: ^4.0.0 => 4.0.0 

@neoziro

💬 Questions and Help

How can I create a typescript template that uses a wrapper element?

This is what I'm trying:

module.exports = {
  template({ template }, opts, { imports, componentName, props, jsx, exports }) {
    const typeScriptTpl = template.smart({ plugins: ['typescript'] });
    return typeScriptTpl.ast`
    import * as React from 'react';

    import { IconWrapper } from './IconWrapper';
    import { workers } from 'cluster';

    export const Icon = (props: React.SVGProps<SVGSVGElement>) => ${jsx};

    const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => (
      <IconWrapper>
        <Icon {...props} />
      </IconWrapper>
    );

    export default ${componentName};
  `;
  },
};

But I'm failing misserably, getting a ton of Unexpected token, expected "</>", I'm honestly not sure how the ast workers.

Bonus question: How can I modify componentName? It's prepending SVG and I want to remove it. Thanks everyone!

Heya, I'm trying to bundle some .svg, but get an error during build with rollup. Other plugins I'm using are rollup-plugin-typescript2 and rollup-plugin-postcss. Using rollup v0.58.2. The build works until I add svgr. Is this plugin incompatible with TypeScript?

[!] (rpt2 plugin) Error: Unknown object type "asyncfunction"
src/index.ts
Error: Unknown object type "asyncfunction"
    at Object._object (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:218:17)
    at Object._function (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:319:14)
    at Object.dispatch (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:246:18
    at Array.forEach (<anonymous>)
    at Object._object (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:242:21)
    at Object.dispatch (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:260:23
    at Array.forEach (<anonymous>)
    at Object._array (/Users/.../node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:259:20)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rm -rf dist && rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.../.npm/_logs/2018-06-19T22_15_44_193Z-debug.log

🐛 Bug Report

Last release v6.0.0 provoked the following issue : TypeError: this.getOptions is not a function

Which is referring to the following call:

https://github.com/gregberge/svgr/blob/81369db030cf9498c4438a9273816f3dd5a673f6/packages/webpack/src/index.ts#L58-L71

To Reproduce

Steps to reproduce the behavior:

• Compile any React 17 web project

Expected behavior

The compilation process fails and throws an exception :

Failed to compile. TypeError: this.getOptions is not a function

This unexpected behavior appeared right after upgrading to v6.0.0, it is most likely related to an incompatibility issue with the 3.0.0+ version of loader-utils which brought the following breaking change :

removed getOptions in favor loaderContext.getOptions (loaderContext is this inside loader function), 
note - special query parameters like ?something=true is not supported anymore, 
if you need this please do it on loader side, but we strongly recommend avoid it, as alternative you can use ?something=1 and handle 1 as true

I created React app by using npx create-react-app i then run npm run eject to add @svgr/webpack follow the docs i changed webpack.config.js file to

{
   test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
     use: [{
         loader: '@svgr/webpack',
           options: {
              limit: imageInlineSizeLimit,
              name: 'static/media/[name].[hash:8].[ext]',
             }
          },
     {
          loader: 'url-loader'
     }]
},

NotFoundPage component

import React from 'react';
import { ReactComponent as NotFound } from '../assets/images/404.svg';
/** @jsx jsx */ import { jsx, css } from '@emotion/core';

export default function PageNotFound() {
    return <div css={{
          width: '100vw',
          height: '100vh',
          overflow: 'auto',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
     }}>
         <NotFound/>;
    </div>
}

It was working perfectly at the time. Day after I back run the project again and the error is shown in the command

./src/assets/images/404.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/images/404.svg) TypeError: Cannot read property 'tagName' of null

Have anyone had encountered this problem? and how to fix it? Thanks in advance!

Hey there,

I wonder if there's a way to preserve the comments that are being stripped out of my template (I think by Babel, but not entirely sure).

I use flow, and the // flow comment at the beginning of the file is mandatory to have flow validations in the file.

Thanks a bunch!

Context:

https://npm.anvaka.com/#/view/2d/rehype https://packagephobia.now.sh/result?p=rehype https://packagephobia.now.sh/result?p=svg-parser https://npm.anvaka.com/#/view/2d/svg-parser

Did not notice any changes in speed. Though startup time is probably better.

🐛 Bug Report

parcel is the new official name of the package, as the readme shows: https://github.com/parcel-bundler/parcel

⚠️  Parser "@svgr/parcel-plugin-svgr/lib/asset.js" failed to initialize when processing asset "node_modules/@primer/octicons/build/svg/reply.svg". Threw the following error:
Error: Cannot find module 'parcel-bundler'
Require stack:
- ./refined-github/node_modules/@svgr/parcel-plugin-svgr/lib/asset.js
- ./refined-github/node_modules/parcel/src/Parser.js
- ./refined-github/node_modules/parcel/src/Pipeline.js
- ./refined-github/node_modules/parcel/src/worker.js
- ./refined-github/node_modules/@parcel/workers/src/child.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (./refined-github/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (./refined-github/node_modules/@svgr/parcel-plugin-svgr/lib/asset.js:3:22)
    at Module._compile (./refined-github/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19) falling back to RawAsset

To Reproduce

npm i parcel @svgr/parcel-plugin-svgr
parcel build

Try on any repo. Remove parcel-bundler and install parcel

🚀 Feature Proposal

To enhance SVG accessibility and improve screen reader support, I want to add the attribute aria-labelledby (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) to the custom generated SVG's.

I also want to add role="img" to identify the svg element as a graphic (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg).

Motivation

I want to add this attribute to improve the user experience for screen-reader users and in general accessibility. Currently, there is no way(as far as I know) for our custom-generated svg's through svgr to be generated with aria-labelledby and their respective title atrribute.

Example

It would be nice to have something like this:

<svg role="img" aria-labelledby="lock-title">
   <title id="lock-title">Content Locked</title>
   <path ...
</svg>

For multiple svg's of the same type on the page, there would have to be different id names to avoid duplicate id's. Related to this issue on id prefix/suffix: https://github.com/gregberge/svgr/issues/731

Pitch

Why does this feature belong in the SVGR ecosystem?

SVG's are increasingly being used to describe functionality such as play buttons, menu icons, home buttons, etc. Without labels or descriptions, screen-reader users are left to guess functionality based on context. We owe it to our users to give the best user experience we can deliver. Accessibility can keep users engaged more and deliver more traffic( win-win in my eyes 👀 ).

Plus, we wouldn't want anyone getting any lawsuits from accessibility concerns.

I can create a PR to make this change. I just need some guidance on where/how to start. Thank you!! ❤️

Summary

This plugin allows users to pass a prefix / suffix prop for id's. This enables you to have multiple and identical svg's without issue. A related issue can be found here: https://github.com/gregberge/svgr/issues/731

Test plan

I have written unit tests for this plugin. No other testing was done since the changes are only scoped to this new plugin

What's next

I am not aware of how this repo is set up so I'll need help finishing off the integration + writing docs.

Remove deprecated library since native sort is now the recommended by MDN

Summary

Fixes the following warning:

warning @svgr/webpack > @svgr/plugin-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

Fix

• #765

Test plan

npm install
npm run build
npm run test

All tests have passed and snapshots were also updated.

@types/svgo is deprecated: https://www.npmjs.com/package/@types/svgo

While it's still being used as typing source : https://github.com/gregberge/svgr/blob/main/packages/core/package.json#L48

It's better to upgrade the svgo typing

💥 Regression Report

The upgrade of @babel/generator to v7.20.5 ignores new lines from the template

Related Babel issue (closed as "won't fix"): https://github.com/babel/babel/issues/15064

The babel generator caused this issue. But, it will affect users of SVGR that are sensitive to the output format (ie. tests that compare SVGR output or lint checks). In theory, it shouldn't affect the runtime behavior.

Last working version

Worked up to version: 6.3.1 (==> it worked when @babel/generator resolves to pre-7.20, but you can reproduce this issue in 6.3.1 and a newer babel version that matches the semver in @svgr/core)

Stopped working in version: 6.5.1

Forcing NPM to use @babel/generator 7.18.3 works.

To Reproduce

Use a test file (like the one from the playground):

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 5</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">
            <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
                <g id="Content" transform="translate(0.000000, 64.000000)">
                    <g id="Group" transform="translate(24.000000, 56.000000)">
                        <g id="Group-2">
                            <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Then run @svgr/cli with the default options:

npx @svgr/cli test.svg

Output:

import * as React from "react";
const SvgTest = (props) => (
  <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </svg>
);
export default SvgTest;

The output ignores the new lines in the defaultTemplate: https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts

Expected behavior

The output should preserve the new lines of the template:

import * as React from "react";

const SvgTest = (props) => (
  <svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </svg>
);

export default SvgTest;

Hello! With webpack I can use imports for svg as https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project How I can use query params for import with rollup for svg imports?