@sankyu/solid-circle-flags 0.1.1-beta.2 → 0.1.5-beta.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 +56 -26
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
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/solid-circle-flags" width="120" height="120" />
|
|
4
4
|
</a>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
# @sankyu/solid-circle-flags
|
|
10
10
|
|
|
11
|
-
[](https://www.npmjs.com/package/@sankyu/solid-circle-flags) [](https://bundlephobia.com/package/@sankyu/solid-circle-flags) [](https://www.npmjs.com/package/@sankyu/solid-circle-flags) [](https://www.npmjs.com/package/@sankyu/solid-circle-flags) [](https://bundlephobia.com/package/@sankyu/solid-circle-flags) [](https://www.npmjs.com/package/@sankyu/solid-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/solid-circle-flags) [](./LICENSE)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
English Version
|
|
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
|
|
|
@@ -39,6 +39,10 @@ This library provides **400+ circular SVG flag components** for Solid.js with **
|
|
|
39
39
|
|
|
40
40
|
Perfect for applications that need fast, crisp country flags without external image requests.
|
|
41
41
|
|
|
42
|
+
## :world_map: Live Demo
|
|
43
|
+
|
|
44
|
+
[](https://stackblitz.com/fork/github/SanKyu-Lab/circle-flags-ui/tree/main/examples/example-solid?file=src%2FApp.tsx&terminal=dev)
|
|
45
|
+
|
|
42
46
|
## ✨ Key Features
|
|
43
47
|
|
|
44
48
|
- 🎯 **Tree-shakable** - Only bundle the flags you use
|
|
@@ -61,6 +65,25 @@ yarn add @sankyu/solid-circle-flags
|
|
|
61
65
|
bun add @sankyu/solid-circle-flags
|
|
62
66
|
```
|
|
63
67
|
|
|
68
|
+
### 🤖 Are you Vibe Coding?
|
|
69
|
+
|
|
70
|
+
Copy this into your AI Agent (Claude Code, Codex, Cursor ..like) to optimize your flags:
|
|
71
|
+
|
|
72
|
+
<details>
|
|
73
|
+
<summary>AI Agent Prompts</summary>
|
|
74
|
+
|
|
75
|
+
```txt
|
|
76
|
+
Act as an expert Web Engineer. Reference: https://react-circle-flags.js.org/llms.txt & https://react-circle-flags.js.org/llms-small.txt
|
|
77
|
+
|
|
78
|
+
1. **Audit my project** to find any flag usage:
|
|
79
|
+
- Raw `<img>` tags pointing to `HatScripts/circle-flags` URLs.
|
|
80
|
+
- Legacy `react-circle-flags` library usage.
|
|
81
|
+
2. **Propose a migration** to the appropriate `@sankyu/{framework}-circle-flags` package based on my current framework (React/Vue/Solid).
|
|
82
|
+
3. **Optimize for Tree-shaking**: Replace generic `CircleFlag` components or raw tags with **named imports** (e.g., `import { Us } from '...'`) as per the docs.
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
</details>
|
|
86
|
+
|
|
64
87
|
## 🚀 Usage
|
|
65
88
|
|
|
66
89
|
### Import individual flags (Recommended)
|
|
@@ -79,20 +102,20 @@ export default function App() {
|
|
|
79
102
|
}
|
|
80
103
|
```
|
|
81
104
|
|
|
82
|
-
### Using
|
|
105
|
+
### Using `FlagSizes` presets
|
|
83
106
|
|
|
84
107
|
```tsx
|
|
85
|
-
import { FlagJp, FlagDe, FlagFr } from '@sankyu/solid-circle-flags'
|
|
108
|
+
import { FlagJp, FlagDe, FlagFr, FlagSizes } from '@sankyu/solid-circle-flags'
|
|
86
109
|
|
|
87
110
|
export default function App() {
|
|
88
111
|
return (
|
|
89
112
|
<div>
|
|
90
|
-
<FlagJp
|
|
91
|
-
{/* 16px */}
|
|
92
|
-
<FlagDe size="md" />
|
|
113
|
+
<FlagJp width={FlagSizes.sm} height={FlagSizes.sm} />
|
|
93
114
|
{/* 24px */}
|
|
94
|
-
<
|
|
115
|
+
<FlagDe width={FlagSizes.md} height={FlagSizes.md} />
|
|
95
116
|
{/* 32px */}
|
|
117
|
+
<FlagFr width={FlagSizes.lg} height={FlagSizes.lg} />
|
|
118
|
+
{/* 48px */}
|
|
96
119
|
</div>
|
|
97
120
|
)
|
|
98
121
|
}
|
|
@@ -101,7 +124,7 @@ export default function App() {
|
|
|
101
124
|
### Dynamic flag selection
|
|
102
125
|
|
|
103
126
|
```tsx
|
|
104
|
-
import { createSignal
|
|
127
|
+
import { createSignal } from 'solid-js'
|
|
105
128
|
import { DynamicFlag } from '@sankyu/solid-circle-flags'
|
|
106
129
|
|
|
107
130
|
export default function App() {
|
|
@@ -116,27 +139,34 @@ export default function App() {
|
|
|
116
139
|
}
|
|
117
140
|
```
|
|
118
141
|
|
|
142
|
+
> [!CAUTION]
|
|
143
|
+
> `DynamicFlag` is offline-first and renders runtime codes synchronously, but it bundles all
|
|
144
|
+
> 400+ flags (~600 KB, no tree-shaking). Prefer named imports when possible. If runtime codes
|
|
145
|
+
> are bounded, use a finite named-import map.
|
|
146
|
+
|
|
119
147
|
## 📚 API
|
|
120
148
|
|
|
121
149
|
### Props
|
|
122
150
|
|
|
123
|
-
| Prop
|
|
124
|
-
|
|
|
125
|
-
| `width`
|
|
126
|
-
| `height`
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
151
|
+
| Prop | Type | Default | Description |
|
|
152
|
+
| ----------- | ------------------ | ------- | ---------------------------- |
|
|
153
|
+
| `width` | `number \| string` | `48` | Width of the flag |
|
|
154
|
+
| `height` | `number \| string` | `48` | Height of the flag |
|
|
155
|
+
| `title` | `string` | code | Accessible title for the SVG |
|
|
156
|
+
| `class` | `string` | - | Standard Solid class binding |
|
|
157
|
+
| `className` | `string` | - | Optional className alias |
|
|
129
158
|
|
|
130
159
|
### Size Presets
|
|
131
160
|
|
|
132
|
-
| Size
|
|
133
|
-
|
|
|
134
|
-
| `xs`
|
|
135
|
-
| `sm`
|
|
136
|
-
| `md`
|
|
137
|
-
| `lg`
|
|
138
|
-
| `xl`
|
|
139
|
-
| `
|
|
161
|
+
| Size | Pixels |
|
|
162
|
+
| ------ | ------ |
|
|
163
|
+
| `xs` | 16px |
|
|
164
|
+
| `sm` | 24px |
|
|
165
|
+
| `md` | 32px |
|
|
166
|
+
| `lg` | 48px |
|
|
167
|
+
| `xl` | 64px |
|
|
168
|
+
| `xxl` | 96px |
|
|
169
|
+
| `xxxl` | 128px |
|
|
140
170
|
|
|
141
171
|
### Build Meta Information
|
|
142
172
|
|
|
@@ -211,7 +241,7 @@ import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags'
|
|
|
211
241
|
|
|
212
242
|
## 🤝 Contributing
|
|
213
243
|
|
|
214
|
-
Please see [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.
|
|
244
|
+
Please see [CONTRIBUTING.md](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/CONTRIBUTING.md) for contribution guidelines.
|
|
215
245
|
|
|
216
246
|
## 📄 License
|
|
217
247
|
|