@mingcute/react 1.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.
Files changed (2) hide show
  1. package/README.md +118 -0
  2. package/package.json +54 -0
package/README.md ADDED
@@ -0,0 +1,118 @@
1
+ <p align="center">
2
+ <a href="https://www.mingcute.com/">
3
+ <img src="https://github.com/Richard9394/MingCute/raw/main//update/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
+ # MingCute Icons for React
16
+
17
+ A high-performance, tree-shakable React icon library generated from **MingCute** design system. Built with TypeScript and optimized for modern frameworks like Next.js, Vite, and Remix.
18
+
19
+ ------
20
+
21
+ ## Installation
22
+
23
+ Bash
24
+
25
+ ```
26
+ # Using npm
27
+ npm install @mingcute/react
28
+
29
+ # Using yarn
30
+ yarn add @mingcute/react
31
+
32
+ # Using pnpm
33
+ pnpm add @mingcute/react
34
+ ```
35
+
36
+ ------
37
+
38
+ ## Usage
39
+
40
+ ### 1. Basic Example
41
+
42
+ Import icons as standard React components. All icons accept `size` and `color` props.
43
+
44
+ TypeScript
45
+
46
+ ```
47
+ import { BankFill, HomeLine, SearchLine } from 'mingcute-icon-library';
48
+
49
+ function App() {
50
+ return (
51
+ <div className="container">
52
+ {/* Default: 24px size and currentColor */}
53
+ <BankFill />
54
+
55
+ {/* Custom size and color */}
56
+ <HomeLine size={32} color="#3b82f6" />
57
+
58
+ {/* Inherits standard SVG props */}
59
+ <SearchLine opacity={0.5} />
60
+ </div>
61
+ );
62
+ }
63
+ ```
64
+
65
+ ### 2. Styling with Tailwind CSS
66
+
67
+ Since the library spreads `props` to the underlying SVG, you can use Utility Classes directly.
68
+
69
+ TypeScript
70
+
71
+ ```
72
+ import { UserLine } from 'mingcute-icon-library';
73
+
74
+ export default function Profile() {
75
+ return (
76
+ <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
77
+ <UserLine className="w-5 h-5 animate-pulse" />
78
+ <span>Profile</span>
79
+ </button>
80
+ );
81
+ }
82
+ ```
83
+
84
+ ------
85
+
86
+ ## Optimization (Deep Imports)
87
+
88
+ While the main entry point supports tree-shaking, you can bypass index files entirely for absolute minimum bundle sizes by importing individual icons.
89
+
90
+ TypeScript
91
+
92
+ ```
93
+ // This ensures that only the code for BankFill is processed
94
+ import BankFill from 'mingcute-icon-library/icons/BankFill';
95
+
96
+ function MinimalPage() {
97
+ return <BankFill />;
98
+ }
99
+ ```
100
+
101
+ ------
102
+
103
+ ## Props
104
+
105
+ All components extend `React.SVGProps<SVGSVGElement>`.
106
+
107
+ | **Prop** | **Type** | **Default** | **Description** |
108
+ | ----------- | ----------------- | ---------------- | ---------------------------------------------- |
109
+ | `size` | `number | string` | `24` | Sets width and height of the icon |
110
+ | `color` | `string` | `"currentColor"` | Sets the color |
111
+ | `className` | `string` | - | Standard React className for styling |
112
+ | `...props` | `SVGProps` | - | Any valid SVG attribute (title, opacity, etc.) |
113
+
114
+ ------
115
+
116
+ ## License
117
+
118
+ [Apache-2.0 License](https://github.com/Richard9394/MingCute/blob/main/LICENSE) © MingCute
package/package.json ADDED
@@ -0,0 +1,54 @@
1
+ {
2
+ "name": "@mingcute/react",
3
+ "description": "MingCute is a set of simple and exquisite open-source icon library for React applications.",
4
+ "version": "1.0.0",
5
+ "license": "Apache-2.0 license",
6
+ "author": "Richard",
7
+ "homepage": "https://www.mingcute.com/",
8
+ "bugs": "https://github.com/Richard9394/MingCute/issues",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/Richard9394/MingCute.git"
12
+ },
13
+ "keywords": [
14
+ "MingCute",
15
+ "React",
16
+ "Icons",
17
+ "Icon",
18
+ "Icon library",
19
+ "SVG"
20
+ ],
21
+ "main": "./dist/index.js",
22
+ "module": "./dist/index.mjs",
23
+ "types": "./dist/index.d.ts",
24
+ "sideEffects": false,
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/index.d.ts",
28
+ "import": "./dist/index.mjs",
29
+ "require": "./dist/index.js"
30
+ },
31
+ "./icons/*": {
32
+ "types": "./dist/icons/*.d.ts",
33
+ "import": "./dist/icons/*.mjs",
34
+ "require": "./dist/icons/*.js"
35
+ }
36
+ },
37
+ "scripts": {
38
+ "clean": "rimraf dist src",
39
+ "generate": "svgr --out-dir src --template template.js --typescript -- icons && node generate-index.js",
40
+ "build": "npm run clean && npm run generate && tsup src/*.tsx --format cjs,esm --dts --clean --minify --no-splitting --outDir dist && node finalize.js"
41
+ },
42
+ "peerDependencies": {
43
+ "react": ">=16.8.0"
44
+ },
45
+ "devDependencies": {
46
+ "@svgr/cli": "^8.1.0",
47
+ "@types/react": "^18.0.0",
48
+ "react": "^19.2.3",
49
+ "react-dom": "^19.2.3",
50
+ "rimraf": "^5.0.0",
51
+ "tsup": "^8.0.0",
52
+ "typescript": "^5.0.0"
53
+ }
54
+ }