将SVG资产作为组件包含在React中

Question

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

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

这在pic成为svg图片的路径时起作用。

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

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

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

Answer 1

答案因使用的工具链而异。如果您正在使用Create React应用程序：

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

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