@jjohnson/icon-web-components NPM

SVG Icon Web Components

A selection of svg icons for use in plain vanilla JS projects. This isn't intended to be an exhaustive collection of icons, but only the most commonly used ones for my personal projects. More may be added as they are needed.

Usage

Install with NPM

npm i @jjohnson/icon-web-components

Import the icons into your main javascript file

// main.js
import { defineAllIcons } from '@jjohnson/icon-web-components';

window.onload = () => {
  defineAllIcons();
};

Use the icons in your html

<!doctype html>
<html lang="en">
  <head>
    <style>
      /* Icons can be styled with css */
      .icon {
        display: block;
        fill: #0f0;
        height: 24px;
        stroke: #000;
        width: 24px;
      }
    </style>
    <script src="main.js" module defer></script>
  </head>
  <body>
    <icon-github class="icon"></icon-github>
  </body>
</html>

The icons also support the following attributes: | Attribute | Unit | Description | |-----------|---------------------|-----------------------------| | width | number, px, em, rem | Width of the icon | | height | number, px, em, rem | Height of the icon | | stroke | hex, rgba, hsl, none | Color of the icon's outline | | fill | hex, rgba, hsl, none | Color of the icon's fill |

Example:

<icon-github
  width="32px"
  height="32px"
  stroke="none"
  fill="#800080"
></icon-github>

Extending the Library

To create a custom icon, override the Icon base class and pass your svg markup into the constructor's super method.

import { Icon } from '@jjohnson/icon-web-components';

class IconCustom extends Icon {
  constructor() {
    super(`
      <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-width="2" d="M8.737 8.737a21.49 21.49 0 0 1 3.308-2.724m0 0c3.063-2.026 5.99-2.641 7.331-1.3 1.827 1.828.026 6.591-4.023 10.64-4.049 4.049-8.812 5.85-10.64 4.023-1.33-1.33-.736-4.218 1.249-7.253m6.083-6.11c-3.063-2.026-5.99-2.641-7.331-1.3-1.827 1.828-.026 6.591 4.023 10.64m3.308-9.34a21.497 21.497 0 0 1 3.308 2.724m2.775 3.386c1.985 3.035 2.579 5.923 1.248 7.253-1.336 1.337-4.245.732-7.295-1.275M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
      </svg>
    `);
  }
}

Then instantiate it using the defineCustomIcon function

import { defineCustomIcon } from `@jjohnson/icon-web-components`;
import { IconCustom } from './IconCustom.js';

defineCustomIcon('icon-custom', IconCustom);

The icon becomes available for use in html