I worked with Maxime on this one an what we ended up doing is the following:
Extend the default Webpack configuration as explained here: https://github.com/mendix/pluggable-widgets-tools
Then we used the first approach described here: https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack. That means adding the https://github.com/bhovhannes/svg-url-loader as a loader for SVG images
const merge = require("webpack-merge");
const baseConfig = require("@mendix/pluggable-widgets-tools/configs/webpack.config.dev.js"); //Can also be webpack.config.prod.js
const customConfig = {
};
const previewConfig = {
// Custom configuration goes here
// Custom configuration goes here
devtool: "source-map",
mode: 'development',
module: {
rules: [
{
test: /\.svg$/,
loader: "svg-url-loader"
},
],
},
};
module.exports = [merge(baseConfig[0], customConfig), merge(baseConfig[1], previewConfig)];
and then we can just use the SVG images like this:
import rectangle from 'images/rectangle.svg';
const App = () => <img src={rectangle} alt="" />;
If I understand the widget tools correctly, the Typescript is transpiled to a single Javascript file. This means that any of the SVG files will not end up in the final result. You can check this by looking in your dist/tmp folder.
One way to do this I guess is to include the SVG with require (and let webpack read the SVG as a base64 string) and set the src in that way.