A next button icon.
npm i -S @substrate-system/arrow-next[!IMPORTANT]
This depends on a CSS classvisually-hidden. See Accessible Icon Buttons. Install@substrate-system/css-utilfor help.
This exposes ESM and common JS via package.json exports field.
import '@substrate-system/arrow-next'require('@substrate-system/arrow-next')This depends on a CSS definition for .visually-hidden. Install @substrate-system/css-util:
npm i -S @substrate-system/css-utilimport '@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'This calls the global function customElements.define. Just import, then use
the tag in your HTML.
import '@substrate-system/arrow-next'<div>
<arrow-next></arrow-next>
</div>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.
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<head>
<link rel="stylesheet" href="./arrow-next.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./arrow-next.min.js"></script>
</body>