pd4d10 / vite-plugin-svgr

Vite plugin to transform SVGs into React components
MIT License
570 stars 55 forks source link

Using with `@svgr/plugin-svgo` fails #49

Open devunt opened 2 years ago

devunt commented 2 years ago

Using with @svgr/plugin-svgo fails with following error.

Using vite-plugin-svgr without @svgr/plugin-svgo works.

/Users/devunt/workspace/ccoli/frontend/src/assets/logo.svg:1:102: ERROR: Expected "}" but found ":"
    at failureErrorWithLog (/Users/devunt/workspace/ccoli/frontend/node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild/lib/main.js:1624:15)
    at /Users/devunt/workspace/ccoli/frontend/node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild/lib/main.js:1413:29
    at /Users/devunt/workspace/ccoli/frontend/node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild/lib/main.js:678:9
    at handleIncomingPacket (/Users/devunt/workspace/ccoli/frontend/node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild/lib/main.js:775:9)
    at Socket.readFromStdout (/Users/devunt/workspace/ccoli/frontend/node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild/lib/main.js:644:7)
    at Socket.emit (/Users/devunt/workspace/ccoli/frontend/lib/events.js:513:28)
    at Socket.emit (/Users/devunt/workspace/ccoli/frontend/lib/domain.js:489:12)
    at addChunk (/Users/devunt/workspace/ccoli/frontend/lib/internal/streams/readable.js:324:12)
    at readableAddChunk (/Users/devunt/workspace/ccoli/frontend/lib/internal/streams/readable.js:297:9)
    at Socket.Readable.push (node:internal/streams/readable:234:10) {stack: 'Error: Transform failed with 1 error:
/Users/….push (node:internal/streams/readable:234:10)', errors: Array(1), warnings: Array(0), frame: '
Expected "}" but found ":"
1  |  <svg xmlns=…                                           ^
', loc: {…}, …}
// vite.config.ts

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    svgr({ svgrOptions: { plugins: ['@svgr/plugin-svgo'] } }),,
}));
// logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.62 156.96">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        fill: currentColor;
      }
    </style>
  </defs>
  <g>
    <path class="cls-2"
      d="M156.62,78.65c0-12.01-8.81-22.1-20.27-24.12,6.68-9.55,5.74-22.49-2.84-31.08-8.27-8.57-21.41-9.52-31.02-2.88-1.89-11.62-12.05-20.58-24.17-20.58s-22.1,8.81-24.12,20.27c-9.55-6.68-22.49-5.74-31.08,2.84-8.71,8.71-9.56,22.19-2.31,31.33C9.08,56.24,0,66.45,0,78.65s8.83,21.91,20.32,24.05c-6.73,9.56-5.81,22.54,2.79,31.15,8.6,8.3,21.58,9.18,31.14,3.19,2.16,11.3,12.16,19.93,24.05,19.93s22.2-9.17,24.15-20.78c9.39,6.86,22.74,5.98,31.39-2.67,8.51-8.51,9.51-21.3,3.03-30.83,11.21-2.23,19.74-12.19,19.74-24.02Z" />
    <g>
      <path class="cls-1"
        d="M61.33,72.59c.2-2.08,2.06-3.61,4.15-3.61h3.12c1.67,0,2.7-1.88,1.75-3.25-2.01-2.91-5.38-4.8-9.2-4.74-6.07,.09-10.84,5.29-10.84,11.36,0,3.72,0,8.56,0,12.27,0,6.06,4.74,11.25,10.79,11.36s11.21-4.85,11.21-11v-3.96c0-2.23-1.81-4.04-4.04-4.04h-2.96c-2.34,0-4.21-2.01-3.98-4.39Z" />
      <path class="cls-1"
        d="M95.33,72.59c.2-2.08,2.06-3.61,4.15-3.61h3.12c1.67,0,2.7-1.88,1.75-3.25-2.01-2.91-5.38-4.8-9.2-4.74-6.07,.09-10.84,5.29-10.84,11.36,0,3.72,0,8.56,0,12.27,0,6.06,4.74,11.25,10.79,11.36s11.21-4.85,11.21-11v-3.96c0-2.23-1.81-4.04-4.04-4.04h-2.96c-2.34,0-4.21-2.01-3.98-4.39Z" />
    </g>
  </g>
</svg>
luxl commented 2 years ago
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx']

also need to add @svgr/plugin-jsx, and don't forget to install the plugin first, yarn add --dev @svgr/plugin-jsx