Country symbol
Country symbols display an icon that represents the flag of a country or intergovernmental organization. You can use country symbols individually or as a complete package. The country symbols are stylized and representative, so users are more likely to recognize them at smaller sizes, and they maintain their character within the circular form. Rectangular "sharp" versions are also provided for every country symbol.
Import and use each country symbol individually.
Import and use the sharp version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.
Import and use each country symbol individually.
Import and use the sharp version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.
Import and use each country symbol individually.
Import and use the sharp version of each country symbol individually using the _Sharp suffix (e.g. TT becomes TT_Sharp for the sharp variant).
You can change the size of each country symbol using the size property which acts as a multiplier for the base size, as described in the country symbol foundation. The base size of the country symbol is based on the active density as described in the size foundation.
The following example shows all the available country symbols. You can import each component individually using its respective country code.
For example, the country symbol for Belgium has the code BE, which you can import as follows:
When importing many country symbol components at once, such as with a list, you may not want all the components in your initial bundle size. Instead, you can lazily load the country symbol components using React Suspense, alongside the LazyCountrySymbol component. LazyCountrySymbol takes a code prop to load the appropriate country symbol component.
You can also use country symbol as a background image in CSS from "@salt-ds/countries/saltCountries.css" or "@salt-ds/countries/saltSharpCountries.css", then specify the country code prefixed with saltCountry- or saltCountrySharp-, e.g., saltCountry-AD, saltCountrySharp-GB-SCT.