Add CSS to page?-CodePudding

I installed in react this npm: https://www.npmjs.com/package/currency-flags At step 2 it says "Add CSS to page", but what's the name of the CSS file and how do I actually add it and use it? I would like to use it like in the "Rectangular flag source images" section

<img src/flags/${currency_code}.png />

But it's also ok with a div like shown in the guide. (PS noob here)

<div class="currency-flag currency-flag-usd"></div>

CodePudding user response：

To import the css you can do the following in your component file:

import 'currency-flags/dist/currency-flags.css'

and then add the following line for a flag:

<div className='currency-flag currency-flag-usd'></div>

CodePudding user response：

Import CSS file in your React script like:

import 'currenct-flags/dist/currency-flags.min.css'

Use it in your application like:

<div className="currency-flag currency-flag-usd"></div>

You need to use some CSS loader in order your application to load the CSS definitions. For example (for css-loader and webpack):

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};

CodePudding user response：

 <link rel="stylesheet" href="currency-flags.min.css">