zensen-icon

An icon component for LitElement.

Features

• Provides an interface for icon sets
• Provides an SVG wrapper around the icon's contents
• Users can easily apply CSS styles to the component to customize it

Install

Using npm:

$ npm install @zensen/icon

Using yarn:

$ yarn add @zensen/icon

API

This component needs to be provided a data-source to pull data from. An icon definition requires a viewBox property to define the SVG's viewBox, and an src property to define the markup that will be injected into the <svg> tag:

NOTE: The actual <svg> tag is not included in src as it will be provided by the component

import { svg } from 'lit-element'

const line = {
  viewBox: '0 0 200 500',
  src: svg`
    <line x1="0" y1="0" x2="200" y2="200" style="stroke-width:2"/>
  `,
}

Next, we need to encapsulate our icon definition within another object that will serve as our icon set:

const demo = { line }

If we had any other icon definitions that we'd want to associate with this set, then we'd also include them in the demo set above.

Finally, we need to import the zen-icon component's class, ZenIcon, and assign a dictionary of icon sets like so:

import { ZenIcon } from '@zensen/icon'

ZenIcon.sets = { demo }

ZenIcon supports multiple icon sets in case developers are using different icons from multiple 3rd-party sources.