\

This webcomponent follows the open-wc recommendation.

Installation

``bash
npm install @progressive-development/pd-icon
`

Usage

$3

To use the component directly in your HTML

`bash



`

$3

If you want to programmatically use the PdIcon class or access other constants and utilities:

`bash
import { PdIcon } from '@progressive-development/pd-icon';

// Example: manually define the custom element
if (!customElements.get('pd-icon')) {
customElements.define('pd-icon', PdIcon);
}
`

You can also import additional exports like constants or utilities:

`bash
import { NAME_XYZ } from '@progressive-development/pd-icon';
console.log(NAME_XYZ);
`

Development

Local Development Server with Vite
To start a local development server for this component, run:

`bash
npm run start
`

This uses Vite and serves the project with hot module replacement.

Building the Component

To build the component for production, run:

`bash
npm run build
`

The output will be located in the dist/ folder, ready for publishing or consumption in other projects.

Previewing the Production Build

To preview the built component in a local server:

`bash
npm run preview
`

This runs a local server to inspect the production build in dist/.

Linting and Formatting

To scan the project for linting and formatting errors, run:

`bash
npm run lint
`

To automatically fix linting and formatting errors, run:

`bash
npm run format
`

Testing with Vitest

To execute a single test run:

`bash
npm run test
`

To run the tests in interactive watch mode, run:

`bash
npm run test:watch
`

Demoing with Storybook

To run a local instance of Storybook for your component, run:

`bash
npm run storybook
`

To build a production version of Storybook, run:

`bash
npm run build-storybook
``

Tooling Configurations

For most of the tools, the configuration is in the package.json to minimize the number of files in your project. If you customize the configuration a lot, you can consider moving them to individual files.