3

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>
        );
    }

3 Answers 3

3

https://github.com/gilbarbara/react-inlinesvg looks like it would help you.

2
  • The package react-svg also worked very nice for me. but I still try to understand how to do it 'natively' github.com/atomic-app/react-svg
    – ueeieiie
    Mar 11, 2018 at 16:58
  • @ueeieiie check the source of those libraries to see how they do it?
    – timotgl
    Jan 14, 2021 at 13:07
0

You can in most of the cases directly inline the contents of the SVG file inside the render function, like -

TL;DR

react-svg-loader

It provides a webpack-loader, a CLI, and a few other tools that convert an SVG file to a React Component which contains the SVG file's contents inline in the render method.

The gist of the idea is the following -

vector.svg

<svg>
  <circle cx="50" cy="50" r="25" stroke-width="5" />
</svg>

Vector.js

Now create a vector.js and just copy the contents of the SVG like below

import React from "react"
export default () => (
  <svg>
    <circle cx="50" cy="50" r="25" stroke-width="5" />
  </svg>
);

and you can hand edit some elements here or assign ids to animate them.

MapThumbnail Component

And in your MapThumbnail component, you can import it as JS and style the SVG the way you want -

import Vector from "./path/to/vector";

// ...
// ...

render() {
  return <div>
    <Vector />
  </div>
}

This conversion of SVG to a React Component can be automated to some levels and is provided by a few tools - one such tool is react-svg-loader. Disclaimer - I'm the author of react-svg-loader.

0

Best way is Lazy load the SVG component

const SvgComponent = React.lazy(() => import('../filepath.svg'))

return (
  <React.Suspense fallback={<p>Loading...</P>}>
    <SvgComponent />
  </React.Suspense>
)

And this solution also works in React Native along with react-native-svg-transformer module.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.