How can I include .svg files in build?

[danigalvez]

I have a component that dynamically imports SVGs, so I'll need to be able to include these SVGs within the build. How can I do this?

Here's what I've tried:

• adding --loader=".svg=file" within the build script
• modifying the tsup.config.ts loader block with .svg=file as well
• downloading esbuild-plugin-svgr and adding a corresponding build.js file for esbuild

I've scoured the internet to no avail, everythign leads me to webpack and rollup material. I'd love to stay with tsup, however.

[dalechyn]

CC @egoist

[flavioms]

@danigalvez did you find any solution?

[dalechyn]

@flavioms I would just transform them in SVGR playground and save as react components.

[chanceaclark]

I ended up running into this and figuring it out – turns out the esbuilt-plugin-svgr doesn't actually transform the code into JSX. In order to do so, you can pass in the jsx plugin into the esbuilt plugin config like so:

import { defineConfig } from 'tsup'
import svgr from 'esbuild-plugin-svgr'
import jsx from '@svgr/plugin-jsx';

export default defineConfig({
    esbuildPlugins: [svgr({ svgo: false, plugins: [jsx] })],
});

I figured it out by checking out how the @svgr/rollup plugin handles it (which I don't even know if the svgo option fully works/haven't tested it myself).

[chanceaclark]

It outputs something like this, so if you are a TS user, here is a .d.ts file to support you:

import * as React from "react";
const SvgCheck12 = props => <svg width={12} height={12} viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M11.7071 1.79289C12.0976 2.18342 12.0976 2.81658 11.7071 3.20711L4.70711 10.2071C4.31658 10.5976 3.68342 10.5976 3.29289 10.2071L0.292893 7.20711C-0.0976311 6.81658 -0.0976311 6.18342 0.292893 5.79289C0.683417 5.40237 1.31658 5.40237 1.70711 5.79289L4 8.08579L10.2929 1.79289C10.6834 1.40237 11.3166 1.40237 11.7071 1.79289Z" /></svg>;
export default SvgCheck12;

---

// svgr.d.ts
declare module '*.svg' {
  import { ComponentPropsWithRef } from 'react'

  export default (props: ComponentPropsWithRef<'svg'>) => JSX.Element
}

[danielhep]

Reviving an old thread here, I realize, but I tried this and I'm getting an error from the esbuild plugin:

✘ [ERROR] Expected > (1:97). If this is valid SVG, it's probably a bug in svg-parser. Please raise an issue at https://github.com/Rich-Harris/svg-parser/issues – thanks!


const SvgBusSimpleSolid = props => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}><path d="M224 0C348.8 0 448 35.2 448 80V96 416c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V448H128v32c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32l0-32c-17.7 0-32-14.3-32-32V96 80C0 35.2 99.2 0 224 0zM64 128V256c0 17.7 14.3 32 32 32H352c17.7 0 32-14.3 32-32V128c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32zM80 400a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm288 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" /></svg>;

                                                                                                  ^ [plugin svgr]

It looks like now the jsx plugin is passing jsx into the esbuild plugin, which is again running it through svgr? Not sure what's happening here!

[ayhanap]

This seems to work #570 (comment)