我想从我的图标文件夹中导入svg图标,以更改图标的颜色,我必须为SVG内部的路径指定fill参数。因此,我需要导入并且仅显示SVG,但不显示<img src="icon.svg"/>
。
我首先在组件内部放置了一个SVG,这没有问题。 但是我有很多图标,无法将所有内容都放置在组件中。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
export const Gunicon = ({ name, height, width, color, bold }) => {
const classes = makeStyles(theme => {
/* i want to give style like this */
return {
gunicon: {
"& svg": {
height,
width,
"& path": {
fill: color,
stroke: color,
strokeWidth: bold
}
}
}
};
});
/* this is working. but i dont like this */
const ico = (
<svg height={height} width={width} viewBox="0 0 512 512">
<path d="test svg" fill={color} stroke={color} strokeWidth={bold} />
</svg>
);
return (
<div className={classes.gunicon}>
{/* dont working */}
{require(`./icons/${name}.svg`)}
{/* working */}
{ico}
</div>
);
};
当我写为{require("./icons/${name}.svg")}
时。这向我展示了通向SVG的唯一途径。但是我想按名称导入每个SVG,并且仅导入SVG
答案 0 :(得分:0)
好,我的朋友。
我猜您正在使用create-react-app,并且您不需要配置您的webpack (我希望现在没有人知道什么是webpack)
因此,它们在create-react-app中为您添加了svg加载程序,并将已加载资产的源映射到字段ReactComponent。您需要做的是:
const { ReactComponent: Icon } = require(`./icons/${name}.svg`);
return (
<Icon />
);