esbuild-plugin-svg

Svg files import plugin for esbuild.

Install

npm install esbuild-plugin-svg -D

String

import iconLogo from './logo.svg';

render() {
    return `
        ${iconLogo}
    `;
}

Custom element

import iconLogo from './logo.svg';

render() {
    return `
        <icon-logo></icon-logo>
    `;
} // namespace + filename

Use

esbuild.config.json

import esbuild from 'esbuild';
import svg from 'esbuild-plugin-svg';

esbuild
    .build({
        entryPoints: ['index.js'],
        bundle: true,
        outfile: 'main.js',
        plugins: [svg()]
    })
    .catch(() => process.exit(1));

package.json

{
    "type": "module",
    "scripts": {
        "start": "node esbuild.config.js"
    }
}

Configure

esbuild.config.json

svg({
    customElement: false,
    namespace: 'icon', // namespace custom elements
    minify: false, // with svgo
    minifyOptions: {} // svgo options
});

Includes

SVGO   →   Optimizes svg files.

Check

esbuild-serve   →   Serve with live reload for esbuild.

esbuild-plugin-pipe   →   Pipe esbuild plugins output.

esbuild-plugin-babel   →   Babel plugin for esbuild.

esbuild-plugin-postcss-literal   →   PostCSS tagged template literals plugin for esbuild.