@dv4all/icons NPM

Icons as web components

THIS LIBRARY IS USED TO TEST SVG ICONS AS WEB COMPONENTS.

This module contains SVG icons as web components. It is a part of @dv4all monorepo created to test web components implementation as NPM packages (modules), how LERNA works and how custom components can be applied with React (NextJS), Vue (NuxtJS), Webpack and HTML5.

This module is part of monorepo dv4all-wcp.

There are demos of each implementation in the demos folder of the monorepo.

Usage

install package from NPM

# install npm packages
npm install @dv4all/icons

HTML5 implementation

Import cjs version of the library () file in the header of html file. See demos/html-demo/icons.html for an example of implementation.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="img/favicon.png" sizes="16x16" type="image/png" />
    <title>Icons - web components</title>
    <!--IMPORT @dv4all PACKAGES to register customElements -->
    <script src="node_modules/@dv4all/icons/lib/dv4icons.cjs.js"></script>
    <!-- END IMPORT CUSTOM COMPONENTS-->
    <!-- OPTIONAL: IMPORT CSS VARIABLES FOR CUSTOM STYLING OF COMPONENTS -->
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <!--EXAMPLE ICON CUSTOM WEB COMPONENT -->
    <dv4-icon-cancel-circle class="dv4-icon" title="My new title" />
  </body>
</html>

For more details see demos/html-demo.

NextJS implementation

NextJS supports SSR. On the server side customElements are not supported. You need to ensure that icons library is loaded only at the client side. I achieved this in the demo by dynamically importing web components in the app template in the React component life cycle method ComponentDidMount.

export default class MyApp extends App {
  // IMPORT web components on CLIENT SIDE
  // othewise NextJS will try to render it
  // on the server and it will faile with error
  // about customElements.define ... undefined
  componentDidMount() {
    console.log("MyApp.didMount...");
    import("@dv4all/icons").then(d => {
      console.log("imported dv4icons...", d);
    });
  }
  // ... OTHER CODE ...
}

For more details see demos/next-demo.

NuxtJS implementation

In the NuxtJS I added web components as plugins and set SSR flag to false. This was sufficient. Nuxt has also a component <client-only>...</client-only> that can be used to wrap markup that should only be rendered on the client side.

extract from nuxt.config.js

  // .... OTHER CODE
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '@/plugins/dv4-icons.js', ssr: false }
  ],
  // .... OTHER CODE

Content dv4-icons.js is simple import of npm package @dv4all/icons

// import NPM package
import "@dv4all/loaders";

For more details see demos/nuxt-demo

Icons

arrow-right: arrow-right svg icon as custom web component
backward: backward svg icon as custom web component
camera: camera svg icon as custom web component
cancel-circle: cancel-circle svg icon as custom web component
checkmark: checkmark svg icon as custom web component
circle-right: circle-right svg icon as custom web component
cog: cog svg icon as custom web component
cogs: cogs svg icon as custom web component
connection: connection svg icon as custom web component
cross: cross svg icon as custom web component
embed2: embed svg icon as custom web component
enter: enter svg icon as custom web component
equalizer: equalizer svg icon as custom web component
exit: exit svg icon as custom web component
flag: flag svg icon as custom web component
folder: folder svg icon as custom web component. One element for open and closed folder icons
forward: forward svg icon as custom web component.
home: home svg icon as custom web component.
image: image svg icon as custom web component.
info: info svg icon as custom web component.
key: key svg icon as custom web component.
map: map svg icon as custom web component.
menu: menu svg icon as custom web component.
mic: mic svg icon as custom web component.
next: next svg icon as custom web component.
notification: notification svg icon as custom web component.
paint-format: paint-format svg icon as custom web component.
paragraph: paragraph svg icon as custom web component.
pause: pause svg icon as custom web component.
pencil: pencil svg icon as custom web component.
phone: phone svg icon as custom web component.
pie-chart: pie-chart svg icon as custom web component.
play: play svg icon as custom web component.
previous: previous svg icon as custom web component.
share: share svg icon as custom web component.
stack: stack svg icon as custom web component.
star: star svg icon as custom web component.
stop: stop svg icon as custom web component.
switch: switch svg icon as custom web component.
tree: tree svg icon as custom web component.
trophy: trophy svg icon as custom web component.
video-camera: video-camera svg icon as custom web component.
warning: warning svg icon as custom web component.
wrench: wrench svg icon as custom web component.