如何在 React 中注入颜色并控制动态获取的 SVG 的大小？

Question

我正在开发一个 React 应用程序，我需要从 URL 获取 SVG 图标，并根据 Redux 存储中的值对它们应用自定义颜色。此外，我想确保 SVG 在其容器内正确缩放，而不会溢出或扭曲。 这是我迄今为止尝试过的：

const svgRef = useRef<SVGSVGElement>(null);
const colorFromStore = useSelector(getUserColor);

const fetchSvgIcon = async (url: string) => {
    try {
        const response = await axios.get(`https://corsproxy.io/?${url}`, {
            headers: {
                'Content-Type': 'application/xhtml+xml; charset=UTF-8',
            },
            responseType: 'text',
        });
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(response.data, 'text/xml');
        const svg = xmlDoc.getElementsByTagName('svg')[0];
        if (svg && svgRef.current) {
            svgRef.current.innerHTML = svg.innerHTML;
        }
    } catch (error) {
        console.error("Error fetching SVG:", error);
    }
};

<svg ref={svgRef} color={colorFromStore} />

但是，我面临几个问题：

可变的 SVG 大小：我获取的每个 SVG 都有不同的大小，我正在努力将它们保持在容器的边界内。我尝试使用 CSS、内联样式，甚至调整 viewBox 来操纵大小，但我仍然遇到问题。当我对 viewBox 使用较小的值时，SVG 会变大，反之亦然。似乎每个 SVG 都需要不同的 viewBox 才能正确适应。

应用自定义颜色：虽然我尝试使用颜色属性应用颜色，但我不确定这是否是动态修改 SVG 填充或描边颜色的最佳方法。

有人可以指导我如何做吗：

将我的自定义颜色正确注入到获取的 SVG 中？ 确保 SVG 在其容器内正确缩放而不会扭曲或溢出？ 预先感谢您的帮助！

Answer 1

动态更改颜色的替代方法是 CSS 过滤器。这样你也可以使用 CSS 变量。您可以使用https://csscolorize.com