如何在 React JS 中使用天气图标？

Question

所以我想在 React 应用程序中使用天气图标。

我下载了package并将其添加到我的解决方案中（ 此处）。

（我使用react-redux-universal-hot-example入门工具包）

在Forecast.js容器中，我添加了以下内容：

 import React, {Component, PropTypes} from 'react'; import {connect} from 'react-redux'; import {fetchForecast} from 'redux/modules/weatherForecast'; @connect( state => ({forecast: state.weatherForecast.forecast}), {fetchForecast} ) export default class Forecast extends Component { render() { return ( <div> <i className="wi wi-day-sunny"></i> </div>); } }

它还没有用...

1. 我如何引用天气图标以便在我的容器中识别这些类？
2. 我需要 css 和更少的文件夹吗？ （我更愿意使用 scss，因为入门工具包正在使用它）

我的代码结构：

[src]
 |--[containers]
 |       |--[Forecast]
 |              |--Forecast.js
 |
 |--[weather-icons]
        |--[css]
        |--[font]
        |--[less]
        |--[sass]
        |--[values]

我的源代码

Answer 1

一种方法是直接导入css文件。 （如前所述这里 ）

import 'weather-icons/css/weather-icons.css';

注意：路径可以更改。 我已经通过npm安装了weather-icons软件包，这意味着它位于node_modules下。

导入css文件后，您可以像下面这样使用它；

<i className="wi wi-day-lightning"></i>

Answer 2

[2023]

如果有人这样做是 Next.js 不允许导入全局 css，只需使用 css 模块！

import is from "../../styles/weather-icons.min.module.css"

即使顺风也可以像这样使用它：D

<i className={`${is.wi} ${is["wi-day-cloudy"]} text-xl text-cyan-300`}></i>