Using this to display SVG's as a base64 string in an image src. (example/question)

[Pixelatex]

So I had some issue figuring out how this was supposed to be used and I managed to make it work but I'm not it's the correct usage.

I'm using this to load images in a component library built with react and storybook.

webpack.config.js

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
},

usage:

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

const convertSvgToBase64ImgString = SVG => `data:image/svg+xml;base64,${Buffer.from(SVG).toString('base64')}`;

const Result = () => (
    <img src={convertSvgToBase64ImgString(Logo)} />
);

I wondered if there was no way to have it return base64 straight from the webpack loader but I couldn't figure it out so I did a base64 encode myself.

This is both to maybe help others with this issue / to check if I could do this in a more efficient way.

[athomann]

You can use url-loader or svg-url-loader to get the string from webpack.