React component for emoji/svg country flags.
npm install --save react-country-flag
v3.x NONE only Typescript Types were introduced, enjoy!
v2.x has breaking changes
code
is nowcountryCode
title
andaria-label
are not defined any more, it is up to the developer to pass these instyleProps
is nowstyle
All props are passed onto the element, everything can be overwritten.
import React from "react"
import ReactCountryFlag from "react-country-flag"
function ExampleComponent {
return (
<div>
<ReactCountryFlag countryCode="US" />
<ReactCountryFlag
className="emojiFlag"
countryCode="US"
style={{
fontSize: '2em',
lineHeight: '2em',
}}
aria-label="United States"
/>
<ReactCountryFlag countryCode="US" svg />
<ReactCountryFlag
countryCode="US"
svg
style={{
width: '2em',
height: '2em',
}}
title="US"
/>
<ReactCountryFlag
countryCode="US"
svg
cdnUrl="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/"
cdnSuffix="svg"
title="US"
/>
</div>
)
}
export default ExampleComponent
Demo https://danalloway.github.io/react-country-flag/
All SVG Flag https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/
Try this out and conditionally render your country flag https://github.com/danalloway/detect-emoji-support
MIT © danalloway