Question

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

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

（我使用react-redux-universal-hot-example入门套件）

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

＆＃13;

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>);
  }

}

＆＃13;

它还没有工作......

如何引用天气图标，以便在我的容器中识别这些类？
我需要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中使用天气图标？

1 个答案: