@sankyu/vue-circle-flags 0.0.1 → 0.0.3-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +240 -12
- package/README.zh.md +249 -0
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,21 +1,249 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://react-circle-flags.js.org/">
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/react-circle-flags/main/website/public/favicon.svg" alt="@sankyu/vue-circle-flags" width="120" height="120" />
|
|
4
|
+
</a>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div align="center">
|
|
8
|
+
|
|
1
9
|
# @sankyu/vue-circle-flags
|
|
2
10
|
|
|
3
|
-
|
|
11
|
+
[](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://github.com/SanKyu-Lab/react-circle-flags/commits/main)
|
|
12
|
+
|
|
13
|
+
<!-- CI/CD & Quality -->
|
|
14
|
+
|
|
15
|
+
[](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/react-circle-flags)
|
|
16
|
+
|
|
17
|
+
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](./LICENSE)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
English Version | [简体中文](./README.zh.md)
|
|
22
|
+
|
|
23
|
+
:star: **Star us on [GitHub](https://github.com/Sankyu-Lab/react-circle-flags)** | :bug: **Report Issues [here](https://github.com/Sankyu-Lab/react-circle-flags/issues)**
|
|
24
|
+
|
|
25
|
+
:rocket: **Explore the [Demo Gallery](https://react-circle-flags.js.org/browse)** | :book: **Read the [Documentation](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
> [!NOTE]
|
|
32
|
+
> 🚧 **Beta Release**
|
|
33
|
+
>
|
|
34
|
+
> This package is currently in beta. APIs may change in future releases. Please report any issues you encounter!
|
|
35
|
+
|
|
36
|
+
## 📖 Overview
|
|
37
|
+
|
|
38
|
+
This library provides **400+ circular SVG flag components** for Vue 3 with **Full-TypeScript support** & **Tree-shaking Optimization**.
|
|
39
|
+
|
|
40
|
+
Perfect for applications that need fast, crisp country flags without external image requests.
|
|
41
|
+
|
|
42
|
+
## ✨ Key Features
|
|
43
|
+
|
|
44
|
+
> [!TIP]
|
|
45
|
+
> For more information, you may refer to the [Documentation](https://react-circle-flags.js.org/docs/guides/getting-started/#-key-features).
|
|
46
|
+
|
|
47
|
+
- 🎯 **Tree-shakable** - Only bundle the flags you use
|
|
48
|
+
- 📦 **TypeScript** - Full type definitions included
|
|
49
|
+
- ⚡ **Zero dependencies** - Only requires Vue 3 as peer dependency
|
|
50
|
+
- 🎨 **Inline SVG** - No external requests, works offline
|
|
51
|
+
- 🔧 **Fully customizable** - All standard SVG props supported
|
|
52
|
+
- 📱 **SSR compatible** - Works with `Nuxt.js`, `Quasar`, etc.
|
|
53
|
+
- 🪶 **Lightweight** - Each flag is ~1KB
|
|
54
|
+
|
|
55
|
+
## 📦 Installation
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @sankyu/vue-circle-flags
|
|
59
|
+
# or
|
|
60
|
+
pnpm add @sankyu/vue-circle-flags
|
|
61
|
+
# or
|
|
62
|
+
yarn add @sankyu/vue-circle-flags
|
|
63
|
+
# or
|
|
64
|
+
bun add @sankyu/vue-circle-flags
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
> [!TIP]
|
|
68
|
+
> For more information, you may refer to the [Installation Guide](https://react-circle-flags.js.org/docs/guides/getting-started/installation/).
|
|
69
|
+
|
|
70
|
+
## 🚀 Usage
|
|
71
|
+
|
|
72
|
+
### Import individual flags (Recommended)
|
|
73
|
+
|
|
74
|
+
```vue
|
|
75
|
+
<script setup lang="ts">
|
|
76
|
+
import { FlagUs, FlagCn, FlagGb } from '@sankyu/vue-circle-flags'
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<template>
|
|
80
|
+
<div>
|
|
81
|
+
<FlagUs :width="48" :height="48" />
|
|
82
|
+
<FlagCn :width="48" :height="48" />
|
|
83
|
+
<FlagGb :width="48" :height="48" />
|
|
84
|
+
</div>
|
|
85
|
+
</template>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Using with size prop
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<script setup lang="ts">
|
|
92
|
+
import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<template>
|
|
96
|
+
<div>
|
|
97
|
+
<FlagJp size="sm" />
|
|
98
|
+
<!-- 16px -->
|
|
99
|
+
<FlagDe size="md" />
|
|
100
|
+
<!-- 24px -->
|
|
101
|
+
<FlagFr size="lg" />
|
|
102
|
+
<!-- 32px -->
|
|
103
|
+
</div>
|
|
104
|
+
</template>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Dynamic flag selection
|
|
108
|
+
|
|
109
|
+
```vue
|
|
110
|
+
<script setup lang="ts">
|
|
111
|
+
import { ref, computed, defineAsyncComponent } from 'vue'
|
|
112
|
+
|
|
113
|
+
const countryCode = ref('us')
|
|
114
|
+
|
|
115
|
+
const FlagComponent = computed(() => {
|
|
116
|
+
const code = countryCode.value.toLowerCase()
|
|
117
|
+
const componentName = `Flag${code.charAt(0).toUpperCase()}${code.slice(1)}`
|
|
118
|
+
return defineAsyncComponent(() =>
|
|
119
|
+
import('@sankyu/vue-circle-flags').then(module => module[componentName])
|
|
120
|
+
)
|
|
121
|
+
})
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<template>
|
|
125
|
+
<component :is="FlagComponent" :width="48" :height="48" />
|
|
126
|
+
</template>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Other usage examples
|
|
130
|
+
|
|
131
|
+
> [!TIP]
|
|
132
|
+
> For more information, you may refer to the [Usage Guide](https://react-circle-flags.js.org/docs/guides/getting-started/usage/).
|
|
133
|
+
|
|
134
|
+
## 📚 API
|
|
135
|
+
|
|
136
|
+
### Props
|
|
137
|
+
|
|
138
|
+
| Prop | Type | Default | Description |
|
|
139
|
+
| -------- | ----------------------------------------------- | ------- | ---------------------------- |
|
|
140
|
+
| `width` | `number \| string` | `32` | Width of the flag |
|
|
141
|
+
| `height` | `number \| string` | `32` | Height of the flag |
|
|
142
|
+
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | - | Preset size |
|
|
143
|
+
| `title` | `string` | - | Accessible title for the SVG |
|
|
144
|
+
|
|
145
|
+
### Size Presets
|
|
146
|
+
|
|
147
|
+
| Size | Pixels |
|
|
148
|
+
| ----- | ------ |
|
|
149
|
+
| `xs` | 12px |
|
|
150
|
+
| `sm` | 16px |
|
|
151
|
+
| `md` | 24px |
|
|
152
|
+
| `lg` | 32px |
|
|
153
|
+
| `xl` | 48px |
|
|
154
|
+
| `2xl` | 64px |
|
|
155
|
+
|
|
156
|
+
### Build Meta Information
|
|
157
|
+
|
|
158
|
+
You can access the library's build meta information from the `buildMeta` export:
|
|
159
|
+
|
|
160
|
+
```vue
|
|
161
|
+
<script setup lang="ts">
|
|
162
|
+
import { buildMeta } from '@sankyu/vue-circle-flags'
|
|
163
|
+
|
|
164
|
+
console.log(buildMeta.version) // e.g., "0.0.1"
|
|
165
|
+
console.log(buildMeta.builtTimestamp) // e.g., 1760000000000
|
|
166
|
+
console.log(buildMeta.commitHash) // e.g., <example-sha256-hash>
|
|
167
|
+
console.log(buildMeta.circleFlagsCommitHash) // e.g., <example-sha256-hash>
|
|
168
|
+
</script>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Available Flags
|
|
172
|
+
|
|
173
|
+
Each flag is exported with the pattern `Flag{PascalCase ISO_CODE}` (for example, `FlagUs`, `FlagCn`). Convenience aliases are provided for common two-letter codes: `FlagUs`, `FlagCn`, `FlagGb`, `FlagJp`.
|
|
174
|
+
|
|
175
|
+
- `FlagUs` - United States
|
|
176
|
+
- `FlagCn` - China
|
|
177
|
+
- `FlagGb` - United Kingdom
|
|
178
|
+
- `FlagJp` - Japan
|
|
179
|
+
- ... and many more
|
|
180
|
+
|
|
181
|
+
See the [Full list of flags](https://react-circle-flags.js.org/browse) in the gallery.
|
|
182
|
+
|
|
183
|
+
## 🎨 Styling
|
|
184
|
+
|
|
185
|
+
Flag components accept all standard SVG attributes and can be styled using Vue's class and style bindings.
|
|
186
|
+
|
|
187
|
+
> [!TIP]
|
|
188
|
+
> For more information, you may refer to the [Styling Guide](https://react-circle-flags.js.org/docs/guides/getting-started/styling/).
|
|
189
|
+
|
|
190
|
+
```vue
|
|
191
|
+
<script setup lang="ts">
|
|
192
|
+
import { FlagUs } from '@sankyu/vue-circle-flags'
|
|
193
|
+
</script>
|
|
194
|
+
|
|
195
|
+
<template>
|
|
196
|
+
<!-- Using class -->
|
|
197
|
+
<FlagUs class="rounded-full shadow-lg hover:scale-110 transition-transform" />
|
|
198
|
+
|
|
199
|
+
<!-- Using inline styles -->
|
|
200
|
+
<FlagUs :style="{ filter: 'grayscale(100%)' }" />
|
|
201
|
+
|
|
202
|
+
<!-- With custom attributes -->
|
|
203
|
+
<FlagUs aria-label="United States flag" role="img" />
|
|
204
|
+
</template>
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## 🔧 TypeScript
|
|
208
|
+
|
|
209
|
+
All flag components are fully typed with TypeScript, providing autocomplete and type safety out of the box.
|
|
210
|
+
|
|
211
|
+
> [!TIP]
|
|
212
|
+
> For more information, you may refer to the [TypeScript Guide](https://react-circle-flags.js.org/docs/guides/getting-started/typescript/).
|
|
213
|
+
|
|
214
|
+
```typescript
|
|
215
|
+
import type { FlagComponentProps, FlagCode } from '@sankyu/vue-circle-flags'
|
|
216
|
+
|
|
217
|
+
// FlagCode is a union type of all valid flag codes
|
|
218
|
+
const code: FlagCode = 'us' // ✓ Valid
|
|
219
|
+
const invalid: FlagCode = 'xyz' // ✗ Type error
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## 📦 Bundle Size & Tree-shaking
|
|
223
|
+
|
|
224
|
+
`@sankyu/vue-circle-flags` is designed to be tree-shakable.
|
|
225
|
+
|
|
226
|
+
Importing individual flags ensures that only the used flags are included in your bundle.
|
|
227
|
+
|
|
228
|
+
> [!TIP]
|
|
229
|
+
> For more information, you may refer to the [Bundle Size & Tree-shaking Guide](https://react-circle-flags.js.org/docs/guides/getting-started/bundle-size/).
|
|
4
230
|
|
|
5
|
-
|
|
231
|
+
```vue
|
|
232
|
+
<script setup lang="ts">
|
|
233
|
+
// ✓ Good - only FlagUs and FlagCn are bundled
|
|
234
|
+
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
|
|
235
|
+
</script>
|
|
236
|
+
```
|
|
6
237
|
|
|
7
|
-
##
|
|
238
|
+
## 🤝 Contributing
|
|
8
239
|
|
|
9
|
-
|
|
240
|
+
Please see [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
|
|
10
241
|
|
|
11
|
-
##
|
|
242
|
+
## 📄 License
|
|
12
243
|
|
|
13
|
-
-
|
|
14
|
-
- Tree-shakeable exports
|
|
15
|
-
- Full TypeScript support
|
|
16
|
-
- SSR compatible (Nuxt.js support)
|
|
17
|
-
- Zero runtime dependencies
|
|
244
|
+
`@sankyu/vue-circle-flags` is licensed under the MIT License, © [Sankyu Lab](https://github.com/Sankyu-Lab)
|
|
18
245
|
|
|
19
|
-
##
|
|
246
|
+
## 🙏 Credits
|
|
20
247
|
|
|
21
|
-
|
|
248
|
+
- Flag designs from [HatScripts/circle-flags](https://github.com/HatScripts/circle-flags)
|
|
249
|
+
- Built with [tsup](https://github.com/egoist/tsup)
|
package/README.zh.md
ADDED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://react-circle-flags.js.org/">
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/react-circle-flags/main/website/public/favicon.svg" alt="@sankyu/vue-circle-flags" width="120" height="120" />
|
|
4
|
+
</a>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div align="center">
|
|
8
|
+
|
|
9
|
+
# @sankyu/vue-circle-flags
|
|
10
|
+
|
|
11
|
+
[](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](https://www.npmjs.com/package/@sankyu/vue-circle-flags) [](https://github.com/SanKyu-Lab/react-circle-flags/commits/main)
|
|
12
|
+
|
|
13
|
+
<!-- CI/CD 与质量 -->
|
|
14
|
+
|
|
15
|
+
[](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/react-circle-flags)
|
|
16
|
+
|
|
17
|
+
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/vue-circle-flags) [](./LICENSE)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
简体中文 | [English Version](./README.md)
|
|
22
|
+
|
|
23
|
+
:star: **在 [GitHub](https://github.com/Sankyu-Lab/react-circle-flags) 上 Star 我们** | :bug: **在此 [提交问题](https://github.com/Sankyu-Lab/react-circle-flags/issues)**
|
|
24
|
+
|
|
25
|
+
:rocket: **探索 [演示图库](https://react-circle-flags.js.org/browse)** | :book: **[阅读文档](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
> [!NOTE]
|
|
32
|
+
> 🚧 **Beta 版本**
|
|
33
|
+
>
|
|
34
|
+
> 此包目前处于 Beta 阶段。API 可能会在未来版本中发生变化。如遇任何问题，请及时反馈！
|
|
35
|
+
|
|
36
|
+
## 📖 概述
|
|
37
|
+
|
|
38
|
+
本库为 Vue 3 提供 **400+ 个圆形 SVG 国旗组件**，具备 **完整的 TypeScript 支持** 以及 **Tree-shaking 优化**。
|
|
39
|
+
|
|
40
|
+
专为需要快速、清晰显示国旗且无需外部图片请求的应用而设计。
|
|
41
|
+
|
|
42
|
+
## ✨ 核心特性
|
|
43
|
+
|
|
44
|
+
> [!TIP]
|
|
45
|
+
> 欲了解更多信息，请参阅 [文档](https://react-circle-flags.js.org/docs/guides/getting-started/#-key-features)。
|
|
46
|
+
|
|
47
|
+
- 🎯 **支持 Tree-shaking 优化** - 仅打包您使用的国旗
|
|
48
|
+
- 📦 **TypeScript** - 包含完整的类型定义
|
|
49
|
+
- ⚡ **零依赖** - 仅需 Vue 3 作为对等依赖
|
|
50
|
+
- 🎨 **内联 SVG** - 无需外部请求，支持离线使用
|
|
51
|
+
- 🔧 **完全可定制** - 支持所有标准 SVG 属性
|
|
52
|
+
- 📱 **SSR 兼容** - 适用于 `Nuxt.js`、`Quasar` 等框架
|
|
53
|
+
- 🪶 **轻量级** - 每个国旗约 1KB
|
|
54
|
+
|
|
55
|
+
## 📦 安装
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @sankyu/vue-circle-flags
|
|
59
|
+
# 或
|
|
60
|
+
pnpm add @sankyu/vue-circle-flags
|
|
61
|
+
# 或
|
|
62
|
+
yarn add @sankyu/vue-circle-flags
|
|
63
|
+
# 或
|
|
64
|
+
bun add @sankyu/vue-circle-flags
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
> [!TIP]
|
|
68
|
+
> 欲了解更多信息，请参阅 [安装指南](https://react-circle-flags.js.org/docs/guides/getting-started/installation/)。
|
|
69
|
+
|
|
70
|
+
## 🚀 使用
|
|
71
|
+
|
|
72
|
+
### 导入单个国旗（推荐）
|
|
73
|
+
|
|
74
|
+
```vue
|
|
75
|
+
<script setup lang="ts">
|
|
76
|
+
import { FlagUs, FlagCn, FlagGb } from '@sankyu/vue-circle-flags'
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<template>
|
|
80
|
+
<div>
|
|
81
|
+
<FlagUs :width="48" :height="48" />
|
|
82
|
+
<FlagCn :width="48" :height="48" />
|
|
83
|
+
<FlagGb :width="48" :height="48" />
|
|
84
|
+
</div>
|
|
85
|
+
</template>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 使用 size 属性
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<script setup lang="ts">
|
|
92
|
+
import { FlagJp, FlagDe, FlagFr } from '@sankyu/vue-circle-flags'
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<template>
|
|
96
|
+
<div>
|
|
97
|
+
<FlagJp size="sm" />
|
|
98
|
+
<!-- 16px -->
|
|
99
|
+
<FlagDe size="md" />
|
|
100
|
+
<!-- 24px -->
|
|
101
|
+
<FlagFr size="lg" />
|
|
102
|
+
<!-- 32px -->
|
|
103
|
+
</div>
|
|
104
|
+
</template>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 动态选择国旗
|
|
108
|
+
|
|
109
|
+
```vue
|
|
110
|
+
<script setup lang="ts">
|
|
111
|
+
import { ref, computed, defineAsyncComponent } from 'vue'
|
|
112
|
+
|
|
113
|
+
const countryCode = ref('us')
|
|
114
|
+
|
|
115
|
+
const FlagComponent = computed(() => {
|
|
116
|
+
const code = countryCode.value.toLowerCase()
|
|
117
|
+
const componentName = `Flag${code.charAt(0).toUpperCase()}${code.slice(1)}`
|
|
118
|
+
return defineAsyncComponent(() =>
|
|
119
|
+
import('@sankyu/vue-circle-flags').then(module => module[componentName])
|
|
120
|
+
)
|
|
121
|
+
})
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<template>
|
|
125
|
+
<component :is="FlagComponent" :width="48" :height="48" />
|
|
126
|
+
</template>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### 其他使用示例
|
|
130
|
+
|
|
131
|
+
> [!TIP]
|
|
132
|
+
> 欲了解更多信息，请参阅 [使用指南](https://react-circle-flags.js.org/docs/guides/getting-started/usage/)。
|
|
133
|
+
|
|
134
|
+
## 📚 API
|
|
135
|
+
|
|
136
|
+
### 属性
|
|
137
|
+
|
|
138
|
+
| 属性 | 类型 | 默认值 | 描述 |
|
|
139
|
+
| -------- | ----------------------------------------------- | ------ | ---------------- |
|
|
140
|
+
| `width` | `number \| string` | `32` | 国旗宽度 |
|
|
141
|
+
| `height` | `number \| string` | `32` | 国旗高度 |
|
|
142
|
+
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | - | 预设尺寸 |
|
|
143
|
+
| `title` | `string` | - | SVG 的无障碍标题 |
|
|
144
|
+
|
|
145
|
+
### 尺寸预设
|
|
146
|
+
|
|
147
|
+
| 尺寸 | 像素 |
|
|
148
|
+
| ----- | ---- |
|
|
149
|
+
| `xs` | 12px |
|
|
150
|
+
| `sm` | 16px |
|
|
151
|
+
| `md` | 24px |
|
|
152
|
+
| `lg` | 32px |
|
|
153
|
+
| `xl` | 48px |
|
|
154
|
+
| `2xl` | 64px |
|
|
155
|
+
|
|
156
|
+
### 构建元信息
|
|
157
|
+
|
|
158
|
+
您可以通过 `buildMeta` 导出项访问库的构建元信息：
|
|
159
|
+
|
|
160
|
+
```vue
|
|
161
|
+
<script setup lang="ts">
|
|
162
|
+
import { buildMeta } from '@sankyu/vue-circle-flags'
|
|
163
|
+
|
|
164
|
+
console.log(buildMeta.version) // 例如："0.0.1"
|
|
165
|
+
console.log(buildMeta.builtTimestamp) // 例如：1760000000000
|
|
166
|
+
console.log(buildMeta.commitHash) // 例如：<示例-sha256-哈希值>
|
|
167
|
+
console.log(buildMeta.circleFlagsCommitHash) // 例如：<示例-sha256-哈希值>
|
|
168
|
+
</script>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### 可用的国旗
|
|
172
|
+
|
|
173
|
+
每个国旗均按 `Flag{帕斯卡命名法 ISO_CODE}` 模式导出（例如 `FlagUs`、`FlagCn`）。为常见的双字母代码提供了便捷别名：`FlagUs`、`FlagCn`、`FlagGb`、`FlagJp`。
|
|
174
|
+
|
|
175
|
+
- `FlagUs` - 美国
|
|
176
|
+
- `FlagCn` - 中国
|
|
177
|
+
- `FlagGb` - 英国
|
|
178
|
+
- `FlagJp` - 日本
|
|
179
|
+
- ... 以及更多
|
|
180
|
+
|
|
181
|
+
请在图库中查看 [国旗完整列表](https://react-circle-flags.js.org/browse)。
|
|
182
|
+
|
|
183
|
+
## 🎨 样式
|
|
184
|
+
|
|
185
|
+
国旗组件接受所有标准 SVG 属性，可使用 Vue 的 class 和 style 绑定轻松设置样式。
|
|
186
|
+
|
|
187
|
+
> [!TIP]
|
|
188
|
+
> 欲了解更多信息，请参阅 [样式指南](https://react-circle-flags.js.org/docs/guides/getting-started/styling/)。
|
|
189
|
+
|
|
190
|
+
```vue
|
|
191
|
+
<script setup lang="ts">
|
|
192
|
+
import { FlagUs } from '@sankyu/vue-circle-flags'
|
|
193
|
+
</script>
|
|
194
|
+
|
|
195
|
+
<template>
|
|
196
|
+
<!-- 使用 class -->
|
|
197
|
+
<FlagUs class="rounded-full shadow-lg hover:scale-110 transition-transform" />
|
|
198
|
+
|
|
199
|
+
<!-- 使用内联样式 -->
|
|
200
|
+
<FlagUs :style="{ filter: 'grayscale(100%)' }" />
|
|
201
|
+
|
|
202
|
+
<!-- 自定义属性 -->
|
|
203
|
+
<FlagUs aria-label="美国国旗" role="img" />
|
|
204
|
+
</template>
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## 🔧 TypeScript
|
|
208
|
+
|
|
209
|
+
所有国旗组件均使用 TypeScript 完全类型化，开箱即用提供自动完成和类型安全。
|
|
210
|
+
|
|
211
|
+
> [!TIP]
|
|
212
|
+
> 欲了解更多信息，请参阅 [TypeScript 指南](https://react-circle-flags.js.org/docs/guides/getting-started/typescript/)。
|
|
213
|
+
|
|
214
|
+
```typescript
|
|
215
|
+
import type { FlagComponentProps, FlagCode } from '@sankyu/vue-circle-flags'
|
|
216
|
+
|
|
217
|
+
// FlagCode 是所有有效国旗代码的联合类型
|
|
218
|
+
const code: FlagCode = 'us' // ✓ 有效
|
|
219
|
+
const invalid: FlagCode = 'xyz' // ✗ 类型错误
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## 📦 打包大小与 Tree-shaking 优化
|
|
223
|
+
|
|
224
|
+
`@sankyu/vue-circle-flags` 专为 Tree-shaking 优化而设计。
|
|
225
|
+
|
|
226
|
+
导入单个国旗可确保只有使用到的国旗被包含在您的打包文件中。
|
|
227
|
+
|
|
228
|
+
> [!TIP]
|
|
229
|
+
> 欲了解更多信息，请参阅 [打包大小与 Tree-shaking 优化指南](https://react-circle-flags.js.org/docs/guides/getting-started/bundle-size/)。
|
|
230
|
+
|
|
231
|
+
```vue
|
|
232
|
+
<script setup lang="ts">
|
|
233
|
+
// ✓ 推荐 - 仅打包 FlagUs 和 FlagCn
|
|
234
|
+
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
|
|
235
|
+
</script>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
## 🤝 贡献
|
|
239
|
+
|
|
240
|
+
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解贡献指南。
|
|
241
|
+
|
|
242
|
+
## 📄 许可证
|
|
243
|
+
|
|
244
|
+
`@sankyu/vue-circle-flags` 基于 MIT 许可证授权，© [Sankyu Lab](https://github.com/Sankyu-Lab)
|
|
245
|
+
|
|
246
|
+
## 🙏 致谢
|
|
247
|
+
|
|
248
|
+
- 国旗设计源自 [HatScripts/circle-flags](https://github.com/HatScripts/circle-flags)
|
|
249
|
+
- 使用 [tsup](https://github.com/egoist/tsup) 构建
|