你如何获取svg文件并将其用作<svg>？

Question

我的问题：

如何获取 .svg 文件并将其与<svg>标记一起使用，以便我也可以以交互方式设置它（例如悬停时）， 并不像我在示例 中使用<img>标记一样？

目标：

创建一个缩略图视图，在我的主路线'/'上显示每个国家/地区的标志（数量为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文件并将其内联到我的Component中。

我的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看起来会对你有帮助。

Answer 2

您可以在大多数案例中直接内联render函数内的SVG文件内容，例如 -

TL; DR

react-svg-loader

它提供了一个webpack-loader，一个CLI，以及一些其他工具，可以将SVG文件转换为React组件，该组件在render方法中内联包含SVG文件的内容。

这个想法的要点如下 -

vector.svg

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

Vector.js

现在创建一个vector.js并只复制SVG的内容，如下所示

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

你可以在这里手动编辑一些元素或指定id来为它们设置动画。

MapThumbnail组件

在MapThumbnail组件中，您可以将其导入为JS并按照您希望的方式设置SVG样式 -

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

// ...
// ...

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

这种SVG到React组件的转换可以在某种程度上自动化，并由一些工具提供 - 一个这样的工具是react-svg-loader。免责声明 - 我是react-svg-loader的作者。