<pd-icon>

This webcomponent follows the open-wc recommendation.

Installation

npm install @progressive-development/pd-icon

Usage

Using the Custom Element

To use the component directly in your HTML

<script type="module">
  import '@progressive-development/pd-icon/pd-icon';
</script>

<pd-icon></pd-icon>

Importing for Programmatic Use

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

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:

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:

npm run start

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

Building the Component

To build the component for production, run:

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:

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:

npm run lint

To automatically fix linting and formatting errors, run:

npm run format

Testing with Vitest

To execute a single test run:

npm run test

To run the tests in interactive watch mode, run:

npm run test:watch

Demoing with Storybook

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

npm run storybook

To build a production version of Storybook, run:

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.