qingicon-react 2.0.0
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 +86 -0
- package/dist/index.cjs +11823 -0
- package/dist/index.d.ts +3916 -0
- package/dist/index.js +7887 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# QingIcon React
|
|
2
|
+
|
|
3
|
+
React components for [QingIcon](https://qingicon.com) — a standardized, neutral-style UI icon library with **3900+ icons **, covering cloud services, AI, and internet-system products. Free for personal and commercial use, designed by [Asorn](https://asorn.cn/).
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **3900+ icons in 34 categories** — a standardized, neutral-style set with uniform sizes and balanced visual weight, spanning cloud, AI, system UI and more.
|
|
8
|
+
- **One component per icon** — `QiCarDoor`, `QiHome`, `QiSearch` … fully typed and tree-shakeable.
|
|
9
|
+
- **Line (monochrome) icons** — every icon currently ships as a `line` variant (single-color, driven by `currentColor`). Fill variants are on the roadmap and will render once fill data is published.
|
|
10
|
+
- **Optical sizing** — keep stroke weight visually consistent across sizes via the `optical` prop.
|
|
11
|
+
- **Controllable stroke width** — set `strokeWidth` freely; it scales automatically when `optical` is on.
|
|
12
|
+
- **Color via `currentColor`** — inherits text color by default; override with `color`.
|
|
13
|
+
- **TypeScript ready** — ships `.d.ts` types; props are fully typed.
|
|
14
|
+
- **Zero runtime deps** — only `react` / `react-dom` as peer dependencies.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install qingicon-react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
> Requires `react` and `react-dom` >= 17 (peer dependencies).
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Import the named component you need:
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { QiCarDoor, QiHome, QiSearch } from "qingicon-react";
|
|
30
|
+
|
|
31
|
+
function Demo() {
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<QiCarDoor /> {/* 24px, inherits color */}
|
|
35
|
+
<QiCarDoor size={32} color="#e11d48" /> {/* 32px, red */}
|
|
36
|
+
<QiSearch strokeWidth={2} /> {/* stroke width 2 (default 1.5) */}
|
|
37
|
+
<QiCarDoor size={16} strokeWidth={2} optical /> {/* optical: auto-thicken at small size */}
|
|
38
|
+
</>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Generic `Icon` component
|
|
44
|
+
|
|
45
|
+
When you don't know the icon at build time, use the generic `Icon` and pass `name`:
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
import { Icon } from "qingicon-react";
|
|
49
|
+
|
|
50
|
+
<Icon name="car-door" size={28} color="#0ea5e9" />;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Raw icon data
|
|
54
|
+
|
|
55
|
+
The full icon dataset is also exported (id / name / keywords / svg):
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import { icons as qiIcons } from "qingicon-react"; // 3900+ entries: [{ id, name, keywords, svg }, ...]
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Props
|
|
62
|
+
|
|
63
|
+
Shared props for every named component and the generic `Icon`:
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Default | Description |
|
|
66
|
+
| --- | --- | --- | --- |
|
|
67
|
+
| `size` | `number \| string` | `24` | Width & height in px. |
|
|
68
|
+
| `color` | `string` | inherits (`currentColor`) | Stroke/fill color; passed through `currentColor`. |
|
|
69
|
+
| `variant` | `"line"` | `"line"` | Icon style. Only the `line` (monochrome) variant is available today; `fill*` values render empty until fill data is published. |
|
|
70
|
+
| `strokeWidth` | `number \| string` | `1.5` | Stroke width; auto-scaled by size when `optical` is on. |
|
|
71
|
+
| `optical` | `boolean` | `false` | Optical sizing — thickens strokes at small sizes to keep visual weight consistent. |
|
|
72
|
+
| `className` / `style` | — | — | Forwarded to the root `<svg>`. |
|
|
73
|
+
|
|
74
|
+
## Keywords
|
|
75
|
+
|
|
76
|
+
`icon` · `icons` · `svg` · `vector` · `react` · `react-component` · `react-icons` · `ui` · `ui-kit` · `icon-set` · `icon-library` · `line-icon` · `fill-icon` · `open-source` · `apache-2.0`
|
|
77
|
+
|
|
78
|
+
## Links & Credits
|
|
79
|
+
|
|
80
|
+
- **Website:** [qingicon.com](https://qingicon.com)
|
|
81
|
+
- **Author:** [Asorn](https://asorn.cn/)
|
|
82
|
+
- **Github:** [qingicon-open](https://github.com/asorn/qingicon-open)
|
|
83
|
+
- **Contact:** cjl294114430@gmail.com
|
|
84
|
+
- **License:** [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)
|
|
85
|
+
|
|
86
|
+
QingIcon is an open-source project. Contributions and feedback are welcome via the contact above.
|