Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vikkio88/vue-flag-icon
a vue compoment for flag-icon-css
https://github.com/vikkio88/vue-flag-icon
flag-icon-css vue-components vue-flag vue-flag-icon vue-nationality-iso vue2 vuejs2
Last synced: 3 days ago
JSON representation
a vue compoment for flag-icon-css
- Host: GitHub
- URL: https://github.com/vikkio88/vue-flag-icon
- Owner: vikkio88
- Created: 2017-02-26T01:11:46.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T13:28:07.000Z (7 months ago)
- Last Synced: 2024-09-18T19:29:21.292Z (15 days ago)
- Topics: flag-icon-css, vue-components, vue-flag, vue-flag-icon, vue-nationality-iso, vue2, vuejs2
- Language: Vue
- Size: 203 KB
- Stars: 61
- Watchers: 4
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue-Flag-Icon
[](https://nodei.co/npm/vue-flag-icon/)
a Vue2 Compoment for [flag-icons](https://github.com/lipis/flag-icons)
## Install
```
npm i --save vue-flag-icon
```
## Usage
Just declare the global Compoment with the **use** directive in your app
```javascript
import FlagIcon from 'vue-flag-icon'
Vue.use(FlagIcon);
```
Then to use it
```html
...
...
```
The property **iso** can be as well dynamically set from an object
```javascript
let guy = {
name: "Vincenzo",
nationality: "it"
}
```
in the Compoment you should dynamically bind the value
```html
```
## Screenshot
### Code Example
(it is the basic vue-cli webpack template)
```html
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
```
### Additional Props
From 1.0.4 you can now specify two different properties:
- **squared** : it will render the flag as a square if *true*, otherwise the flag will be rectangular shaped (*true* by default).
- **title** : you can specify the title of the flag icon, (by default it will be overwritten by the *iso*)
### Result
