Wie benutzt man Wetter-Icons mit React JS?

So versuche ich weather-icons in einer React-Anwendung zu verwenden.Wie benutzt man Wetter-Icons mit React JS?

Ich habe die package heruntergeladen und zu meiner Lösung hinzugefügt (here).

(ich benutze react-redux-universal-hot-example Starter-Kit)

In einem Forecast.js Container Ich habe folgendes:

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

 
}

Es funktioniert noch nicht ...

Wie referenziere ich Wettersymbole, damit diese Klassen in meinem Container erkannt werden?
Benötige ich CSS und weniger Ordner? (Ich würde es vorziehen SCSS zu verwenden, da diese Starter-Kit verwendet)

Meine Code-Struktur:

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

My source code

Quelle

2016-03-23 Pet Mor

Fragen zum Debug-Code müssen ein [MCVE] * innerhalb der Frage * enthalten. Wenn Sie kein Sass-> CSS-Kompilierungsproblem haben, ** veröffentlichen Sie nur das kompilierte CSS **. – cimmanon

@cimmanon - Ich habe einen Link auf die ganze Datei über dem Code-Snippet und das Snippet unten ist der einzige relevante Teil. Ich glaube nicht, dass es irgendwelche Probleme mit CSS gibt, ich weiß einfach nicht, wie man es in jsx referenziert. –

Die Verknüpfung mit Code ist nicht akzeptabel. Der gesamte für das Problem relevante Code muss ** in der Frage ** sein. – cimmanon

Eine Möglichkeit ist, den Import der CSS-Datei direkt; (Wie bereits erwähnt here)

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

Hinweis: Pfad geändert werden kann. Ich habe das Wetter-Icons-Paket über npm installiert, was bedeutet, dass es sich unter node_modules befindet.

Und nach dem Importieren der CSS-Datei können Sie es wie folgt verwenden;

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

Quelle

2016-07-26 10:46:22 cdagli

Wie benutzt man Wetter-Icons mit React JS?

Antwort

Verwandte Themen