Skip to content

Commit 4022b51

Browse files
authored
fix: React 19 compatibility and standardize package manager (#13)
* fix: React 19 compatibility - use camelCase SVG attributes and fix NaN height Fixes #11 - Convert clip-path to clipPath (4 files) - Convert stroke-width to strokeWidth (2 files) - Convert fill-rule/clip-rule to fillRule/clipRule in CSS styles (3 files) - Convert fill-rule/clip-rule to fillRule/clipRule in path attributes (2 files) - Fix height calculation to prevent NaN values when width is provided These changes maintain full backward compatibility with React >=16 while fixing console errors in React 19 and Next.js 15. Affected files: - src/icons/flat/components/Visa.tsx - src/icons/flat/components/Mastercard.tsx - src/icons/logo-border/components/Visa.tsx - src/icons/logo-border/components/Mastercard.tsx - src/icons/mono-outline/components/Hiper.tsx - src/icons/mono-outline/components/Swish.tsx - src/icons/mono/components/Visa.tsx - src/icons/mono/components/Mastercard.tsx - src/icons/mono/components/Swish.tsx - src/index.tsx * chore: remove unused package manager lock files Fixes #12 - Remove package-lock.json and yarn.lock - Add npm and yarn lock files to .gitignore - Regenerate pnpm-lock.yaml with current pnpm version (v10.18.0) - Document pnpm as the official package manager in Contributing section This project uses pnpm (as seen in CI/CD workflows). Keeping only pnpm-lock.yaml ensures consistency between local development and CI/CD. * fix: update style rules to use kebab-case for SVG attributes --------- Co-authored-by: Cody Bromley <codybrom@users.noreply.github.com>
1 parent c16d2fa commit 4022b51

File tree

11 files changed

+50
-27132
lines changed

11 files changed

+50
-27132
lines changed

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@ dist/
88
storybook-static
99
docs-build/
1010
docs/
11+
12+
# Lock files for other package managers (pnpm is used)
13+
package-lock.json
14+
yarn.lock

README.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# React SVG Card Payment Icons
1+
# React SVG Card Payment Icons
22

33
[![npm](https://img.shields.io/npm/v/react-svg-credit-card-payment-icons)](https://www.npmjs.com/package/react-svg-credit-card-payment-icons)
44
[![TypeScript](https://badgen.net/npm/types/env-var)](http://www.typescriptlang.org/)
@@ -9,7 +9,7 @@
99
[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/marcovoliveira)
1010

1111
# SVG Credit Card & Payment Icons: 6 Styles, 80 Icons for React ⚛️
12-
A collection of SVG based credit card logo icons.
12+
A collection of SVG based credit card logo icons.
1313
React componnent with Typescript support.
1414

1515
### [Live Demo](https://marcovoliveira.github.io/react-svg-credit-card-payment-icons/?path=/docs/payment-cards--docs)
@@ -21,9 +21,16 @@ React componnent with Typescript support.
2121
1) Install this package:
2222
```bash
2323
npm install react-svg-credit-card-payment-icons
24-
# or
24+
```
25+
or
26+
```bash
2527
yarn add react-svg-credit-card-payment-icons
2628
```
29+
or
30+
```bash
31+
pnpm add react-svg-credit-card-payment-icons
32+
```
33+
2734

2835
### 📦 Usage
2936

@@ -146,7 +153,7 @@ Images from [`aaronfagan/svg-credit-card-payment-icons`](https://github.com/aaro
146153

147154
### Available `formats`:
148155

149-
If the format is not specified, the default setting is flat.
156+
If the format is not specified, the default setting is flat.
150157

151158
|Format |Image
152159
|--- |---
@@ -162,4 +169,27 @@ If the format is not specified, the default setting is flat.
162169

163170
* The component also allows all the properties (props) of the Svg component, including attributes like style.
164171

165-
* If an invalid type is provided, the default setting is generic.
172+
* If an invalid type is provided, the default setting is generic.
173+
174+
## Contributing
175+
176+
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
177+
178+
### Development Setup
179+
180+
This project uses [pnpm](https://pnpm.io/) as its package manager for local development and CI/CD.
181+
182+
```bash
183+
# Install pnpm if you don't have it
184+
npm install -g pnpm
185+
186+
# Install dependencies
187+
pnpm install
188+
189+
# Run linting
190+
pnpm run lint
191+
192+
# Build the project
193+
pnpm run build
194+
```
195+

0 commit comments

Comments
 (0)