从另一个文件夹导入 SVG 图标答案

【问题标题】：Import SVG icons from another folder从另一个文件夹导入 SVG 图标
【发布时间】：2020-02-19 09:52:53
【问题描述】：

我想从我的图标文件夹中导入 svg 图标，以更改图标的颜色，我必须将填充参数提供给 SVG 内的路径。所以我需要导入并只显示 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

【问题讨论】：

do: const customIcon = require("./icons/${name}.svg"); 并在您的 div 中 {customIcon} 此外，该库还为您提供了不错的 SvgIcon 元素
我已经试过了。但它只给了我 div 内的路径

标签： javascript reactjs

【解决方案1】：

好的，我的朋友。

我猜你正在使用create-react-app 并且你不需要配置你的 webpack （我希望现在没有人知道什么是 webpack）

那么，他们在create-react-app 中为您添加了 svg 加载器，并将加载资产的源映射到字段 ReactComponent。你需要做的是：

  const { ReactComponent: Icon } = require(`./icons/${name}.svg`);
  return (
    <Icon />
  );

【讨论】：