Vue.js的260+个国旗图标 – flagpack

Vue.js的260+个国旗图标 – flagpack
插件名称 vue-flagpack
发布时间 2021年1月26日
插件作者 Yummygum

另一个图标库,使您可以将Flagpack标志图标用作Vue.js应用程序中的组件。

安装和下载:

# NPM
$ npm i vue-flagpack

如何使用它:

1.导入图标。

import Vue from 'vue'
import Flag from 'vue-flagpack'

2.注册组件。

Vue.use(Flag, {
  name: 'Flag'
})
// or
Vue.component('flag-us', {
  components: {
    Flag
  }
})

3.在应用程序中添加国旗图标。

<template>
  <vue-flagpack code="US" />
</template>

4.使用以下道具配置标记图标。

size: {
  type: String,
  default: 'm',
  validator: value => (
    ['s', 'm', 'l'].indexOf(value) !== -1
  ),
},
code: {
  type: String,
  default: '528'
},
hasDropShadow: {
  type: Boolean,
  default: false,
},
hasBorder: {
  type: Boolean,
  default: true
},
hasBorderRadius: {
  type: Boolean,
  default: true,
},
gradient: {
  type: String,
  validator: value => (
    ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1
  ),
},
className: {
  type: String
}