I'd like to create a icon with the viewBox attribute preserved and no width or height properties on the root <svg> (because I set dimensions via CSS):
$ svgr --icon --no-dimensions pencil.svg
Sample input file:
<svg width="32" height="32" viewBox="0 0 32 32"><path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z"></path></svg>
Expected output:
import React from "react";
const Pencil = props => (
<svg viewBox="0 0 32 32" {...props}>
<path d="M27 0a5 5 0 0 1 4 8l-2 2-7-7 2-2c.836-.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7L2 23zm20.362-11.638l-14 14-1.724-1.724 14-14 1.724 1.724z" />
</svg>
);
export default Pencil;
But it seems this option combination gives this unexpected error:
RangeError: Maximum call stack size exceeded
at new NodePath (@svgr/cli/node_modules/h2x-traverse/lib/NodePath.js:30:14)
at Function.get (@svgr/cli/node_modules/h2x-traverse/lib/NodePath.js:20:12)
at TraversalContext.create (@svgr/cli/node_modules/h2x-traverse/lib/TraversalContext.js:48:31)
at Array.from.forEach (@svgr/cli/node_modules/h2x-traverse/lib/TraversalContext.js:34:29)
at Array.forEach (<anonymous>)
at TraversalContext.visitMultiple (@svgr/cli/node_modules/h2x-traverse/lib/TraversalContext.js:32:27)
at TraversalContext.visit (@svgr/cli/node_modules/h2x-traverse/lib/TraversalContext.js:23:55)
at NodePath.requeue (@svgr/cli/node_modules/h2x-traverse/lib/NodePath.js:91:18)
at NodePath.replace (@svgr/cli/node_modules/h2x-traverse/lib/NodePath.js:76:10)
at enter (@svgr/cli/node_modules/@svgr/core/lib/h2x/emSize.js:31:14)
This is using 2.1.1.
I'd like to create a icon with the
viewBoxattribute preserved and nowidthorheightproperties on the root<svg>(because I set dimensions via CSS):$ svgr --icon --no-dimensions pencil.svgSample input file:
Expected output:
But it seems this option combination gives this unexpected error:
This is using
2.1.1.