@godown/f7-icon v0.0.0

IconWrapper for F7.

Usage

HTML custom element

import "@godown/f7-icon";

<f7-icon name="airplane"></f7-icon>
<f7-icon icon="airplane"></f7-icon>

Template result of lit-html

import { html } from "lit"
import Airplane from "@godown/f7-icon/icons/airplane.js";

html`
  ${Airplane()}
  ${Airplane({ /* attributes */ })}
  <svg viewBox="${Airplane.viewBox}" width="1em" height="1em">
    ${Airplane.body}
  </svg>
`;

Rollup virtual plugin

Moving static imports to virtual directory.

import virtualIcon from "@godown/f7-icon/lib/rollup.js";

export default {
  input: "src/index.js",
  output: {
    dir: "output",
    format: "esm"
    virtualDirname: "virtual",
  },
  plugins: [
    virtualIcon(),
  ],
};

Type help

Node 16 Resolution

package.json exports

Triple-Slash Directives

/// <reference types="@godown/f7-icon/types/all.d.ts"/>

Icon size

Width and height defaults to 1em.

font-size or width and height can change the icon's size.

<f7-icon name="airplane" style="font-size:2em;"></f7-icon>
<f7-icon name="airplane" style="width:2em;height:2em;"></f7-icon>

Undefined element

import IconElement from "@godown/f7-icon/element.js";
customElements.define("my-icon", IconElement)

<my-icon name="airplane"></my-icon>

Specify the URL

The target module needs to export a function by default.

import F7Icon from "@godown/f7-icon";

const airplane = new F7Icon();
airplane.toURL = function (name: string) {
  return "specified URL or string";
};

Lazy loading

Disable lazy loading:

<f7-icon icon="house" loading="eager"></f7-icon>