Read Me | Using the Components | <sgnw-components /> | <fsw-components /> | Change Log

Using the Sutton SignWriting Web Components

Script tag

Put tags similar to this in HEAD

<script type="module" src="https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/dist/sgnw-components/sgnw-components.esm.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/dist/sgnw-components/sgnw-components.css"/>

Then use the elements anywhere in your template, JSX, html etc

ES Modules

Put script tag in HEAD

<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/loader/index.es2017.mjs';
  defineCustomElements();
</script>

Then use the elements anywhere in your template, JSX, html etc

Node modules

• Run npm install @sutton-signwriting/sgnw-components --save
• Put a script tag similar to this <script src='node_modules/@sutton-signwriting/sgnw-components/dist/sgnw-components.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @sutton-signwriting/sgnw-components --save
• Add an import to the npm packages import '@sutton-signwriting/sgnw-components';
• Then you can use the element anywhere in your template, JSX, html etc

Sutton SignWriting Web Components

<sgnw-components /> use SignWriting in Unicode (SWU) characters.

• sgnw-symbol with additional examples
• sgnw-sign with additional examples
• sgnw-vp with additional examples
• sgnw-button with additional examples
• sgnw-palette-symbol with additional examples
• sgnw-palette with additional examples
• sgnw-signbox with additional examples

Formal SignWriting Web Components

<fsw-components /> use Formal SignWriting in ASCII (FSW) characters.

• fsw-symbol with additional examples
• fsw-sign with additional examples
• fsw-vp with additional examples
• fsw-button with additional examples
• fsw-palette-symbol with additional examples
• fsw-palette with additional examples
• fsw-signbox with additional examples