javascript - 如何获取 svg 文件并将其用作 ？

Question

我的问题:

如何获取 .svg 文件并将其与 <svg> 一起使用标记，所以我也可以交互式地设置它的样式(例如悬停时)，而不是像我在示例中那样使用 <img>标签？

目标:

创建一个缩略图 View ，显示我的主要路线上每个国家的国旗(共 149 个)'/'

问题:

我在我的 Express 代码中设置了静态路由，因此所有标志都可用。

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

在客户端，我想获取每个 .svg 文件并将其内联到我的组件中。

我的 React 组件如下所示:

MapThumbnail 组件:

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

Answer 1

https://github.com/gilbarbara/react-inlinesvg看起来它会对你有所帮助。