ws-icon

This extension is simple UI web component:

Usage no npm install needed!

<script type="module">
  import wsIcon from 'https://cdn.skypack.dev/ws-icon';
</script>

README

ws-icon

This extension is simple UI web component:

  1. It allows customize icons by applying appropriate CSS-styles using selector (ws-icon svg).
  2. Icon is set by "src" attribute of the component (e.g. src="path/to/icon.svg#id). Path has to include reference to id of svg element from sprite (or id of specific shape/path).

Styled example

ws-icon

Usage

<ws-icon src="path/to/sprite.svg#iconId"></ws-icon>

<style>
  ws-icon svg{
    /*any styles here*/
  }
</style>

Development

Install dependencies:

npm install

For build extension:

npm run build

Sandbox

sandbox is environment for developing extension.

dev server is run on http://0.0.0.0:8080. It's just static server which looks on sandbox and build folders and returns assets.

For run dev server:

npm run dev:serve

index.js contains code that is necessary for extension usage and is built in sandbox/build/index.js file by webpack.

watch

For build extension and run watch task:

npm run build:watch

It's run build of extension, build of sandbox client and watches files inside src and sandbox folder, on any change - rebuilds all.