如何在ReactJs中呈现svgs列表
如何在ReactJs中呈现svgs列表
提问于 2022-07-02 04:11:49
我有一个表情符号数组，每个表情符号都有emoji和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>
)
}有什么更好的方法吗？
回答 3
Stack Overflow用户
发布于 2022-07-02 05:04:00
我相信import { ReactComponent as Coin }语法只有当你使用创建-反应-应用程序时才能起作用。如果你是，那么这可能是最好的选择，只要你不需要重新着色图像或任何花哨的东西。
如果你不使用创建-反应-应用程序，我只会使用一个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>
);
};Stack Overflow用户
发布于 2022-07-02 05:04:40
我没有这两个svg，所以我尝试使用字符串值。您可以在一个组件中映射，然后实际呈现该组件。您正在使用svg作为组件。虽然这个svgs是图像，但它们没有任何导出功能。在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;Stack Overflow用户
发布于 2022-07-02 09:09:47
如果您的应用程序正在使用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>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72836378
复制相关文章
相似问题
腾讯云开发者
