esbuild-svgr-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    esbuild-svgr-plugin

    Another esbuild plugin that uses SVGR to transform SVGs into React components.

    Other implementations lacked support for falling back to the default SVG loader whenever SVGR is inadequate. This version only transforms imports on files that are known to support React components, keeping itself configurable if needed.

    Install

    npm:

    npm i -D esbuild-svgr-plugin

    yarn:

    yarn add -D esbuild-svgr-plugin

    Usage

    import esbuild from 'esbuild'
    import { svgrPlugin } from 'esbuild-svgr-plugin'
    
    esbuild.build({
        entryPoints: ['src/app.tsx'],
        bundle: true,
        outdir: 'dist/',
        plugins: [svgrPlugin()],
    })

    SVG imports found by esbuild-svgr-plugin are transformed to React components.

    // app.tsx
    
    import ReactDOM from 'react-dom'
    import AppIcon from './icons/app-icon.svg'
    
    import './app.css'
    
    ReactDOM.render(<AppIcon />, null)

    esbuild-svgr-plugin parses the content of ./icons/app-icon.svg and wraps it in a React component. The output can be visualized as follows:

    function AppIcon {
        return (
            <svg>
                {/** ... */}
            </svg>
        )
    }
    
    export default AppIcon

    By default, esbuild-svgr-plugin only transforms on a set of filetypes (.js, .ts, .tjx, .tsx). Doing it for others can lead to unexpected file loader errors. For instance, if there's an url-import in the .css file imported by app.tsx, the React component output is meaningless for this import type, thus breaking it.

    /* app.css */
    
    .app::before {
        background-image: url('./images/illustration.svg');
        /* ... */
    }

    As .css imports are not parsed by esbuild-svgr-plugin, they fallback to the rest of the esbuild plugin chain loaders, or if there's none, to the default file loader.

    Configuration

    esbuild.build({
        entryPoints: ['src/app.tsx'],
        bundle: true,
        outdir: 'dist/',
        plugins: [
            svgrPlugin({
                /**
                 * A regular expression that indicates which assets
                 * should be converted to a React component
                 */
                filter: /\.(svg|xml)$/,
                /**
                 * A regular expression that controls on which
                 * files the imports should be transformed
                 */
                issuer: /\.js/,
            }),
        ],
    })

    Install

    npm i esbuild-svgr-plugin

    DownloadsWeekly Downloads

    124

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    2.73 MB

    Total Files

    9

    Last publish

    Collaborators

    • pedroalves0