@sankyu/react-circle-flags 1.5.0 → 1.5.1
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 +5 -3
- package/README.zh.md +162 -0
- package/dist/flags/id.cjs +1 -1
- package/dist/flags/id.mjs +1 -1
- package/dist/flags/mc.cjs +1 -1
- package/dist/flags/mc.mjs +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.mjs +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
8
8
|
|
|
9
|
-
#
|
|
9
|
+
# @sankyu/react-circle-flags
|
|
10
10
|
|
|
11
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://github.com/SanKyu-Lab/react-circle-flags/commits/main)
|
|
12
12
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
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
16
|
|
|
17
|
-
[](https://www.typescriptlang.org/) [](https://www.typescriptlang.org/) [](https://bundlephobia.com/package/@sankyu/react-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
|
@@ -32,7 +32,9 @@ This library provides **400+ circular SVG flag components** with **Full-TypeScri
|
|
|
32
32
|
|
|
33
33
|
Perfect for applications that need fast, crisp country flags without external image requests.
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
## :world_map: Live Demo
|
|
36
|
+
|
|
37
|
+
[](https://codesandbox.io/p/sandbox/nyy6vp) [](https://stackblitz.com/edit/react-circle-flags?file=src%2FApp.tsx&terminal=dev)
|
|
36
38
|
|
|
37
39
|
## ✨ Key Features
|
|
38
40
|
|
package/README.zh.md
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
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/react-circle-flags" width="120" height="120" />
|
|
4
|
+
</a>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div align="center">
|
|
8
|
+
|
|
9
|
+
# @sankyu/react-circle-flags
|
|
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://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/react-circle-flags) [](./LICENSE)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
:star: **在 [GitHub](https://github.com/Sankyu-Lab/react-circle-flags) 上 Star 我们** | :bug: **在此 [提交问题](https://github.com/Sankyu-Lab/react-circle-flags/issues)**
|
|
22
|
+
|
|
23
|
+
:rocket: **探索 [演示图库](https://react-circle-flags.js.org/browse)** | :book: **[阅读文档](https://react-circle-flags.js.org/docs/guides/getting-started/)**
|
|
24
|
+
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 📖 概述
|
|
30
|
+
|
|
31
|
+
本库提供 **400+ 个圆形 SVG 国旗组件**，具备 **完整的 TypeScript 支持** 以及 **Tree-shaking 优化**。
|
|
32
|
+
|
|
33
|
+
专为需要快速、清晰显示国旗且无需外部图片请求的应用而设计。
|
|
34
|
+
|
|
35
|
+
## :world_map: 在线演示
|
|
36
|
+
|
|
37
|
+
[](https://codesandbox.io/p/sandbox/nyy6vp) [](https://stackblitz.com/edit/react-circle-flags?file=src%2FApp.tsx&terminal=dev)
|
|
38
|
+
|
|
39
|
+
## ✨ 核心特性
|
|
40
|
+
|
|
41
|
+
> [!TIP]
|
|
42
|
+
> 欲了解更多信息，请参阅 [文档](https://react-circle-flags.js.org/docs/guides/getting-started/#-key-features)。
|
|
43
|
+
|
|
44
|
+
- 🎯 **支持 Tree-shaking 优化** - 仅打包您使用的国旗
|
|
45
|
+
- 📦 **TypeScript** - 包含完整的类型定义
|
|
46
|
+
- ⚡ **零依赖** - 仅需 React 作为对等依赖
|
|
47
|
+
- 🎨 **内联 SVG** - 无需外部请求，支持离线使用
|
|
48
|
+
- 🔧 **完全可定制** - 支持所有标准 SVG 属性
|
|
49
|
+
- 📱 **SSR 兼容** - 适用于 `Next.js`、`Remix` 等框架
|
|
50
|
+
- 🪶 **轻量级** - 每个国旗约 1KB
|
|
51
|
+
|
|
52
|
+
## 📦 安装
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm install @sankyu/react-circle-flags
|
|
56
|
+
# 或
|
|
57
|
+
pnpm add @sankyu/react-circle-flags
|
|
58
|
+
# 或
|
|
59
|
+
yarn add @sankyu/react-circle-flags
|
|
60
|
+
# 或
|
|
61
|
+
bun add @sankyu/react-circle-flags
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
> [!TIP]
|
|
65
|
+
> 欲了解更多信息，请参阅 [安装指南](https://react-circle-flags.js.org/docs/guides/getting-started/installation/)。
|
|
66
|
+
|
|
67
|
+
## 🚀 使用
|
|
68
|
+
|
|
69
|
+
### 导入单个国旗（推荐）
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { FlagUs, FlagCn, FlagGb } from '@sankyu/react-circle-flags'
|
|
73
|
+
|
|
74
|
+
export default function App() {
|
|
75
|
+
return (
|
|
76
|
+
<div>
|
|
77
|
+
<FlagUs width={48} height={48} />
|
|
78
|
+
<FlagCn width={48} height={48} />
|
|
79
|
+
<FlagGb width={48} height={48} />
|
|
80
|
+
</div>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 其他使用示例
|
|
86
|
+
|
|
87
|
+
> [!TIP]
|
|
88
|
+
> 欲了解更多信息，请参阅 [使用指南](https://react-circle-flags.js.org/docs/guides/getting-started/usage/)。
|
|
89
|
+
|
|
90
|
+
## 📚 API
|
|
91
|
+
|
|
92
|
+
### 构建元信息
|
|
93
|
+
|
|
94
|
+
您可以通过 `buildMeta` 导出项访问库的构建元信息：
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { buildMeta } from '@sankyu/react-circle-flags'
|
|
98
|
+
|
|
99
|
+
console.log(buildMeta.version) // 例如："1.2.3"
|
|
100
|
+
console.log(buildMeta.builtTimestamp) // 例如：1760000000000
|
|
101
|
+
console.log(buildMeta.commitHash) // 例如：<示例-sha256-哈希值>
|
|
102
|
+
console.log(buildMeta.circleFlagsCommitHash) // 例如：<示例-sha256-哈希值>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### 其他属性
|
|
106
|
+
|
|
107
|
+
...欲了解更多信息，请参阅 [API 参考](https://react-circle-flags.js.org/reference/api/interfaceflagcomponentprops/)。
|
|
108
|
+
|
|
109
|
+
### 可用的国旗
|
|
110
|
+
|
|
111
|
+
每个国旗均按 `Flag{帕斯卡命名法 ISO_CODE}` 模式导出（例如 `FlagUs`、`FlagCn`）。为常见的双字母代码提供了便捷别名：`FlagUs`、`FlagCn`、`FlagGb`、`FlagJp`。
|
|
112
|
+
|
|
113
|
+
- `FlagUs` - 美国
|
|
114
|
+
- `FlagCn` - 中国
|
|
115
|
+
- `FlagGb` - 英国
|
|
116
|
+
- `FlagJp` - 日本
|
|
117
|
+
- ... 以及更多
|
|
118
|
+
|
|
119
|
+
请在 react-circle-flags 图库中查看 [国旗完整列表](https://react-circle-flags.js.org/browse)。
|
|
120
|
+
|
|
121
|
+
## 🎨 样式
|
|
122
|
+
|
|
123
|
+
国旗组件接受所有标准 SVG 属性，因此可使用任何 CSS 方法轻松设置样式。
|
|
124
|
+
|
|
125
|
+
> [!TIP]
|
|
126
|
+
> 欲了解更多信息，请参阅 [样式指南](https://react-circle-flags.js.org/docs/guides/getting-started/styling/)。
|
|
127
|
+
|
|
128
|
+
## 🔧 TypeScript
|
|
129
|
+
|
|
130
|
+
所有国旗组件均使用 TypeScript 完全类型化，开箱即用提供自动完成和类型安全。
|
|
131
|
+
|
|
132
|
+
> [!TIP]
|
|
133
|
+
> 欲了解更多信息，请参阅 [TypeScript 指南](https://react-circle-flags.js.org/docs/guides/getting-started/typescript/)。
|
|
134
|
+
|
|
135
|
+
## 📖 示例
|
|
136
|
+
|
|
137
|
+
> [!TIP]
|
|
138
|
+
> 欲了解更多信息，请参阅 [指南 - 基础用法](https://react-circle-flags.js.org/docs/guides/getting-started/usage/)。
|
|
139
|
+
|
|
140
|
+
## 📦 打包大小与 Tree-shaking 优化
|
|
141
|
+
|
|
142
|
+
`@sankyu/react-circle-flags` 专为 Tree-shaking 优化而设计。
|
|
143
|
+
|
|
144
|
+
导入单个国旗可确保只有使用到的国旗被包含在您的打包文件中。
|
|
145
|
+
|
|
146
|
+
> [!TIP]
|
|
147
|
+
> 欲了解更多信息，请参阅 [打包大小与 Tree-shaking 优化指南](https://react-circle-flags.js.org/docs/guides/getting-started/bundle-size/)。
|
|
148
|
+
|
|
149
|
+
## 🤝 贡献
|
|
150
|
+
|
|
151
|
+
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解贡献指南。
|
|
152
|
+
|
|
153
|
+
## 📄 许可证
|
|
154
|
+
|
|
155
|
+
`@sankyu/react-circle-flags` 基于 MIT 许可证授权，© [Sankyu Lab](https://github.com/Sankyu-Lab)
|
|
156
|
+
|
|
157
|
+
[官网](./website/) 基于 GPL-3.0 许可证授权，© [Sankyu Lab](https://github.com/Sankyu-Lab)
|
|
158
|
+
|
|
159
|
+
## 🙏 致谢
|
|
160
|
+
|
|
161
|
+
- 国旗设计源自 [HatScripts/circle-flags](https://github.com/HatScripts/circle-flags)
|
|
162
|
+
- 使用 [tsup](https://github.com/egoist/tsup) 构建
|
package/dist/flags/id.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';const jsxRuntime=require('react/jsx-runtime');const r=({width:t=48,height:o=48,className:i,title:
|
|
1
|
+
'use strict';const jsxRuntime=require('react/jsx-runtime');const r=({width:t=48,height:o=48,className:i,title:l="ID",...m})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 512 512",width:t,height:o,className:i,role:"img","aria-label":l,...m,children:[jsxRuntime.jsx("title",{children:l}),jsxRuntime.jsx("mask",{id:"a",children:jsxRuntime.jsx("circle",{cx:"256",cy:"256",r:"256",fill:"#fff"})}),jsxRuntime.jsxs("g",{mask:"url(#a)",children:[jsxRuntime.jsx("path",{fill:"#eee",d:"m0 256 249.6-41.3L512 256v256H0z"}),jsxRuntime.jsx("path",{fill:"#d80027",d:"M0 0h512v256H0z"})]})]});exports.FlagId=r;
|
package/dist/flags/id.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';const r=({width:t=48,height:o=48,className:i,title:
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';const r=({width:t=48,height:o=48,className:i,title:l="ID",...m})=>jsxs("svg",{viewBox:"0 0 512 512",width:t,height:o,className:i,role:"img","aria-label":l,...m,children:[jsx("title",{children:l}),jsx("mask",{id:"a",children:jsx("circle",{cx:"256",cy:"256",r:"256",fill:"#fff"})}),jsxs("g",{mask:"url(#a)",children:[jsx("path",{fill:"#eee",d:"m0 256 249.6-41.3L512 256v256H0z"}),jsx("path",{fill:"#d80027",d:"M0 0h512v256H0z"})]})]});export{r as FlagId};
|
package/dist/flags/mc.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';const jsxRuntime=require('react/jsx-runtime');const r=({width:t=48,height:o=48,className:i,title:
|
|
1
|
+
'use strict';const jsxRuntime=require('react/jsx-runtime');const r=({width:t=48,height:o=48,className:i,title:a="MC",...m})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 512 512",width:t,height:o,className:i,role:"img","aria-label":a,...m,children:[jsxRuntime.jsx("title",{children:a}),jsxRuntime.jsx("mask",{id:"a",children:jsxRuntime.jsx("circle",{cx:"256",cy:"256",r:"256",fill:"#fff"})}),jsxRuntime.jsxs("g",{mask:"url(#a)",children:[jsxRuntime.jsx("path",{fill:"#eee",d:"m0 256 258.2-43.3L512 256v256H0z"}),jsxRuntime.jsx("path",{fill:"#a2001d",d:"M0 0h512v256H0z"})]})]});exports.FlagMc=r;
|
package/dist/flags/mc.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';const r=({width:t=48,height:o=48,className:i,title:
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';const r=({width:t=48,height:o=48,className:i,title:a="MC",...m})=>jsxs("svg",{viewBox:"0 0 512 512",width:t,height:o,className:i,role:"img","aria-label":a,...m,children:[jsx("title",{children:a}),jsx("mask",{id:"a",children:jsx("circle",{cx:"256",cy:"256",r:"256",fill:"#fff"})}),jsxs("g",{mask:"url(#a)",children:[jsx("path",{fill:"#eee",d:"m0 256 258.2-43.3L512 256v256H0z"}),jsx("path",{fill:"#a2001d",d:"M0 0h512v256H0z"})]})]});export{r as FlagMc};
|
package/dist/index.cjs
CHANGED
|
@@ -12475,7 +12475,7 @@ var FlagId = ({
|
|
|
12475
12475
|
/* @__PURE__ */ jsxRuntime.jsx("mask", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
|
|
12476
12476
|
/* @__PURE__ */ jsxRuntime.jsxs("g", { mask: "url(#a)", children: [
|
|
12477
12477
|
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#eee", d: "m0 256 249.6-41.3L512 256v256H0z" }),
|
|
12478
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#
|
|
12478
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#d80027", d: "M0 0h512v256H0z" })
|
|
12479
12479
|
] })
|
|
12480
12480
|
]
|
|
12481
12481
|
}
|
|
@@ -12501,7 +12501,7 @@ var FlagMc = ({
|
|
|
12501
12501
|
/* @__PURE__ */ jsxRuntime.jsx("mask", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
|
|
12502
12502
|
/* @__PURE__ */ jsxRuntime.jsxs("g", { mask: "url(#a)", children: [
|
|
12503
12503
|
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#eee", d: "m0 256 258.2-43.3L512 256v256H0z" }),
|
|
12504
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#
|
|
12504
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#a2001d", d: "M0 0h512v256H0z" })
|
|
12505
12505
|
] })
|
|
12506
12506
|
]
|
|
12507
12507
|
}
|
|
@@ -13045,17 +13045,17 @@ var FLAG_REGISTRY = {
|
|
|
13045
13045
|
|
|
13046
13046
|
// package.json
|
|
13047
13047
|
var package_default = {
|
|
13048
|
-
version: "1.5.
|
|
13048
|
+
version: "1.5.1"};
|
|
13049
13049
|
|
|
13050
13050
|
// src/meta.ts
|
|
13051
13051
|
var parseBuiltAt = (source) => {
|
|
13052
13052
|
const parsed = Number.parseInt(source, 10);
|
|
13053
13053
|
return Number.isFinite(parsed) ? parsed : Date.now();
|
|
13054
13054
|
};
|
|
13055
|
-
var commit = "
|
|
13056
|
-
var circleFlagsCommit = "
|
|
13055
|
+
var commit = "7e22a7513672e75f95a9c53c54a8b8d51a76fcc2" ;
|
|
13056
|
+
var circleFlagsCommit = "85ab1fc0f04e6404768db89a27b2fb5bc1118ea4" ;
|
|
13057
13057
|
var builtAt = parseBuiltAt(
|
|
13058
|
-
"
|
|
13058
|
+
"1768394565054"
|
|
13059
13059
|
);
|
|
13060
13060
|
var buildMeta = {
|
|
13061
13061
|
version: package_default.version,
|
package/dist/index.mjs
CHANGED
|
@@ -12473,7 +12473,7 @@ var FlagId = ({
|
|
|
12473
12473
|
/* @__PURE__ */ jsx("mask", { id: "a", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
|
|
12474
12474
|
/* @__PURE__ */ jsxs("g", { mask: "url(#a)", children: [
|
|
12475
12475
|
/* @__PURE__ */ jsx("path", { fill: "#eee", d: "m0 256 249.6-41.3L512 256v256H0z" }),
|
|
12476
|
-
/* @__PURE__ */ jsx("path", { fill: "#
|
|
12476
|
+
/* @__PURE__ */ jsx("path", { fill: "#d80027", d: "M0 0h512v256H0z" })
|
|
12477
12477
|
] })
|
|
12478
12478
|
]
|
|
12479
12479
|
}
|
|
@@ -12499,7 +12499,7 @@ var FlagMc = ({
|
|
|
12499
12499
|
/* @__PURE__ */ jsx("mask", { id: "a", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
|
|
12500
12500
|
/* @__PURE__ */ jsxs("g", { mask: "url(#a)", children: [
|
|
12501
12501
|
/* @__PURE__ */ jsx("path", { fill: "#eee", d: "m0 256 258.2-43.3L512 256v256H0z" }),
|
|
12502
|
-
/* @__PURE__ */ jsx("path", { fill: "#
|
|
12502
|
+
/* @__PURE__ */ jsx("path", { fill: "#a2001d", d: "M0 0h512v256H0z" })
|
|
12503
12503
|
] })
|
|
12504
12504
|
]
|
|
12505
12505
|
}
|
|
@@ -13043,17 +13043,17 @@ var FLAG_REGISTRY = {
|
|
|
13043
13043
|
|
|
13044
13044
|
// package.json
|
|
13045
13045
|
var package_default = {
|
|
13046
|
-
version: "1.5.
|
|
13046
|
+
version: "1.5.1"};
|
|
13047
13047
|
|
|
13048
13048
|
// src/meta.ts
|
|
13049
13049
|
var parseBuiltAt = (source) => {
|
|
13050
13050
|
const parsed = Number.parseInt(source, 10);
|
|
13051
13051
|
return Number.isFinite(parsed) ? parsed : Date.now();
|
|
13052
13052
|
};
|
|
13053
|
-
var commit = "
|
|
13054
|
-
var circleFlagsCommit = "
|
|
13053
|
+
var commit = "7e22a7513672e75f95a9c53c54a8b8d51a76fcc2" ;
|
|
13054
|
+
var circleFlagsCommit = "85ab1fc0f04e6404768db89a27b2fb5bc1118ea4" ;
|
|
13055
13055
|
var builtAt = parseBuiltAt(
|
|
13056
|
-
"
|
|
13056
|
+
"1768394565054"
|
|
13057
13057
|
);
|
|
13058
13058
|
var buildMeta = {
|
|
13059
13059
|
version: package_default.version,
|
package/package.json
CHANGED