search

boopathi / react-svg-loader

A loader for webpack, rollup, babel that loads svg as a React Component
MIT License
638 stars 86 forks source link

SVG with multi value style property fail #323

Open SilviaRebelo-Which opened 3 years ago

SilviaRebelo-Which commented 3 years ago

Hello 👋🏽

The following error is being triggered when a SVG has multiple values in a single property. In my case I have a SVG file which has two values for the transform property in the style:

Simplified code of SVG for demonstration:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 6 9">
   <g style="transform: translateX(6px) rotate(90deg);"> // <<<<--- Transform with two values
      <path fill="#ffffff" fill-rule="evenodd" d="..."/>
   </g>
</svg>

Error in console:

ERROR in ./assets/icons/icon-chevron-double.svg
Module build failed (from ../node_modules/react-svg-loader/lib/loader.js):
TypeError: Cannot read property '0' of undefined
    at multiplyTransformMatrices (/Users/***/Sites/later-life-care-calculator/node_modules/svgo/plugins/_transforms.js:302:10)
    at Array.reduce (<anonymous>)

If I remove one of the properties, the SVG compiles successfully. Not sure this is a bug or I'm missing some configuration option but couldn't find anything.