Vue
Flagpack for Vue is created using Vue v2.5.11 and is backwards compatible with older versions of Vue.
2. Defining the component
There are three ways to define the Flagpack component in your Vue project.
Method A) As a Vue plugin
Import Flagpack globally as a plugin for Vue. By default the component name is set to Flag.
Rename the component by defining the name in options param to match your own preferred project naming conventions.
Now you can add flags to a <template> by using the Flag tag.
Method B) Directly into any Vue component Import the Flagpack component directly and only into any Vue component.
Method C) Via UNPKG network Import the Flagpack component as a script for quick use.
Rename the component by defining the name in options param to match your own preferred project naming conventions.
Now you can add flags to a <template> by using the Flag tag.
Method B) Directly into any Vue component Import the Flagpack component directly and only into any Vue component.
Method C) Via UNPKG network Import the Flagpack component as a script for quick use.
Available component options — Props
Use props to alter the way the Flagpack component is displayed. Both the flag as well as styling options are defined through properties. Choose from following properties:
| Key | Value | Required | Default | Format |
|---|---|---|---|---|
| code | String | true | 'NL' | See all codes |
| size | String | false | 'L' | 'S', 'M', 'L' |
| class | String | false | - | - |
| hasDropShadow | Boolean | false | false | - |
| hasBorder | Boolean | false | true | - |
| hasBorderRadius | Boolean | false | true | - |
| gradient | String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
Country code code
The Flagpack component uses the following prop value to reference flags: a country's three letter code (ISO 3166-1 alpha-3), two letter code (ISO 3166-1 alpha-2) numeric code. For a full list of available countries and their corresponding codes see Flag Index.
Size size
The flag icons come in three predefined sizes: S (16*12px), M (20*15) and L (32*24 px). Each size has been custom designed to contain the right amount of detail for the sake of being recognizable.
Drop shadow hasDropShadow
The flag icons do not have a drop shadow by default. Setting hasDropShadow to true adds a subtle drop shadow, finetuned for each of the three predefined flag icon sizes [development/sizes].
Border hasBorder
Each flag icon has an unobtrusive 1px border applied. Set hasBorder to false to turn off this border.
Border radius hasBorderRadius
By default Flagpack flag icons have a border radius set to match each of the three predefined flag icon sizes [development/sizes].
Gradient gradient
Flagpack flag icons don't have gradient by default. If you do want to add a gradient you can choose from one of three predefined gradient types: top-down, real-linear, real-circular.
Class class
Use the class prop to add your own custom defined class to the Flagpack component. This makes is easy to style by referencing it in your stylesheet.