Swiss Cross NPM Package

Overview

The Swiss Cross NPM package is a lightweight React component for rendering a Swiss Cross Flag with customizable size, colors and border radius. It is built with TypeScript and supports both CommonJS and ESM module formats, making it versatile for various JavaScript environments.

Motivation

I created this package to learn how to build and publish an NPM package while also creating a component that I can use in my personal and my developer portfolios. I wanted a simple and reusable way to display the Swiss cross symbol in my projects, and this package serves that purpose while also helping me understand the NPM ecosystem better.

See the package on NPM and the source code on GitHub

You can find the package live in action on my personal portfolio and this site.

Installation

BashCopy
1npm install swiss-cross
2# or
3pnpm add swiss-cross
4# or
5yarn add swiss-cross

Usage

JavaScriptCopy
1import { SwissCross } from 'swiss-cross'
2
3function App() {
4    return (
5        <div>
6            {/* Basic usage */}
7            <SwissCross />
8
9            {/* Custom size */}
10            <SwissCross size={40} />
11
12            {/* Custom colors */}
13            <SwissCross backgroundColor="#CC0000" crossColor="#FFFFFF" />
14
15            {/* With border radius */}
16            <SwissCross
17                size={60}
18                borderRadius="round"
19                backgroundColor="#FF0000"
20            />
21
22            {/* With custom CSS class */}
23            <SwissCross className="my-swiss-cross" size="3rem" />
24        </div>
25    )
26}

This will render:

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. See the CONTRIBUTING file for details.

Local Development

To run the project locally, follow these steps:

1. Clone the repository:

   BashCopy
   1git clone https://github.com/Fx64b/swiss-cross.git
   2cd swiss-cross

2. Install dependencies:

   BashCopy
   pnpm install

3. Start the development mode:

   BashCopy
   pnpm dev

4. Run Tests:

   BashCopy
   pnpm test:watch

5. Test Coverage:

   BashCopy
   pnpm test:coverage

6. Build the package:

   BashCopy
   pnpm build

License

This project is licensed under the MIT License - see the LICENSE file for details.