My Question:
How do I fetch a .svg file and use it with <svg>
tag, so I could also interactively style it (on hover for example), and not like I did in my example with <img>
tag?
Goal:
Create a thumbnail view that shows the flag of each country (149 in number) on my main route '/'
Problem:
I've set a static route in my Express code, so all the flags to be available.
server.js:
app.use('/flags', express.static(FLAGS_FILES));
app.get('/flags', async (req, res) => {
let myFlags;
await readdir('data/flag-icons/')
.then((flags) => myFlags = flags)
.catch(err => console.log('Error:', err))
res.json(myFlags)
});
On the client-side, I want to fetch each .svg file and inline it into my Component.
My React Component look like this:
MapThumbnail Component:
render(){
const {flagcode} = this.props;
const filepath = `/flags/${mapcode}/vector.svg`;
console.log('filepath:', filepath);
return (
<MapThumbnailStyle>
<img src={filepath}
alt={flagcode}
title={flagcode}
width='40px'
height='40px'
/>
</MapThumbnailStyle>
);
}