Estoy usando svgo-loader para optimizar las imágenes svg y estoy usando la configuración predeterminada para esto. Quiero agregar alguna configuración personalizada, como si no quisiera eliminar viewBox de svg , ya que hace que definir las dimensiones de svg sea realmente difícil.
Encontré las siguientes soluciones en Internet... pero ninguna de ellas funciona, y siempre viewBox de svg .
{ loader: 'svgo-loader', options: { plugins: [{ removeViewBox: false }] } } { loader: 'svgo-loader', options: { externalConfig: "svgo-config.yml" } } { loader: 'svgo-loader', options: { configFile: './svgo.config.js' } }Contenido del archivo config.yml
plugins: - removeTitle: false - remoViewBox: falseContenido de svgo.config.js
const { extendDefaultPlugins } = require('svgo'); module.exports = { plugins: extendDefaultPlugins([ { name: 'removeTitle', active: false }, { name: 'removeViewBox', active: false }, ]) };Para la solución configFile, siento que simplemente no selecciona el archivo dado, porque si proporciono la ubicación de archivo incorrecta (o alguna ubicación de archivo que no existe) funciona exactamente igual que el caso predeterminado (mi expectativa era tener un error algo así como ... archivo incorrecto suministrado).
Usando svgo-loader v3.0.0 (con svgo v2.4.0 o posterior):
cree svgo.config.js en la carpeta raíz del proyecto con el siguiente contenido:
module.exports = { plugins: [ { name: 'preset-default', params: { overrides: { removeViewBox: false, }, }, }, ], };en webpack.config.js
{ test: /\.svg$/i, use: [ { loader: 'file-loader', }, { loader: 'svgo-loader', }, ] },No es necesario pasar ninguna opción para svgo-loader en la configuración del paquete web. Simplemente pasar la configuración predeterminada en el directorio raíz con las opciones requeridas para ajustar el cargador funcionó para mí. Asegúrese de que se llame svgo.config.js , ya que este es el archivo que svgo para cargar las opciones... al igual que pasamos los archivos de configuración para otras cosas como más bonitas, ts, etc.
webpack.config.js
{ test: /\.svg$/i, use: [ { loader: 'file-loader', }, { loader: 'svgo-loader', }, ] }, Y este es mi svgo.config.js , ya que solo necesito conservar el atributo viewBox en mi SVG. He agregado que... puede usar esta lista completa como referencia.
const { extendDefaultPlugins } = require('svgo'); module.exports = { plugins: extendDefaultPlugins([ { name: 'removeViewBox', active: false }, ]) };¡Gracias por la ayuda @trySound !