Inqnuam/esbuild-svg

An esbuild plugin to transform your svg files to jsx components.

Description

An esbuild plugin to transform your svg files to jsx components.
Works flawlessly with esbuild publicPath config within stylesheet and javascript files.

Installation

yarn add -D esbuild-svg
# or
npm install -D esbuild-svg

Usage

const esbuild = require("esbuild");
const svgPlugin = require("esbuild-svg");

esbuild
  .build({
    entryPoints: ["input.js"],
    outdir: "public",
    bundle: true,
    plugins: [svgPlugin()],
  })
  .then((result) => console.log(result))
  .catch(() => process.exit(1));

The plugin takes one argument which can be any SVGR config.
Default SVGR config's plugins are @svgr/plugin-svgo and @svgr/plugin-jsx.

const svgrConfig = { exportType: "named" }

// usual esbuild config
{
 ...
 plugins: [svgPlugin(svgrConfig)],
 ...
}

Then simply import your svg inside your file.

// with { exportType: "named" }
import { ReactComponent as DummyIcon } from "../pic/dummy.svg";

// with { exportType: "default" }
import DummyIcon from "../pic/dummy.svg";

If you only need publicPath of your svg then simply add ? suffix to import path.

import dummyIconUrl from "../pic/dummy.svg?";

console.log(dummyIconUrl);
// http://localhost:3000/dummy-BWTJZSSF.svg

Importing both publicPath and svg as component

import { ReactComponent as DummyIcon } from "../pic/dummy.svg";
import dummyIconUrl from "../pic/dummy.svg?";

const MyComponent = () => {
  return (
    <div>
      <span>url: {dummyIconUrl}</span>
      <DummyIcon />
    </div>
  );
};

Adding types to your (react) project.

declare module "*.svg?" {
  const publicPath: string;
  export default publicPath;
}

// with { exportType: "default" }
declare module "*.svg" {
  import { ReactElement, SVGProps } from "react";
  const content: (props: SVGProps<SVGElement>) => ReactElement;
  export default content;
}

// with { exportType: "named" }
declare module "*.svg" {
  import { ReactElement, SVGProps } from "react";
  const ReactComponent: (props: SVGProps<SVGElement>) => ReactElement;
  export { ReactComponent };
}

// with { exportType: "named", namedExport: "Svg" }
declare module "*.svg" {
  import { ReactElement, SVGProps } from "react";
  const Svg: (props: SVGProps<SVGElement>) => ReactElement;
  export { Svg };
}