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

Question

So I am trying to use weather-icons in a React application.

I downloaded the package and added it to my solution ( here ).

(I use react-redux-universal-hot-example starter kit)

In a Forecast.js container I added the following:

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

It doesn't work yet...

1. How do I reference weather-icons so these classes are recognized in my container?
2. Do I need css and less folders? (I would prefer to use scss since starter kit is using this)

My code structure:

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

My source code

Answer 1

One way is importing the css file directly; (As stated here )

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

Note: Path can be changed. I've installed the weather-icons package through npm which means it is under node_modules.

And After importing the css file you can use it like below;

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

Answer 2

[2023]

If someone is doing this is Next.js which does not allow to import global css, just use css modules!

import is from "../../styles/weather-icons.min.module.css"

And use it like this even with tailwind:D

<i className={`${is.wi} ${is["wi-day-cloudy"]} text-xl text-cyan-300`}></i>