Specifying SVGO option breaks JSX transform about babel-plugin-inline-react-svg

[sveg-pl]

Hi @PaulSearcy, an update of the svgo package dependency inside babel-plugin-inline-react-svg to ^2.x.x did changed the way removeViewBox is set by default. Yet, you'll need to specify the plugin's name for the parser. So to disable an active plugin please try:

[
  "inline-react-svg",
  {
    "svgo": {
      "plugins": [
        {
          "name": "removeViewBox",
          "active": false
        }
      ]
    }
  }
]

[sveg-pl]

@lukasoppermann - I solved your issue removing: <?xml version="1.0" encoding="utf-8"?> from the svg file, so that it only contains vectors inside <svg>...</svg> tags. I've added some empty groups and tested it on your repo - works fine.

[lukasoppermann]

I think I am running into the same issue but don't understand the fix.

I am trying this:

"plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "collapseGroups", 
              "active": false
            }
          ]
        }
      }
    ],

However importing the files in my next app I get:

error
SyntaxError: /Users/lukasoppermann/Repos/veare-next/components/Logo.tsx: Unexpected token (1:1)

Removing it to:

"plugins": [
    [
      "inline-react-svg",
    ]

Makes it work. However I need the groups in the svg.

[PaulSearcy]

I tried it with 1.1.12 and it does work.

Two things I noticed.

1. If any options were passed, either if valid or invalid, the jsx transform is not invoked

      var parsedSvgAst = (0, _parser.parse)(escapeSvgSource, {
        sourceType: 'module',
        plugins: ['jsx']
      });

2. [email protected] keeps viewBox by default while [email protected] doesn't

[ljharb]

#101 was merged 3 days ago, so the readme now describes the new plugin settings format svgo requires.

[PaulSearcy]

@ljharb correct. I just copied and pasted the example in the readme and that does not work.

I tested it before I removed this below and after. Both versions do not work.

            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },

Is the current readme wrong?

The babel config is in package.json if that makes any difference? (In that I made sure how it was setup was following JSON example in the readme.

[ljharb]

That shouldn't make a difference.

The intention is that with svgo 2, the new format should work.

One possibility is that this never worked with our transform; another is that it broke with the v2 release and the svgo v0 to v2 update. Can you try with v1 of this transform and see if it works there?

[sveg-pl]

However importing the files in my next app I get:

error
SyntaxError: /Users/lukasoppermann/Repos/veare-next/components/Logo.tsx: Unexpected token (1:1)

Hi @lukasoppermann, can you please share babel-plugin-inline-react-svg version from package.json and at least couple of lines of Logo.tsx file as "Unexpected token (1:1)" directs us a bit to that direction.

[lukasoppermann]

Sure @sveg-pl

"babel-plugin-inline-react-svg": "^2.0.1"

The important file is the svg, which is imported into the logo.tsx

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 475 116" xml:space="preserve">
<path d="M99.9,2.6L58,113.2H40.6L0.1,2.6h10.1c4.1,0,7.6,2.5,8.8,5.9l31,89.7h0.5L82.3,8.5c1.2-3.4,4.7-5.9,8.8-5.9H99.9z
	 M465.5,61.8h-71.7c0,23.4,13.1,42.3,38.8,42.3c6.3,0,14.4-1.4,21.4-3.4l0.2-0.1c0.8-0.2,1.8-0.4,2.7-0.4c5.1,0,9.2,3.8,9.2,8.5l0,1
	c-10.3,3.9-23.7,6.1-34.7,6.1c-39.6,0-54.3-24.7-54.3-57.9c0-33.8,20.1-57.9,50.4-57.9c33.1,0,47,24.1,47.6,53v0.2
	c0,4.7-4,8.5-9.1,8.5L465.5,61.8z M393.9,50.1h64.3c0-19.3-7.7-38.4-29.7-38.4C406.7,11.7,393.9,31.9,393.9,50.1z M193.6,61.8
	l-0.5,0h-71.7c0,23.4,13.1,42.3,38.8,42.3c6.3,0,14.4-1.4,21.4-3.4l0.2-0.1c0.8-0.2,1.7-0.4,2.7-0.4c5.1,0,9.3,3.8,9.3,8.5l0,1
	c-10.3,3.9-23.7,6.1-34.7,6.1c-39.6,0-54.3-24.7-54.3-57.9c0-33.8,20.1-57.9,50.4-57.9c33.1,0,47,24.1,47.5,53v0.2
	C202.7,57.9,198.7,61.7,193.6,61.8z M121.5,50.1h64.3c0-19.3-7.7-38.4-29.7-38.4C134.3,11.7,121.5,31.9,121.5,50.1z M369.8,14.3
	c-0.4,0-0.8,0-1.2,0c-23.4,0-29.8,24.3-29.8,44.2v54.6h-14.8V27.3c0-12.1,0-16.7-0.9-24.7h5.2l0.4,0c4.8,0,9.2,3.9,9.2,9.2v12.1h0.5
	C343.8,11.5,353.9,0,369.1,0c3.5,0,7.7,0.6,10.3,1.3v4.2l0,0.2c0,4.7-4.1,8.5-9.2,8.5L369.8,14.3z M302.4,113.2h-14.5V95.4h-0.5
	c-6.6,13.2-23.2,20.4-38,20.4c-33.9,0-39.3-21.2-39.3-31.2c0-37.1,42.6-38.8,73.6-38.8h2.5v-5.6c0-18.9-7-28.4-26.9-28.4
	c-7.8,0-15.2,1-22.5,3.4l0,0c-1.1,0.4-2.2,0.6-3.4,0.6c-4.9,0-9-3.6-9.2-8.1h0c9.2-4.1,24.6-7.6,35.1-7.6
	c29.5,0,41.9,12.4,41.9,41.2V90C301.2,98.9,301.2,105.6,302.4,113.2z M286.2,64.2v-6.7h-3.9c-25.5,0-55.9,2.4-55.9,26.7
	c0,14.5,11.1,19.9,24.7,19.9C285.7,104.1,286.2,76.1,286.2,64.2z"/>
</svg>

The logo.tsx is the following:

import SVGWordmark from '@svgs/veare-wordmark.svg'
import Link from 'next/link'
import { css } from '@emotion/css'

const style = css`
  fill: var(--on-background__high-emphasis);
  display: block;
  height: 24px;
  &.is-small {
    height: 16px;
  }
  & svg {
    height: 100%;
  }
`

type LogoProps = {
  homepageLink?: boolean,
  small?: boolean
}

const Logo = ({ homepageLink, small, ...props }: LogoProps) => {
  if (homepageLink) {
    return (
      <Link href='/'>
        <a className={`${style} ${small ? 'is-small' : ''} logo`} href='/' aria-label='Go to homepage' {...props}>
          <SVGWordmark />
        </a>
      </Link>
    )
  }
  return (
    <div className={`${style} ${small ? 'is-small' : ''} logo`}>
      <SVGWordmark />
    </div>
  )
}

export { Logo }

Hope that helps to identify the issue.

[lukasoppermann]

Nice that works. Thank you very much

[s-taylor]

@sveg-pl thanks so much for this, I wasted the best part of a day trying to figure out why this wouldn't work.