@substrate-system/arrow-next NPM

arrow next

A next button icon.

install

npm i -S @substrate-system/arrow-next

API

!IMPORTANT
This depends on a CSS class visually-hidden. See Accessible Icon Buttons. Install @substrate-system/css-util for help.

This exposes ESM and common JS via package.json exports field.

ESM

import '@substrate-system/arrow-next'

Common JS

require('@substrate-system/arrow-next')

CSS

This depends on a CSS definition for .visually-hidden. Install @substrate-system/css-util:

npm i -S @substrate-system/css-util

Import CSS

import '@substrate-system/css-util/visually-hidden'
import '@substrate-system/arrow-next/css'

Or minified:

import '@substrate-system/css-util/min/visually-hidden'
import '@substrate-system/arrow-next/css/min'

use

This calls the global function customElements.define. Just import, then use the tag in your HTML.

JS

import '@substrate-system/arrow-next'

HTML

<div>
    <arrow-next></arrow-next>
</div>

pre-built

This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/arrow-next/dist/index.min.js ./public/arrow-next.min.js
cp ./node_modules/@substrate-system/arrow-next/dist/style.min.css ./public/arrow-next.css

HTML

<head>
    <link rel="stylesheet" href="./arrow-next.css">
</head>
<body>
    <!-- ... -->
    <script type="module" src="./arrow-next.min.js"></script>
</body>

next icon button web component

0.0.2

11 months ago

0.0.1

11 months ago