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

Question

所以我尝试使用 weather-icons在 React 应用程序中。

我下载了 package并将其添加到我的解决方案( here )。

(我使用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 和 less 文件夹吗？ (我更喜欢使用 scss，因为入门工具包正在使用它)

我的代码结构:

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

<强> My source code

Answer 1

一种方法是直接导入css文件； (如上所述here)

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

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

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

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