wci-hero v1.0.7

wci-hero

Built from heroicons@1.0.6

460 icons / size: 63.4KB / gzip: 45.2KB

Preview

Online Page: https://cenfun.github.io/wci/#hero

Features

• Web Components
• Vector SVG Icons
• Customize Size/Color/Background/Radius
• High Compressed Bundle

Installation

npm install wci-hero

API Usage

import { icon, getIcon } from "wci-hero";

const $icon = document.createElement("wci-hero");
$icon.setAttribute("name", "[icon-name]");
$icon.setAttribute("size", "64px");
$icon.setAttribute("color", "#000");
document.body.appendChild($icon);

// get all icons
icon.list.forEach(item => {
    const ic = getIcon(item.id);
    console.log(ic)
});

Browser Usage

<script src="path-to/wci-hero/dist/wci-hero.js"></script>

<wci-hero name="[icon-name]"></wci-hero>
<wci-hero name="[icon-name]" size="64px" color="#000" style="background:#f5f5f5;"></wci-hero>

see preview/index.html

Optimizing and Compression with svg-to-symbol

• Optimized with svgo
• Removed repeated contents
• Compressed with lz-string