如何获取并将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 文件并将其内嵌到我的组件中。

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

- ueeieiie

Answer 1

https://github.com/gilbarbara/react-inlinesvg 看起来能帮助您。

- timotgl

---

包react-svg对我也非常好用。 但我仍在努力理解如何“本地化”它。https://github.com/atomic-app/react-svg - ueeieiie

@ueeieiie 请查看这些库的源代码，看看它们是如何实现的？ - timotgl

Answer 2

在大多数情况下，您可以直接将SVG文件的内容内联到render函数中，例如 -

简而言之

react-svg-loader

它提供了一个webpack-loader、一个CLI和一些其他工具，将SVG文件转换为包含SVG文件内容的React组件，并将其内联到渲染方法中。

这个想法的要点是 -

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进行动画处理。

地图缩略图组件

在你的地图缩略图组件中，你可以将其作为JS导入并按照自己的喜好设置SVG样式 -

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

// ...
// ...

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

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

- Boopathi Rajaa

Answer 3

最好的方法是延迟加载SVG组件

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

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

而且这个解决方案也适用于React Native，同时需要使用react-native-svg-transformer模块。

- Akhil Ramani