@zcorvus/icons-web

Web Components for ZCorvus icons.

Browse all available icons at icons.zcorvus.com.

Installation

pnpm add @zcorvus/icons-web

Global Element

Register the global dynamic element:

import '@zcorvus/icons-web/register';

<z-icon type="mina" name="search"></z-icon>
<z-icon type="mina" name="search" variant="solid"></z-icon>

z-icon prioritizes ergonomics and can include all supported packs.

Pack Elements

Register only the pack or variant you need:

import '@zcorvus/icons-web/register-mina';
import '@zcorvus/icons-web/register-mina-solid';

<z-mina name="search"></z-mina>
<z-mina-solid name="search"></z-mina-solid>

Pack entries avoid loading unrelated packs, but still load the selected pack/variant.

Sprite Elements

Use sprite entries when many icons are repeated on the same page.

import '@zcorvus/icons-web/register-mina-sprite';
import '@zcorvus/icons-web/register-mina-solid-sprite';

<z-mina-sprite name="search" size="44"></z-mina-sprite>
<z-mina-solid-sprite name="search" size="44"></z-mina-solid-sprite>

The sprite entry injects one hidden inline SVG sprite and each icon renders a lightweight <use> reference.

If you do not need the Web Component layer, you can also use the external sprite file generated by @zcorvus/icons. The sprite must be served from the same origin as the page; browsers block cross-origin <use> references in many cases.

<svg width="44" height="44" aria-hidden="true">
  <use href="/packages/icons/dist/sprites/mina.svg#mina-search"></use>
</svg>

For CDN usage, prefer @zcorvus/icons-web/register-*-sprite, because it injects the sprite inline.

Custom Element

Use createZIconElement when you only want a small icon registry.

import { createZIconElement } from '@zcorvus/icons-web/create';
import { MinaSearch, CoreSun } from '@zcorvus/icons/svg';

const AppIcon = createZIconElement({
  mina: {
    light: {
      search: MinaSearch,
    },
  },
  core: {
    light: {
      sun: CoreSun,
    },
  },
});

customElements.define('app-icon', AppIcon);

<app-icon type="mina" name="search"></app-icon>

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/@zcorvus/[email protected]/dist/register-mina.js/+esm"></script>

<z-mina name="search"></z-mina>

<script type="module" src="https://cdn.jsdelivr.net/npm/@zcorvus/[email protected]/dist/register-mina-sprite.js/+esm"></script>

<z-mina-sprite name="search" size="44"></z-mina-sprite>