ljharb
commented
3 years ago Open PaulSearcy opened 3 years ago
ljharb
commented
3 years ago 
PaulSearcy
commented
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.
ljharb
commented
3 years ago 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?
PaulSearcy
commented
3 years ago 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']
});
sveg-pl
commented
3 years ago 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
}
]
}
}
]
lukasoppermann
commented
3 years ago 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.
sveg-pl
commented
3 years ago 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
commented
3 years ago 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.
sveg-pl
commented
3 years ago @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
lukasoppermann
commented
3 years ago Nice that works. Thank you very much
s-taylor
commented
3 years ago @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.