@sankyu/react-circle-flags 1.6.2 → 1.6.7
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 +30 -6
- package/README.zh.md +27 -6
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -16
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<a href="https://react-circle-flags.js.org/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/SanKyu-Lab/
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/circle-flags-ui/main/.github/assets/favicon.svg" alt="@sankyu/react-circle-flags" width="120" height="120" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
# @sankyu/react-circle-flags
|
|
10
10
|
|
|
11
|
-
[](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://github.com/SanKyu-Lab/circle-flags-ui/commits/main)
|
|
12
12
|
|
|
13
13
|
<!-- CI/CD & Quality -->
|
|
14
14
|
|
|
15
|
-
[](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/circle-flags-ui)
|
|
16
16
|
|
|
17
17
|
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
English Version | [简体中文](./README.zh.md)
|
|
22
22
|
|
|
23
|
-
:star: **Star us on [GitHub](https://github.com/Sankyu-Lab/
|
|
23
|
+
:star: **Star us on [GitHub](https://github.com/Sankyu-Lab/circle-flags-ui)** | :bug: **Report Issues [here](https://github.com/Sankyu-Lab/circle-flags-ui/issues)**
|
|
24
24
|
|
|
25
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
26
|
|
|
@@ -36,7 +36,7 @@ Perfect for applications that need fast, crisp country flags without external im
|
|
|
36
36
|
|
|
37
37
|
## :world_map: Live Demo
|
|
38
38
|
|
|
39
|
-
[](https://stackblitz.com/fork/github/SanKyu-Lab/circle-flags-ui/tree/main/examples/example-react?file=src%2FApp.tsx&terminal=dev)
|
|
40
40
|
|
|
41
41
|
## ✨ Key Features
|
|
42
42
|
|
|
@@ -66,6 +66,25 @@ bun add @sankyu/react-circle-flags
|
|
|
66
66
|
> [!TIP]
|
|
67
67
|
> For more information, you may refer to the [Installation Guide](https://react-circle-flags.js.org/docs/guides/getting-started/installation/).
|
|
68
68
|
|
|
69
|
+
### 🤖 Are you Vibe Coding?
|
|
70
|
+
|
|
71
|
+
Copy this into your AI Agent (Claude Code, Codex, Cursor ..like) to optimize your flags:
|
|
72
|
+
|
|
73
|
+
<details>
|
|
74
|
+
<summary>AI Agent Prompts</summary>
|
|
75
|
+
|
|
76
|
+
```txt
|
|
77
|
+
Act as an expert Web Engineer. Reference: https://react-circle-flags.js.org/llms.txt & https://react-circle-flags.js.org/llms-small.txt
|
|
78
|
+
|
|
79
|
+
1. **Audit my project** to find any flag usage:
|
|
80
|
+
- Raw `<img>` tags pointing to `HatScripts/circle-flags` URLs.
|
|
81
|
+
- Legacy `react-circle-flags` library usage.
|
|
82
|
+
2. **Propose a migration** to the appropriate `@sankyu/{framework}-circle-flags` package based on my current framework (React/Vue/Solid).
|
|
83
|
+
3. **Optimize for Tree-shaking**: Replace generic `CircleFlag` components or raw tags with **named imports** (e.g., `import { Us } from '...'`) as per the docs.
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
</details>
|
|
87
|
+
|
|
69
88
|
## 🚀 Usage
|
|
70
89
|
|
|
71
90
|
### Import individual flags (Recommended)
|
|
@@ -154,12 +173,17 @@ All flag components are fully typed with TypeScript, providing autocomplete and
|
|
|
154
173
|
|
|
155
174
|
Importing individual flags ensures that only the used flags are included in your bundle.
|
|
156
175
|
|
|
176
|
+
> [!CAUTION]
|
|
177
|
+
> `DynamicFlag` is offline-first and renders runtime codes synchronously, but it bundles all
|
|
178
|
+
> 400+ flags (~600 KB, no tree-shaking). Prefer named imports when possible. If runtime codes
|
|
179
|
+
> are bounded, use a finite named-import map.
|
|
180
|
+
|
|
157
181
|
> [!TIP]
|
|
158
182
|
> 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/).
|
|
159
183
|
|
|
160
184
|
## 🤝 Contributing
|
|
161
185
|
|
|
162
|
-
Please see [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
|
|
186
|
+
Please see [CONTRIBUTING.md](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/CONTRIBUTING.md) for contribution guidelines.
|
|
163
187
|
|
|
164
188
|
## 📄 License
|
|
165
189
|
|
package/README.zh.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<a href="https://react-circle-flags.js.org/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/SanKyu-Lab/
|
|
3
|
+
<img src="https://raw.githubusercontent.com/SanKyu-Lab/circle-flags-ui/main/.github/assets/favicon.svg" alt="@sankyu/react-circle-flags" width="120" height="120" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
# @sankyu/react-circle-flags
|
|
10
10
|
|
|
11
|
-
[](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](https://www.npmjs.com/package/@sankyu/react-circle-flags) [](https://github.com/SanKyu-Lab/circle-flags-ui/commits/main)
|
|
12
12
|
|
|
13
13
|
<!-- CI/CD 与质量 -->
|
|
14
14
|
|
|
15
|
-
[](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/ci.yml) [](https://github.com/SanKyu-Lab/circle-flags-ui/actions/workflows/release.yml) [](https://codecov.io/gh/SanKyu-Lab/circle-flags-ui)
|
|
16
16
|
|
|
17
17
|
[](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
简体中文 | [English Version](./README.md)
|
|
22
22
|
|
|
23
|
-
:star: **在 [GitHub](https://github.com/Sankyu-Lab/
|
|
23
|
+
:star: **在 [GitHub](https://github.com/Sankyu-Lab/circle-flags-ui) 上 Star 我们** | :bug: **在此 [提交问题](https://github.com/Sankyu-Lab/circle-flags-ui/issues)**
|
|
24
24
|
|
|
25
25
|
:rocket: **探索 [演示图库](https://react-circle-flags.js.org/browse)** | :book: **[阅读文档](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
26
26
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
## :world_map: 在线演示
|
|
38
38
|
|
|
39
|
-
[](https://stackblitz.com/fork/github/SanKyu-Lab/circle-flags-ui/tree/main/examples/example-react?file=src%2FApp.tsx&terminal=dev)
|
|
40
40
|
|
|
41
41
|
## ✨ 核心特性
|
|
42
42
|
|
|
@@ -66,6 +66,23 @@ bun add @sankyu/react-circle-flags
|
|
|
66
66
|
> [!TIP]
|
|
67
67
|
> 欲了解更多信息，请参阅 [安装指南](https://react-circle-flags.js.org/docs/guides/getting-started/installation/)。
|
|
68
68
|
|
|
69
|
+
### 🤖 正在 Vibe Coding?
|
|
70
|
+
|
|
71
|
+
<details>
|
|
72
|
+
<summary>AI Agent 提示词</summary>
|
|
73
|
+
|
|
74
|
+
```txt
|
|
75
|
+
你是一位资深 Web 开发专家。请参考文档：https://react-circle-flags.js.org/llms.txt
|
|
76
|
+
|
|
77
|
+
1. **项目审计**：检查我项目中的国旗图标使用情况，找出：
|
|
78
|
+
- 指向 `HatScripts/circle-flags` 的原始 `<img>` 标签。
|
|
79
|
+
- 旧版 `react-circle-flags` 第三方库的使用。
|
|
80
|
+
2. **迁移建议**：根据我当前的框架（React/Vue/Solid），提供向 `@sankyu/{framework}-circle-flags` 家族库迁移的方案。
|
|
81
|
+
3. **极致优化**：根据文档规范，将通用的 `CircleFlag` 组件或原始 `<img>` 标签替换为**具名导入**（例如 `import { FlagUs, FlagDe } from '...'`），以确保 Tree-shaking 达到最小 Bundle 体积。
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
</details>
|
|
85
|
+
|
|
69
86
|
## 🚀 使用
|
|
70
87
|
|
|
71
88
|
### 导入单个国旗（推荐）
|
|
@@ -154,12 +171,16 @@ console.log(buildMeta.circleFlagsCommitHash) // 例如：<示例-sha256-哈希
|
|
|
154
171
|
|
|
155
172
|
导入单个国旗可确保只有使用到的国旗被包含在您的打包文件中。
|
|
156
173
|
|
|
174
|
+
> [!CAUTION]
|
|
175
|
+
> `DynamicFlag` 适合离线优先且需要同步渲染运行时代码的场景，但会打包全部 400+ 国旗
|
|
176
|
+
> （约 ~600 KB，无法 tree-shaking）。若代码集合有限，优先使用具名导入或“具名导入 + map”。
|
|
177
|
+
|
|
157
178
|
> [!TIP]
|
|
158
179
|
> 欲了解更多信息，请参阅 [打包大小与 Tree-shaking 优化指南](https://react-circle-flags.js.org/docs/guides/getting-started/bundle-size/)。
|
|
159
180
|
|
|
160
181
|
## 🤝 贡献
|
|
161
182
|
|
|
162
|
-
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解贡献指南。
|
|
183
|
+
请参阅 [CONTRIBUTING.md](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/CONTRIBUTING.md) 了解贡献指南。
|
|
163
184
|
|
|
164
185
|
## 📄 许可证
|
|
165
186
|
|