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

Question

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

我下载了 package and added it to my solution (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>);
  }

}

还不行...

如何引用天气图标以便这些类在我的容器中被识别？
我需要 css 及更少的文件夹吗？（我更愿意使用 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>

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

How to use weather-icons with React JS?

javascript

sass

reactjs

react-jsx