Recientemente actualicé a Webpack 5 y mi cargador html ya no carga archivos svg ni los inserta.
Aquí está mi regla svg en webpack
{ test: /\.svg$/, use: [ { loader: 'html-loader', options: { minimize: true, }, }, ], },No importa cómo intente importarlo, parece que solo crea un archivo y no me da una cadena de HTML.
import mySvg from "../path/to/my.svg" let mySvg = require("../path/to/my.svg").default; // output = "/build/path/my.svg" // output I want = "<svg>...."Solía no darme varios archivos de compilación, sino que los alineaba en mi JS.
La ayuda sería apreciada.
svg-inline-loader puede lograr lo mismo (confirmado para funcionar).
He enumerado otras opciones para cargar archivos SVG en https://survivejs.com/webpack/loading/images/#loading-svgs .
Uso el complemento posthtml y posthtml-inline-svg .
const postHtml = require('posthtml'); const postHtmlInlineSvg = require('posthtml-inline-svg'); { test: /\.html$/, use: { loader: 'html-loader', options: { esModule: false, preprocessor: async (content, loaderContext) => { try { return await postHtml(postHtmlInlineSvg({ cwd: loaderContext.context, tag: 'icon', attr: 'src' }),).process(content)).html; } catch (error) { loaderContext.emitError(error); return content; } }, }, }, },