wmr-svg-loader: WIP

A port of preact-svg-loader to wmr. Load svg files as preact components.

Install

npm i --save-dev wmr-svg-loader

or

yarn add --dev wmr-svg-loader

Usage

Add the plugin to your wmr.config.mjs.

import { defineConfig } from 'wmr';
import svgLoaderPlugin from 'wmr-svg-loader';

export default defineConfig({
  plugins: [svgLoaderPlugin()],
});

In your code, use the prefix svg: to import the svg as a component.

import Logo from 'svg:./logo.svg';

() => <Logo />

The prefix is customizable.

plugins: [svgLoaderPlugin({ importPrefix: 'myprefix:' })],

You can also use in combination with lazy to enable code spliting, generating a js file to each svg.

import { lazy, ErrorBoundary } from 'preact-iso';

const Logo = lazy(() => import('svg:./logo.svg'));

() => (
    <ErrorBoundary>
        <Logo />
    <ErrorBoundary/>
);