Question

我正在尝试从react-icons SVG库动态渲染SVG图像。

这是一个组件，将在页面上多次呈现，每个组件都使用不同的传递字符串，引用了react-icons库中的SVG文件名。

我想基于averageWeather.weather[0].icon中每个SVG的匹配文件名字符串来导入和呈现SVG文件。

averageWeather.weather[0].icon === 'svgFileName'

我需要：

找到一种导入整个WI库的方法，使我可以使用averageWeather.weather[0].icon中的字符串提取单个文件。
修复在JSX中提取文件的内容。

我可以单独导入所有需要的图像，如下所示：

import { SVGimg1, SVGimg2, SVGimg3, SVGimg4, etc, etc } from 'react-icons/wi'

但是，肯定有比这更好的方法了吗？我宁愿不这样做，因为我需要访问许多可能在将来无疑会增长的图像。

我目前的最佳尝试：

import React from 'react'
import * as classes from './WeatherIcon.module.scss'
import { findMostFrequent } from '../../../shared/weather'
import * as SVG from 'react-icons/wi'

const WeatherIcon = props => {
  const averageWeather = findMostFrequent(props.list)

  return (
  <div className={classes.WeatherIcon}>
    <SVG.{averageWeather.weather[0].icon} />
  </div>
  )
}

export default WeatherIcon

findMostFrequent(props.list)返回一个包含我所需文件名的对象。

这是我希望做到的：

import React from 'react'
import * as classes from './WeatherIcon.module.scss'
import { findMostFrequent } from '../../../shared/weather'

const WeatherIcon = props => {
  const averageWeather = findMostFrequent(props.list)
  const {averageWeather.weather[0].icon} = require('react-icons/wi')

  return (
  <div className={classes.WeatherIcon}>
    <{averageWeather.weather[0].icon}/>
  </div>
  )
}

export default WeatherIcon

我尝试过const reqSvgs = require.context('react-icons/wi', true, /\.svg$/)。尝试此操作时出现此错误：

webpackEmptyContext(req) {
    var e = new Error("Cannot find module '" + req + "'");
    e.code = 'MODULE_NOT_FOUND';
    throw e;
}

这可能吗？

使用React动态导入并渲染SVG图像？

0 个答案: