如何使用React JS的天氣圖標？

所以我想在React應用程序中使用weather-icons。如何使用React JS的天氣圖標？

我下載了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>); 
 
    } 
 

 
}

它還沒有工作...

如何引用天氣圖標，以便在我的容器中識別這些類？
我需要css和更少的文件夾嗎？（我寧願使用SCSS因爲入門套件使用這個）

我的代碼結構：

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

My source code

來源

2016-03-23 Pet Mor

要求調試代碼的問題需要在問題*中包含[MCVE] *。除非你有一個Sass-> CSS編譯問題，**只發布編譯後的CSS **。 – cimmanon

@cimmanon - 我有一個鏈接到代碼片段上面的整個文件，下面的代碼片段是唯一相關的部分。我不認爲有任何與CSS的問題，我只是不知道如何在jsx中引用它。 –

鏈接到代碼是不可接受的。所有與問題相關的代碼在問題**中都必須是**。 – cimmanon

一種方法是直接導入CSS文件; （如所述here）

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

注意：路徑可以更改。我已經通過npm安裝了weather-icons包，這意味着它在node_modules下。

並導入css文件後，你可以像下面一樣使用它;

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

來源

2016-07-26 10:46:22 cdagli

如何使用React JS的天氣圖標？

回答

相關問題