时间戳

首页 > 解决方案 > 在 React 中包含 SVG 资源作为组件

css - 在 React 中包含 SVG 资源作为组件

问题描述

我正在使用正常的方式来显示 SVG 资产，例如

import pic from "../assets/pic.svg";
const myPic = () => <img src={pic}/>;

这将pic成为 svg 图片的路径。

现在我想让图片响应它的背景颜色来改变它的填充颜色。我已经尝试过 CSS 方法来更改fill属性，它有效，但只有当我将 svg 内容内联而不是将其设置为 时img src，例如

const myPic = () => <svg>.....</svg>;

我的问题是，如果我还想从 assets 文件夹中导入 svg 图片（因为 svg 图片很大我不想把它内联），上面的第一种方法会返回一个路径而不是 svg 的内容作为字符串，那么如何将 svg 资产导入为字符串？或者随意提出替代方案以实现显示具有动态对比色的 svg。

标签： cssreactjssvg

解决方案

答案因您使用的工具链而异。如果您使用的是 Create React App：

import { ReactComponent as Pic} from '../assets/pic.svg';

// code omitted...

// Use it like normal components
return <Pic />;

https://create-react-app.dev/docs/adding-images-fonts-and-files

如果您使用不同的工具链，请通知我。

推荐阅读