Cómo usar imágenes SVG en tus proyectos JavaScript con Webpack

En una entrada anterior os expliqué cómo trabajar más fácilmente con proyectos JavaScript gracias al paquete @wordpress/scripts. No hay duda de que gracias a este paquete y al comando wp-scripts que incluye, transpilar JavaScript es un juego de niños.

Lidiar con complejas configuraciones de Webpack, Babel y demás herramientas es algo del pasado. Pero si tus necesidades son más avanzadas y wp-scripts se te queda corto, su versatilidad te permite ampliar las posibilidades por defecto usando tu propio archivo de configuración de Webpack.

Esto, que quizás te parezca innecesario cuando estás empezando a programar en JavaScript para WordPress (y en concreto para Gutenberg), es algo más común de lo que te piensas. Un ejemplo sencillo que te servirá para entender porqué vas a tener que utilizar tu propia configuración de Webpack es que por defecto wp-scripts (o mejor dicho, la configuración de Webpack que incluye) no te permite trabajar con archivos SVG en tu código JavaScript.

Por tanto, si tienes un fragmento de código JavaScript tan simple como el que ves a continuación donde renderizamos un componente que pinta un archivo de imagen SVG, al pasarlo por wp-scripts para transpilarlo, obtendremos un error.

Desde aquí te animo a que te pases por la documentación de wp-scripts para ver todo lo que puedes hacer con esta utilidad. Si lo has hecho, verás que hay una sección en la que te explican cómo extenderlo para utilizar tu propia configuración de Webpack.

Nosotros, para trabajar con archivos de imagen SVG, lo que hacemos es utilizar el paquete svg-react-loader que nos permite importar los archivos SVG tal y como ves en el componente JavaScript del código anterior. Ahí lo que hemos hecho es poner la ruta al archivo SVG icon.svg e importarlo en la variable Icon.

La elección del nombre de variable que importa el archivo SVG no es casual. Utilizamos un nombre que empieza en mayúsculas para así poder usarlo directamente en nuestro código JSX como un componente más: <Icon />

Para que este código JavaScript nos funcione lo primero que necesitamos es añadir el paquete svg-react-loader como dependencia en nuestro proyecto mediante el siguiente comando npm:

npm install svg-react-loader --save-dev

Una vez listo esto, sólo tenemos que crear el archivo webpack.config.js en la raíz de nuestro proyecto, justo en el mismo sitio donde tenemos el archivo package.json. Si lo ponemos ahí, el paquete @wordpress/scripts ya lo utilizará directamente en sustitución de la configuración que trae por defecto.

El contenido de webpack.config.js es el que puedes ver a continuación:

Si te miras con un poco de cariño el contenido del archivo webpack.config.js anterior verás que todo el rato lo que hacemos es utilizar los valores de la configuración por defecto que está en la variable defaultConfig, extendiendo allí donde toca con nuevas configuraciones.

En este caso, el apartado que modificamos es el de las reglas (rules), donde añadimos una nueva para que los archivos terminados en .svg sean procesados y cargados por el paquete svg-react-loader que instalamos antes.

De esta manera, cualquier archivo SVG lo cargamos como un componente más que podemos utilizar en nuestro código JSX y así renderizar imágenes SVG extendiendo wp-scripts con nuestros cambios.

Ten en cuenta que esto mismo te sirve para extender la configuración por defecto y procesar archivos CSS o cualquier otra cosa que se te ocurra hacer con Webpack. Tunea tu propio archivo webpack.config.js extendiendo el que viene por defecto con wp-scripts y olvídate de todo lo demás.

Si tienes alguna duda o utilizas wp-scripts de otra manera, no te queda otra: ¡déjanos un comentario! Es bonito saber que hay gente al otro lado…

Imagen destacada de Kira auf der Heide en Unsplash.