A simple component displaying the flag and information for currencies and countries.
is a simple web component that display the flag of the
corresponding currency or country code. Use the currency attribute to
display the currency flag or use code to display the country flag.
If the flag is not found, it will displays either the currency or the
code that was specified by the user.
This library depends on the famous LitElement library. To see the demo locally in action please:
git clone https://github.com/yveslange/flag-cc.git
cd flag-cc && npm install
npm start
Now you can navigate to http://localhost:8000
You can build the source by running npm run build. The built distribution
will be located into ./build/. Additionally, you can serve the built
In your index.html:
<head>
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="./node_modules/flag-cc/index.js"></script>
Then you should be able to use <flag-cc> tag anywhere.
<flag-cc currency="CHF"></flag-cc>
<flag-cc currency="CNY"></flag-cc>
<flag-cc currency="CNH"></flag-cc>
<flag-cc currency="ABC"></flag-cc>
<flag-cc code="Unknown"></flag-cc>
<flag-cc code="FR"></flag-cc>
The flags will be searched in ./node_modules/flag-cc/flags/. If you want to
change the path please refer to the property imagesPath.
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
code | code | The country code (eg: CH, FR, ...) | ||
country | country | The corresponding country name | ||
currency | currency | The currency code (eg: EUR, CNY, CHF, ...) | ||
flagType | flag-type | string | The type of the flag ('country' or 'currency') | |
imagesPath | images-path | string | "./node_modules/flag-cc/flags/" | Configures where the images folder is located |
isUnknown | is-unknown | boolean | Is true if the country or currency code is unknown. This is set by flag-cc if the flag was not found. |
| Method | Type | Description |
|---|---|---|
getCountryFlag | (code?: string): String | Retreive the country flag using the code code: The country code. |
getCurrencyFlag | (currency: string): String | Retreive the currency flag using the currency name. currency: The currency name to use (eg: CHF, EUR, ...). |
FAQs
A simple component displaying the flag and information for currencies and countries.
We found that flag-cc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.