Specifying SVGO option breaks JSX transform #103
Comments
|
#101 was merged 3 days ago, so the readme now describes the new plugin settings format svgo requires. |
|
@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. Is the current readme wrong? The babel config is in |
|
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? |
|
I tried it with Two things I noticed.
|
|
Hi @PaulSearcy, an update of the |
|
I think I am running into the same issue but don't understand the fix. I am trying this: However importing the files in my next app I get:
Removing it to: Makes it work. However I need the groups in the svg. |
Hi @lukasoppermann, can you please share |
|
Sure @sveg-pl
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 - I solved your issue removing: |
|
Nice that works. Thank you very much |
|
@sveg-pl thanks so much for this, I wasted the best part of a day trying to figure out why this wouldn't work. |
Per title if I specify the SVGO option
It breaks on line 78 in
src/index.jsHere is the SVG, before transform. Which is transformed successfully having no options set for the plugin, not using SVGO, but strips the viewBox attribute which is needed.
For now as a workaround I'm using SVGR with the SVGO option, to keep viewBox attribute, as a loader for svgs in our application's webpack configuration which works fine. While using this babel plugin for the mocha tests that use enzyme and load svgs. (That just test for the existence, not the visuals, of the svg)
I would like to go down to one library and one configuration for transforming svgs uniformly across the codebase, but ran into this issue.
The text was updated successfully, but these errors were encountered: