@jjohnson/icon-web-components

v1.0.1

Published

a year ago

An SVG icon web component libary

0High
0Medium
0Low

jimjohnsondev

web coponent custom element icon SVG

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

<icon-custom></icon-custom>

Available Icons

| Icon | Custom Element | | ---------------------------------------------------- | -------------------- | | | <icon-angle-down> | | | <icon-angle-up> | | | <icon-angle-left> | | | <icon-angle-right> | | | <icon-bars> | | | <icon-angle-close> | | | <icon-github> | | | <icon-linkedin> |

Building the Library

Clone this Github repo and use npm to build the icons:

npm run build

To preview the build and run visual tests:

npm run dev

License

Free and open source under the MIT license. See license.txt for details.

Author

This library is written and maintained by Jim Johnson

The svg icons are provided by Flowbite.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme