As a newbie in web application development, I find myself in the final stages of my project. My current challenge involves bundling the entire project using webpack, and it's mostly smooth sailing except for one hiccup with my SVG icons.
The issue seems to lie in how webpack references the SVGs in the compiled index.html file.
In the original index.html, SVGs are referenced like this:
<svg role="img">
<use href="images/icons.svg#settings-icon"></use>
</svg>
However, in the compiled index.html, the reference appears as follows:
<svg role="img" style="margin-bottom:-3px">
<use href="aaf2f945f2b181c45647.svg#settings-icon"></use>
</svg>
After compiling, the structure of my dist/ folder looks like this:
dist/
├── images/
│ └── icons.svg
├── aaf2f945f2b181c45647.svg
├── bundle.js
└── index.html
The content of aaf2f945f2b181c45647.svg is as follows:
export default "images/icons.svg";The file icons.svg contains all my SVGs as expected.
Replacing "aaf2f945f2b181c45647.svg" with "images/icons.svg" in the compiled index.html resolves the issue for me. However, I'm puzzled as to why webpack navigates to icons.svg via aaf2f945f2b181c45647.svg in the first place. Is there a way I can instruct it to directly write "images/icons.svg" into the HTML file?
Here is an excerpt from my webpack.config.cjs:
/* webpack configuration file */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './frontend/src/scripts/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'frontend/dist'),
clean: true,
},
module: {
rules: [
/* various rules here */
],
},
resolve: {
extensions: ['.ts', '.js'],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './frontend/public/index.html',
filename: 'index.html',
}),
],
};
This is the breakdown of my folder structure:
dist/
├── images/
│ └── icons.svg
├── aaf2f945f2b181c45647.svg
├── bundle.js
└── index.html
public/
├── images/
│ └── icons.svg
└── index.html
src/
├── scripts/
│ └── ...
└── styles/
└── ...
I have attempted using url-loader, svg-url-loader, and svg-sprite-loader without success in displaying my SVGs.