如何在react中修改SVG

Question

我需要在react中更改svg的颜色和缩放

使用i可以操纵宽度和高度使用className: "w-[10vw]"，但不能改变颜色。另一方面，如果我为SVG创建一个组件，我不知道如何使用className来制作标量大小。

我的尝试代码:

"/>

React组件代码:

import * as React from ' React '

导出IVectorBarSVGProps {填充:字符串}

导出函数VectorBarSVG({fill}: IVectorBarSVGProps) {回报((}

Answer 1

可以通过指定"fill"one_answers"stroke".

function Component() {
return (
<svg className="stroke-cyan-500 fill-blue-500">
<!-- ... -->
</svg>
);
}

当使用TailwindCSS时，你不能动态地组装类名。这行不通:

function Component({color}) {
return (
<svg className={`stroke-${color} fill-${color}`}>
<!-- ... -->
</svg>
);
}

这是因为TailwindCSS不会执行你的程序。它扫描你的源代码，并根据它识别的类名和表达式生成一个CSS文件。

相反，您应该在组件中隐藏这些细节，并公开一个更方便的接口。

function Component({isPrimary, isBig}) {
return (
<svg className={
(isPrimary ? "fill-blue-500" : "fill-gray-500")
+ " "
+ (isBig ? "w-96" : "w-24")
}>
<!-- ... -->
</svg>
);
}
// And use it like so:
<Component isPrimary />
<Component isBig />

还有一件事，如果所需的颜色更改没有应用到SVG，则可能没有将类应用到该SVG中的正确元素。

例如，下面是一个SVG，它包含一个圆、一个矩形和一条线:

function Component() {
return (
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
<rect x="-70" y="-70" width="390" height="390"/>
<g>
<rect x="25" y="25" width="200" height="200" />
<circle cx="125" cy="125" r="75"/>
<line x1="50" y1="50" x2="200" y2="200" />
</g>
</svg>
)
}

要更改圆圈的填充颜色，必须将类名应用于circle元素:

function Component() {
return (
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
<rect x="-70" y="-70" width="390" height="390"/>
<g>
<rect x="25" y="25" width="200" height="200" />
<circle cx="125" cy="125" r="75" className="fill-amber-500 stroke-blue-800"/>
<line x1="50" y1="50" x2="200" y2="200" />
</g>
</svg>
)
}

Answer 2

最简单的方法。我还使用了Tailwindcss

像这样模块化地导入SVG:

import {ReactComponent as NameOfSVG} from 'path/to/svg/.svg";

给你的组件一个名字:

<NameOfSVG className="classname"/>

在你的index.css:

.classname{
fill: #colorHexOfYourChoice;
}