@piyoppi/pixelart-element

The custom element by displaying pixelart beautifully

Sample page is here -> https://garakuta-toolbox.com/pixelart-element/

Install

npm install --save @piyoppi/pixelart-element

Usage

Import using a script tag

You can use a built file dist/pixelart-element.bundle.js in the package.

The pixelart-img element is also available on https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element/

You need to put a script tag after pixelart-img tag.

For example,

<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img>

<script src="https://cdn.jsdelivr.net/npm/@piyoppi/[email protected]/dist/pixelart-element.bundle.js"></script>

Import as a module

You can also import an element as a module.

// Import <pixelart-img> element
import { PixelartElement } from '@piyoppi/pixelart-element';

// Register custom element manually
customElements.define('pixelart-img', PixelartElement);

Display a pixelart.

<pixelart-img src="path/to/pixelart.png"></pixelart-img>

Scaling

<!-- Set scale -->
<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img>

<!-- Set width and height -->
<pixelart-img width="600" height="600" src="path/to/pixelart.png"></pixelart-img>