La solución no es descabellada. Necesitaremos la ayuda de otro impresionante cargador de webpack llamado svgr, que, según el sitio web, transforma el SVG en un componente de React listo para usar.
Entonces, ¿cómo usamos esta increíble herramienta? Empecemos por actualizar nuestro webpack.config.js:
12345678910111213141516171819const webpack =require($0027webpack$0027);module.exports={ entry:$0027./src/index.js$0027, module:{ rules:[{ test:/. (js|jsx)$/, exclude:/node_modules/, use:[$0027babel-loader$0027],},{ test:/.svg$/, use:[$0027@svgr/webpack$0027],},],},...};javascript
Entonces podemos instalarlo como una dependencia de la forma habitual:
1npm install @svgr/webpack --save-dev
nodo
Una vez que inicies tu aplicación, Webpack hará lo suyo y no tendrás que preocuparte más por tus SVG. Puedes poner tus archivos SVG en cualquier lugar de tu carpeta src/ e importarlos donde los necesites como componentes de React.
Por último, importa el archivo en tu aplicación React:
1234567importImagefrom$0027path/image.svg$0027;constApp=()=[;(<div></div>)
javascript
Este método se conoce generalmente como inline-svg.
Una solución alternativa ligera al svgr es el reactivo-svg-cargador.
123456789101112131415161718192021const webpack =require($0027webpack$0027);module.exports={ entry:$0027./src/index.js$0027, module:{ rules:[{ test:/. (js|jsx)$/, exclude:/node_modules/, use:[$0027babel-loader$0027],},{ loader:$0027react-svg-loader$0027, options:{ jsx:true// true outputs JSX tags}}],},...};javascript
Y se instalan como de costumbre:
1npm instalar reac-svg-loader --save-dev
nodo
En su mayor parte, no queremos que todos nuestros archivos SVG se carguen como componentes de React. Podríamos combinar los métodos anteriores dependiendo del caso de uso. Todo lo que tenemos que hacer es actualizar la configuración de nuestro webpack.
En el ejemplo que figura a continuación se utilizan svgr y url-loader, un cargador de webpack que transforma los archivos en URI base64.
12345678910111213141516171819const webpack =require($0027webpack$0027);module.exports={ entry:$0027./src/index.js$0027, module:{ rules:[{ test:/. (js|jsx)$/, exclude:/node_modules/, use:[$0027babel-loader$0027],},{ test:/.svg$/, use:[$0027@svgr/webpack$0027,$0027url-loader$0027],},],},...};javascript
El uso en su aplicación se vería así:
12345678import imageUrl {ReactComponentasImage}from$0027path/image.svg$0027;constApp=()=[;(<div><img src={imageUrl} alt=""/;Image/></div>)javascript