Open index.html in a browser to see the output, edit the index.html file to use the different icon-library "backends".

The following .js files all define dk-icon, so only one of them can be included. The corresponding css file must also be included! (note that the exact same css link must be included in the shadow DOM!)

The implementation uses shadow DOM, but pokes a hole in it to allow the icon to be styled from the outside. This is done by defining a in the shadow DOM.

Not implemented:

• verification, and helpful error message, that the required css file is included.
• spin/size/fixedwith/etc. specifiers
  • for the fa4/fa6 icons this simply means adding the required fa-... class to the <i> element
  • for the material icons this means changing the font-variation css in the style-section of the shadow DOM (and potentially writing extra css for the rotation etc.)

The uicons.js file is a proof-of-concept for how to implement dk-icon using image files.

It would trivially be possible to name the tags in the different implementations something unique, and thus allow all of them to be included in the same page, however, mixing icons from different sources is probably not a good idea.

Finally, there is a significant amount of boilerplate code in the implementations (web-components require inheritance from HTMLElement only).

<dk-icon>

This webcomponent follows the open-wc recommendation.

Installation

yarn add dk-icon
npm i dk-icon

Usage

<script type="module">
  import 'dk-icon/dk-icon.js';
</script>

<dk-icon></dk-icon>

Linting and formatting

To scan the project for linting and formatting errors, run

yarn run lint
npm run lint

To automatically fix linting and formatting errors, run

yarn run format
npm run format

Testing with Web Test Runner

To execute a single test run:

yarn run test
npm run test

To run the tests in interactive watch mode run:

yarn run test:watch
npm run test:watch

Demoing with Storybook

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

yarn run storybook
npm run storybook

To build a production version of Storybook, run

yarn run storybook:build
npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

yarn run start
npm start

To run a local development server that serves the basic demo located in demo/index.html