如何在ReactJ中渲染SVG列表

Question

我有一个表情符号，每个表情符号都有表情符号和label字段。我想知道如何使用组件中的地图渲染表情符号。

我已经将所有表情符号作为SVG文件存储在src/Assets/emojiicons中。

现在，我这样做是这样的：

import { ReactComponent as Coin } from "../assets/emojiIcons/coin.svg"
import { ReactComponent as Rocket } from "../assets/emojiIcons/rocket.svg"

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
  },
]

export { DEFAULT_EMOJI_OPTIONS }

在这样的组件中导入表情符号：

import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = () => {
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
          <emoji.emoji />
      ))}
    </div>
  )
}

有什么更好的方法吗？

Answer 1

我相信导入{ReactComponent作为COIN}语法仅在您使用Create-react-app时起作用。如果您是，那么这可能是最好的选择，只要您不需要重新彩色图像或任何喜欢的东西。

如果您不使用Create-react-app，我将只使用img标签。

您可以使用file-Loader导入SVG，而不是需要将路径保留在字符串中。

在您的WebPack配置中（Vite或其他系统有类似的选项）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

import Coin from "../assets/emojiIcons/coin.svg";

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Coin,
    label: "coin",
  },
  .
  .
  .
];


.
.
.
const EmojiSection = () => {
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
          <img src={emoji.emoji} />
      ))}
    </div>
  );
};

Answer 2

我没有这两个SVG，所以我尝试使用字符串值。您可以在一个组件中映射，然后实际上可以渲染组件。您正在使用SVG作为组件。尽管此SVG是图像，但它们没有任何导出功能。在React中，您可以在标签的帮助下轻松地绘制所有SVG。

 import  Coin  from "../assets/emojiIcons/coin.svg"
 import Rocket from "../assets/emojiIcons/rocket.svg"

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
  },
]

function Test() {
  return (
    <>
      {DEFAULT_EMOJI_OPTIONS.map(({ emoji,label }) => (
        <div >
          <div>
            <img src={emoji} alt="xyz" width={50}/>
            <h2>{label}</h2>
          </div>
        </div>
      ))}
    </>
  )
}

export default Test;

Answer 3

如果您的应用程序正在使用MUI，则可以通过Svgicon对此进行核对。

 import  Coin  from "../assets/emojiIcons/coin.svg"
 import Rocket from "../assets/emojiIcons/rocket.svg"
 import { SvgIcon } from "@mui/material";

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
  },
]

function Test() {
  return (
    <>
      {DEFAULT_EMOJI_OPTIONS.map(({ emoji,label }, idx) => (
        <div  key={idx}>
          <div>
            <SvgIcon color="grey.light" component={emoji} viewBox="0 0 64 64" 
                  sx={{ fontSize: 25 }} />    
            <h2>{label}</h2>
          </div>
        </div>
      ))}
    </>
  )
}

export default Test;

如果要使用IMG，则可以通过两种方式存档。

import Coin from "../assets/emojiIcons/coin.svg";

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Coin,
    label: "coin",
  },
//...
];

const EmojiSection = () => {
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
          <img src={emoji.emoji} />
      ))}
    </div>
  );
};

或者

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: "../assets/emojiIcons/coin.svg",
    label: "coin",
  },
//...
];

const EmojiSection = () => {
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
          <img src={required(emoji.emoji)} />
      ))}
    </div>
  );
};