admin管理员组

文章数量:1417070

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

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

• javascript
• reactjs
• express
• svg
• inline-svg

Share Improve this question Follow asked Mar 11, 2018 at 15:29 ueeieiieueeieiie 1,57222 gold badges1818 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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 ponent, 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.

Best way is Lazy load the SVG ponent

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.

本文标签： javascriptHow do you fetch an svg file and use it as ltsvggtStack Overflow