@mingcute/react 1.4.0 → 1.4.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 +83 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://www.mingcute.com/">
|
|
3
|
+
<img src="https://raw.githubusercontent.com/mingcute-design/mingcute-docs/main/images/mingcute_react.png" alt="MingCute icon library for React applications.">
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
Implementation of the MingCute Icons library for React applications.
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<a href="https://www.mingcute.com/">Browse all icons at MingCute.com →</a>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
[](https://www.npmjs.com/package/@mingcute/react)
|
|
16
|
+
[](https://github.com/Richard9394/MingCute/stargazers)
|
|
17
|
+
[](https://www.npmjs.com/package/mingcute_icon)
|
|
18
|
+
[](https://x.com/MingCute_icon)
|
|
19
|
+
|
|
20
|
+
# MingCute Icons for React
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @mingcute/react
|
|
26
|
+
# or
|
|
27
|
+
yarn add @mingcute/react
|
|
28
|
+
# or
|
|
29
|
+
pnpm add @mingcute/react
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
### Basic Usage
|
|
35
|
+
|
|
36
|
+
Import icons from `@mingcute/react`.
|
|
37
|
+
|
|
38
|
+
```jsx
|
|
39
|
+
import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/react';
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
{/* Default: 24px size and currentColor */}
|
|
45
|
+
<MingcuteFill />
|
|
46
|
+
|
|
47
|
+
{/* Custom size and color */}
|
|
48
|
+
<Home1Line size={32} color="#007AFF" />
|
|
49
|
+
|
|
50
|
+
{/* Inherits standard SVG props */}
|
|
51
|
+
<SearchLine opacity={0.5} />
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Props
|
|
58
|
+
|
|
59
|
+
All icons accept standard SVG attributes and the following optional props:
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Default | Description |
|
|
62
|
+
| --- | --- | --- | --- |
|
|
63
|
+
| `size` | `number \| string` | `24` | The size of the icon (width and height). |
|
|
64
|
+
| `color` | `string` | `currentColor` | The color of the icon. |
|
|
65
|
+
|
|
66
|
+
### Color Control
|
|
67
|
+
|
|
68
|
+
You can control the icon color using the `color` prop or CSS `color` property.
|
|
69
|
+
The icons use `currentColor` by default, so they will inherit the text color of their parent element.
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
// Use color prop
|
|
73
|
+
<MingcuteFill color="red" />
|
|
74
|
+
|
|
75
|
+
// Use CSS inheritance
|
|
76
|
+
<div style={{ color: 'blue' }}>
|
|
77
|
+
<MingcuteFill />
|
|
78
|
+
</div>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
[Apache-2.0 License](https://github.com/mingcute-design/mingcute-icons/blob/main/LICENSE)
|