🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Icon Tool
View in Pattern LabHTML 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