Open PaulSearcy opened 3 years ago
@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.
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 1.1.12
and it does work.
Two things I noticed.
var parsedSvgAst = (0, _parser.parse)(escapeSvgSource, {
sourceType: 'module',
plugins: ['jsx']
});
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
}
]
}
}
]
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.
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.
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 - 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
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.js
Here 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.