🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Icon Tool

View in Pattern Lab

HTML Markup

<link href="/htwoo-core/images/fluent-ui-filled.svg" as="image" type="image/svg+xml" class="object-embedd pl-ico-filled"
    loading="lazy" rel="subresource">
<link href="/htwoo-core/images/fluent-ui-regular.svg" as="image" type="image/svg+xml" class="object-embedd pl-ico-regular"
    loading="lazy" rel="subresource">
<header class="pl-header"><a href="https://lab.n8d.studio/htwoo/">
    <img src="../../styleguide/images/htwoo-logo-vertical.jpg" class="pl-header-logo" alt="hTWOo Icon Logo"></a>
<div class="pl-header-title">Icon Tool</div>
</header>
<section role="header" class="pl-iconsearch">
    <div class="hoo-input-search">
        <svg class="hoo-icon icon-search">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-search">
            </use>
        </svg>
        <input class="hoo-input-text" type="search" placeholder="Search" >
    </div>
    <section class="pl-toolbar">
        <div class="pl-iconname">
        </div>
        <div class="pl-actions">
            <div class="pl-selection">
                <label class="hoo-label " for="toggle-97">Selected Icons</label>
                <div class="pl-selection-ctn" id="plOverViewTgl2">
                </div>
            </div>
            <div class="pl-action">
                <div class="pl-action-item pl-act-stylswtch">
                    <label class="hoo-label " for="toggle-97">Icon Style</label>
                    <div class="hoo-toggle">
                        <input type="checkbox" class="hoo-toggle-cb" name="pl-overview-toggle" id="toggle-85" >
                        <label for="toggle-85" class="hoo-toggle-label"><span class="hoo-toggle-slider"></span><span class="hoo-toggle-checked">Filled</span><span class="hoo-toggle-unchecked">Regular</span>
            </label>
        </div>
    </div>
    <div class="pl-action-item pl-act-dwnld">
        <button class="hoo-button-primary"><span class="hoo-button-label">Download</span>
    </button>
</div>
</div>
</div>
</section>
</section>
<main class="pl-icongrid">
</main>
<script src="../../js/pl-icon-finder.js">
</script>

Usage

This icon tool allows to selet custom sets out of the Fluent Design Icon System.

Install

To install all icons to your project:

npm i @n8d/htwoo-icons