### Install HTWOO-REACT Package

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Installs the HTWOO-REACT package using npm. This command also automatically installs the peer dependency @n8d/htwoo-core.

```cmd
npm i @n8d/htwoo-react
```

--------------------------------

### Install HTWOO-REACT Package

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Installs the @n8d/htwoo-react package using npm. This package has a peer dependency on @n8d/htwoo-core.

```cmd
npm i @n8d/htwoo-react
```

--------------------------------

### Start Style Guide Development

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/README.md

Starts both the Pattern Lab web server ('pl:serve') and the Gulp task ('gulp:serve') which watches for SASS changes and updates the style guide.

```sh
run-p pl:serve gulp:serve
```

--------------------------------

### Install Global Dependency

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/README.md

Installs the 'npm-run-all' package globally, which is recommended for running the style guide and gulp tasks concurrently.

```sh
npm install -g npm-run-all
```

--------------------------------

### Initialize HTWOO Icons in SPFx

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Demonstrates how to install the @n8d/htwoo-icons package, declare SVG typings, import an SVG file, and initialize the symbol set using symset.initSymbols in an SPFx project.

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';
// Requires typings to be declared in an images.d.ts file
import fuireg from '@n8d/htwoo-icons/fluent-ui-regular/fluent-ui-regular.svg';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set with HTWOO-Icons
  await symset.initSymbols(fuireg);
}
```

--------------------------------

### Project File Entry Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms/index.html

An example of how a project file entry is structured, showing filename, user, modification date, and size.

```text
Filename: [Filename]
User: [Username]
Modified Date: [Date]
Size: [Size]
```

--------------------------------

### Initialize SVG Icons with HTWOO-Icons Package

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Initializes SVG icons by loading them from the @n8d/htwoo-icons package. This requires installing the package and referencing the SVG file from the node_modules folder. Multiple SVG files can be loaded by making additional calls to initSymbols.

```ts
declare module '*.svg' {
  const content: any;
  export default content;
}
```

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';
import fuireg from '@n8d/htwoo-icons/fluent-ui-regular/fluent-ui-regular.svg';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set with HTWOO-Icons
  await symset.initSymbols(fuireg);
}
```

--------------------------------

### Install Fluent Design Icons

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/src/_patterns/design-tokens/icon-overview.md

Installs all icons from the Fluent Design Icon System into your project using npm.

```sh
npm i @n8d/htwoo-icons
```

--------------------------------

### Install Fluent Design Icons

Source: https://github.com/n8design/htwoo/blob/main/packages/htwoo-patterns/_patterns/design-tokens/icon-overview.md

Installs all icons from the Fluent Design Icon System into your project using npm.

```sh
npm i @n8d/htwoo-icons
```

--------------------------------

### Initialize SPFx Theme Support

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Initializes CSS Variables to support SharePoint themes by integrating with the ThemeProvider service. This ensures components adapt to the page's theme context. It requires importing ThemeProvider and SPFxThemes, and initializing the theme handler.

```ts
import { ThemeProvider } from '@microsoft/sp-component-base';
import { SPFxThemes, ISPFxThemes } from '@n8d/htwoo-react/SPFxThemes';

private _spfxThemes: ISPFxThemes = new SPFxThemes();

public async onInit(): Promise<void> {
  // Consume the new ThemeProvider service
  const microsoftTeams = this.context.sdks?.microsoftTeams;
  const themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
  this._spfxThemes.initThemeHandler(this.domElement, themeProvider, microsoftTeams);

  // If no ThemeProvider service, do not include property which will use page context
  this._spfxThemes.initThemeHandler(document.body);
}
```

--------------------------------

### JavaScript: Pre-start script for plugin-design

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/CHANGELOG-Archive.md

Adds a pre-start script for plugin-design. This script likely handles setup or initialization tasks before the plugin starts.

```javascript
// pre-start script added for plugin-design
```

--------------------------------

### HOOAvatar Component Usage Examples

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/HOOAvatar/HOOAvatar.mdx

Provides examples of how to use the HOOAvatar component with different sizes and configurations, as defined in Storybook stories.

```storybook
<Meta of={HooAvatarStories} />

## Small - 16px

<Canvas of={HooAvatarStories.Small} />

## Medium - 32px

<Canvas of={HooAvatarStories.Medium} />

## Large - 64px

<Canvas of={HooAvatarStories.Large} />

## Max - 96px

<Canvas of={HooAvatarStories.Max} />

## Extending

<Canvas of={HooAvatarStories.Extending} />
```

--------------------------------

### Install hTWOo Core Package

Source: https://github.com/n8design/htwoo/blob/main/packages/htwoo-core/README.md

Installs the hTWOo core UI framework package as a development dependency using npm.

```sh
npm install --save-dev @n8d/htwoo-core
```

--------------------------------

### HOOWebPartTitle Basic Usage Example

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/HOOWebPartTitle/HOOWebPartTitle.mdx

This snippet shows a basic usage example of the HOOWebPartTitle component as defined in its Storybook stories.

```javascript
import { Canvas } from '@storybook/blocks';
import * as HooWebPartTitleStories from './HOOWebPartTitle.stories';

<Canvas of={HooWebPartTitleStories.Basic} />
```

--------------------------------

### SVG Symbol File Structure

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

An example structure of an SVG symbol file used for defining icons. It includes a <defs> section where individual <symbol> elements with unique IDs and viewBox attributes are defined.

```html
<svg aria-hidden='true' style='position: absolute; width: 0; height: 0; overflow: hidden;' version='1.1'
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
      <symbol id='icon-arrow-left' viewBox='0 0 32 32'>
          <path d='M22.547 31.953l-15.969-15.953 15.969-15.953 1.406 1.406-14.531 14.547 14.531 14.547-1.406 1.406z'></path>
      </symbol>
  </defs>
</svg>
```

--------------------------------

### SVG Symbol File Structure

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Provides an example structure for an SVG symbol file, which contains definitions for custom icons using the `<symbol>` element. This format is used when initializing custom icons with the symset.

```html
<svg aria-hidden='true' style='position: absolute; width: 0; height: 0; overflow: hidden;' version='1.1'
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
      <symbol id='icon-arrow-left' viewBox='0 0 32 32'>
          <path d='M22.547 31.953l-15.969-15.953 15.969-15.953 1.406 1.406-14.531 14.547 14.531 14.547-1.406 1.406z'></path>
      </symbol>
  </defs>
</svg>
```

--------------------------------

### HTWOO Core Usage Examples

Source: https://github.com/n8design/htwoo/blob/main/README.md

Demonstrates how to integrate the HTWOO Core library into various web development contexts, including 'No framework' web parts with SPFx, React web parts with SPFx, and Angular Elements web parts with SPFx.

```html
* [hTWOo usage in 'No framework' web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-html/)
* [hTWOo usage in React web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-react/)
* [hTWOo usage in Angular Elements web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-angular-elements/)
* more to come
```

--------------------------------

### Install hTWOo Icons

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/design-tokens-icon-overview/design-tokens-icon-overview.rendered.html

Command to install all icons from the hTWOo Icons package into your project using npm.

```sh
npm i @n8d/htwoo-icons
```

--------------------------------

### Pattern Lab Initialization and Script Loading

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.2.0/patterns/atoms-typography-headlines/atoms-typography-headlines.rendered.html

Initializes Pattern Lab with specific configurations and loads JavaScript files asynchronously. It includes a polyfill loader and the main pattern lab script.

```javascript
var scriptLoader = {
  run: function(js,cb,target) {
    var s = document.getElementById(target+'-'+cb);
    for (var i = 0; i < js.length; i++) {
      var src = (typeof js[i] != 'string') ? js[i].src : js[i];
      var c = document.createElement('script');
      c.src = '../../'+src+'?'+cb;
      if (typeof js[i] != 'string') {
        if (js[i].dep !== undefined) {
          c.onload = function(dep,cb,target) {
            return function() {
              scriptLoader.run(dep,cb,target);
            }
          }(js[i].dep,cb,target);
        }
      }
      s.parentNode.insertBefore(c,s);
    }
  }
}

(function() {
  if (self != top) {
    var cb = '1622108278620';
    var js = [];
    scriptLoader.run(js,cb,'pl-js-polyfill-insert');
  }
})();

import('../../styleguide/js/patternlab-pattern.modern.js');
```

```javascript
!function(e){
  var t=function(t,n){
    "use strict";
    var o=e.document.getElementsByTagName("script")[0],
        r=e.document.createElement("script");
    return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r
  };
  "undefined"!=typeof module?module.exports=t:e.loadJS=t
}("undefined"!=typeof global?global:this);

loadJS('../../styleguide/js/patternlab-pattern.js');
```

--------------------------------

### Project File Entry Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-table-table-compact-colgroup/atoms-table-table-compact-colgroup.rendered.html

An example of how a project file entry is structured, showing filename, user, modification date, and size.

```text
Filename: [Filename]
User: [Username]
Modified Date: [Date]
Size: [Size]
```

--------------------------------

### npm Start Behavior Fix

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/CHANGELOG-Archive.md

Corrects the behavior of 'npm start' when launched for development from the htwoo/htwoo-core directory. This ensures a smoother development setup experience.

```JavaScript
/* blank npm start behaviour when launched for development from htwoo/htwoo-core */
```

--------------------------------

### npm Scripts for Development Environments

Source: https://github.com/n8design/htwoo/blob/main/project.conf.md

Provides instructions on using npm run commands to launch different development environments within the hTWOo project. These scripts are essential for starting the core or React-based development servers.

```bash
npm run launch:core
npm run launch:react
```

--------------------------------

### Configure SPFx Sass Options

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Modifies the project's config/sass.json file to include the 'quietDeps: true' property, which is required starting from SharePoint Framework version 1.16.0.

```json
{
  "quietDeps": true
}
```

--------------------------------

### Pattern-Based Validation Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-input-input-text-invalid/atoms-input-input-text-invalid.markup-only.html

Illustrates how to use the 'pattern' attribute in HTML to define custom validation rules for input fields. This example enforces lowercase characters with a length between 4 and 8.

```html
<input type="text" pattern="[a-z]{4,8}" required>
<!-- This input will be invalid if it contains uppercase letters or is shorter than 4 or longer than 8 characters. -->
```

--------------------------------

### Script Loader Utility

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-tooltip-tooltip-tryout/atoms-tooltip-tooltip-tryout.rendered.html

A JavaScript utility for asynchronously loading script files. It supports loading multiple scripts and handling dependencies between them, ensuring they are executed in the correct order.

```javascript
var scriptLoader = {
  run: function(js,cb,target) {
    var s = document.getElementById(target+'-'+cb);
    for (var i = 0; i < js.length; i++) {
      var src = (typeof js[i] != 'string') ? js[i].src : js[i];
      var c = document.createElement('script');
      c.src = '../../'+src+'?'+cb;
      if (typeof js[i] != 'string') {
        if (js[i].dep !== undefined) {
          c.onload = function(dep,cb,target) {
            return function() {
              scriptLoader.run(dep,cb,target);
            }
          }(js[i].dep,cb,target);
        }
      }
      s.parentNode.insertBefore(c,s);
    }
  }
}

(function() {
  if (self != top) {
    var cb = '1732824153115';
    var js = [];
    scriptLoader.run(js,cb,'pl-js-polyfill-insert');
  }
})();
```

--------------------------------

### Using HTWOO Icons with HOOAction

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Shows how to reference an imported icon by its ID within the HOOAction component, specifying the icon name and label.

```jsx
<HOOAction iconName='icon-arrow-left' label='Action Button' type={HOOActionType.Action}/>
```

--------------------------------

### HTWOO Story Snippet

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Contributing.mdx

A VSCode snippet to generate the basic structure for a new Storybook documentation file (.stories.mdx) for an HTWOO component.

```markdown
// Snippet for creating a new HTWOO Storybook documentation
// Usage: HOOStory
```

--------------------------------

### File Listing Example

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.2.0/patterns/atoms-table-table-sticky/atoms-table-table-sticky.markup-only.html

Demonstrates the structure of file entries in the project listing, showing file name, modification date, modifier, and size.

```text
Icon
Name
Modified by
Date Modifed
File Size
```

--------------------------------

### File Listing Example

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.3.0/patterns/atoms-table-table-sticky/atoms-table-table-sticky.markup-only.html

Demonstrates the structure of file entries in the project listing, showing file name, modification date, modifier, and size.

```text
Icon
Name
Modified by
Date Modifed
File Size
```

--------------------------------

### Using an Icon in HOOAction Component

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Demonstrates how to use an initialized icon within the HOOAction component by referencing the icon's ID as the `iconName` prop.

```jsx
<HOOAction iconName='icon-arrow-left' label='Action Button' type={HOOActionType.Action}/>
```

--------------------------------

### HTWOO Component Snippet

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Contributing.mdx

A VSCode snippet to quickly generate the basic structure for a new HTWOO React component, including its .tsx file.

```typescript
// Snippet for creating a new HTWOO component
// Usage: HOOComponent
```

--------------------------------

### Video File Example

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.3.0/patterns/atoms/index.html

Represents a video file within the project. Includes filename, modification date, owner, and size.

```text
Rhoncus.mov
11/20/2020
epicknett5
47
```

--------------------------------

### Add Base Class to Root Component

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Adds the base class to the root HTML element of the SPFx component to ensure styles are included during the project build.

```ts
public render(): React.ReactElement<IHtwooReactDemoProps> {
  try {
    return (
      <div className={styles.myWebPartRoot}>
        Hello World
      </div>
    );
  } catch (err) {
    console.error(`${this.LOG_SOURCE} (render) - ${err}`);
    return null;
  }
}
```

--------------------------------

### File Listing Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-table-table-sticky/atoms-table-table-sticky.markup-only.html

Demonstrates the structure of file entries in the project listing, showing file name, modification date, modifier, and size.

```text
Icon
Name
Modified by
Date Modifed
File Size
```

--------------------------------

### Initialize Basic SVG Icons

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Initializes the basic SVG icons provided by the library in an SPFx project's onInit method. This is necessary for certain complex components that rely on these icons.

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set
  await symset.initSymbols();
}
```

--------------------------------

### hTWOo React Package

Source: https://github.com/n8design/htwoo/blob/main/packages/htwoo-core/README.md

Information about the hTWOo ReactJS implementation of hTWOo components, including installation and documentation links.

```javascript
npm install --save @n8d/htwoo-react
// Documentation: https://lab.n8d.studio/htwoo/htwoo-react/?path=/story/introduction--getting-started
```

--------------------------------

### Enable Theme Variants in SPFx Manifest

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Modifies the SPFx component manifest to enable theme variants, allowing hTWOo components to render correctly in SharePoint sections with different background colors.

```json
{
  //...
  'supportsThemeVariants': true,
  // ...
}
```

--------------------------------

### Initialize Basic SVG Icons

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Initializes the basic SVG icons used by hTWOo components by adding a line to the component's onInit method. This ensures that default icons are available for use.

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set
  await symset.initSymbols();
}
```

--------------------------------

### File Listing Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms/index.html

This snippet represents a typical file entry in a project file listing. It includes the file name, a preview icon (represented by a data URI), the owner, modification date, and file size.

```text
ErosViverra.mp3 just a variable height of everything that is in the perfect state
lmaggiore0
2/4/2021
30
![](data:image/png;base64,...)

CrasMi.mpeg
llaurencot3
6/8/2020
59
![](data:image/png;base64,...)
```

--------------------------------

### Import HTWOO-Core Styles in SPFx

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Imports HTWOO-Core SCSS styles into an SPFx solution. The import is wrapped in :global to ensure styles are not namespaced and should be placed within the webpart's base class.

```css
.myWebPartRoot{
  :global {
    @import 'node_modules/@n8d/htwoo-core/lib/sass/style.prod';
  }
}
```

--------------------------------

### Using HOOLabel Component with Root Element Attributes

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Demonstrates how to import and use the HOOLabel component from '@n8d/htwoo-react', including the use of `rootElementAttributes` to add or override accessibility properties on the root DOM element.

```ts
import HOOLabel from '@n8d/htwoo-react/HOOLabel';

public render(): React.ReactElement<IMyComponentProps> {
  try {
    const labelREA = {"aria-hidden": true};
    return (
      <div data-component={this.LOG_SOURCE}>
        <HOOLabel label='My Label' rootElementAttributes={labelREA} />
      </div>
    );
  } catch (err) {
    console.error(`${this.LOG_SOURCE} (render) - ${err}`);
    return null;
  }
}
```

--------------------------------

### Pattern Lab Script Loading and Initialization

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/design-tokens-colors-reds/design-tokens-colors-reds.rendered.html

JavaScript code for loading Pattern Lab patterns and polyfills. It includes a `scriptLoader` utility for managing script dependencies and asynchronous loading, ensuring UI components function correctly.

```javascript
var scriptLoader = {
    run: function(js,cb,target) {
        var s = document.getElementById(target+'-'+cb);
        for (var i = 0; i < js.length; i++) {
            var src = (typeof js[i] != 'string') ? js[i].src : js[i];
            var c = document.createElement('script');
            c.src = '../../'+src+'?'+cb;
            if (typeof js[i] != 'string') {
                if (js[i].dep !== undefined) {
                    c.onload = function(dep,cb,target) {
                        return function() {
                            scriptLoader.run(dep,cb,target);
                        }
                    }(js[i].dep,cb,target);
                }
            }
            s.parentNode.insertBefore(c,s);
        }
    }
}

(function() {
    if (self != top) {
        var cb = '1732824153115';
        var js = [];
        scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
})();

import('../../styleguide/js/patternlab-pattern.modern.js');
```

--------------------------------

### Add Custom SVG Icons

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Shows how to add custom SVG icons by importing a symbolset file and passing its path to the initSymbols method. This method loads both the library's default icons and the custom ones.

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';
import symbolSetFile from './images/icons.svg';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set with Custom Symbol File
  await symset.initSymbols(symbolSetFile);
}
```

--------------------------------

### hTWOo UI Framework - Radio Button (Disabled)

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.3.0/patterns/atoms-input-radiobutton-disabled/atoms-input-radiobutton-disabled.rendered.html

Example of a disabled radio button component within the hTWOo UI Framework. This configuration is part of the Pattern Lab setup and defines the properties for rendering the component.

```html
Label Radio Button {"cssEnabled":false,"patternLineageExists":false,"patternLineages":[],"lineage":[],"patternLineageRExists":false,"patternLineagesR":[],"lineageR":[],"patternLineageEExists":false,"patternDesc":"","patternBreadcrumb":{"patternGroup":"atoms","patternSubgroup":"input"},"patternExtension":"hbs","patternName":"Radio Button disabled","patternPartial":"atoms-radiobutton-disabled","patternState":"","patternEngineName":"handlebars","extraOutput":{}}
```

--------------------------------

### Pattern Lab Node Configuration for UI Extension Plugin

Source: https://github.com/n8design/htwoo/blob/main/htwoo-core/helpers/node/plugin-design/README.md

Example configuration for the UI Extension Plugin within the patternlab-config.json file. This includes enabling the plugin and setting options for stylesheets and navigation links.

```json
{
  "plugins": {
    "plugin-node-uiextension": {
      "enabled": true,
      "initialized": false,
      "options": {
        "stylesheets": [
          "../../../css/pattern-scaffolding.css"
        ],
        "navLinks": {
          "before": [],
          "after": []
        },
        "gearLinks": {
          "before": [],
          "beforeSearch": []
        }
      }
    }
  }
}
```

--------------------------------

### Enable Theme Variants in SPFx Component Manifest

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Illustrates the JSON configuration required in an SPFx project's component manifest to enable theme variants for proper rendering of hTWOo components in colored SharePoint sections.

```json
{
  //...
  'supportsThemeVariants': true,
  // ...
}
```

--------------------------------

### Image File Example

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.3.0/patterns/atoms/index.html

Represents an image file within the project. Includes filename, modification date, owner, and size.

```text
SitAmetConsectetuer.png
10/11/2020
ojonke6
21
```

--------------------------------

### Initialize SPFx Theme Handler

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Provides the TypeScript code to initialize the theme handler in an SPFx project's onInit method, utilizing the ThemeProvider service and the SPFxThemes class to manage CSS Variables for theme support.

```ts
import { ThemeProvider } from '@microsoft/sp-component-base';
import { SPFxThemes, ISPFxThemes } from '@n8d/htwoo-react/SPFxThemes';

private _spfxThemes: ISPFxThemes = new SPFxThemes();

public async onInit(): Promise<void> {
  // Consume the new ThemeProvider service
  const microsoftTeams = this.context.sdks?.microsoftTeams;
  const themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
  this._spfxThemes.initThemeHandler(this.domElement, themeProvider, microsoftTeams);

  // If no ThemeProvider service, do not include property which will use page context
  this._spfxThemes.initThemeHandler(document.body);
}
```

--------------------------------

### Asynchronous JavaScript Loading Example

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-global-colors/atoms-global-colors.rendered.html

Demonstrates the usage of the scriptLoader utility to load JavaScript files asynchronously. It shows how to specify script sources and handle dependencies.

```javascript
/*
 * loadJS: load a JS file asynchronously.
 * [c]2014 @scottjehl, Filament Group, Inc.
 * (Based on https://goo.gl/REQGQ by Paul Irish).
 */
```

--------------------------------

### Initialize SVG Icons with Custom Symbol File

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/_oldDocs/v1/Root.mdx

Initializes SVG icons by loading a custom symbolset file. This method allows you to include your own icons alongside the basic hTWOo icons. It requires a TypeScript declaration for SVG files.

```ts
declare module '*.svg' {
  const content: any;
  export default content;
}
```

```ts
import { symset } from '@n8d/htwoo-react/SymbolSet';
import symbolSetFile from './images/icons.svg';

public async onInit(): Promise<void> {
  // Initialize Icons Symbol Set with Custom Symbol File
  await symset.initSymbols(symbolSetFile);
}
```

--------------------------------

### Pattern Lab Initialization and Script Loading

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.3.0/patterns/atoms-table-table/atoms-table-table.rendered.html

This snippet demonstrates the initialization of Pattern Lab data and the asynchronous loading of JavaScript files required for pattern functionality. It includes logic for handling cross-origin window communication and loading pattern-specific scripts.

```javascript
window.patternData = {"cssEnabled":false,"patternLineageExists":false,"patternLineages":[],"lineage":[],"patternLineageRExists":false,"patternLineagesR":[],"lineageR":[],"patternLineageEExists":false,"patternDesc":"<p>Default Table Styles</p>\n","patternBreadcrumb":{"patternGroup":"atoms","patternSubgroup":"table"},"patternExtension":"hbs","patternName":"Default","patternPartial":"atoms-table","patternState":"","patternEngineName":"handlebars","extraOutput":{"order":0}};

var scriptLoader = {
    run: function(js,cb,target) {
        var s = document.getElementById(target+'-'+cb);
        for (var i = 0; i < js.length; i++) {
            var src = (typeof js[i] != 'string') ? js[i].src : js[i];
            var c = document.createElement('script');
            c.src = '../../'+src+'?'+cb;
            if (typeof js[i] != 'string') {
                if (js[i].dep !== undefined) {
                    c.onload = function(dep,cb,target) {
                        return function() {
                            scriptLoader.run(dep,cb,target);
                        }
                    }(js[i].dep,cb,target);
                }
            }
            s.parentNode.insertBefore(c,s);
        }
    }
}

(function() {
    if (self != top) {
        var cb = '1623676914080';
        var js = [];
        scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
})();

// always load Pattern-specific JS so UI like accordions, etc can continue to work even when viewed as a standalone HTML page
import('../../styleguide/js/patternlab-pattern.modern.js');

!function(e){
    var t=function(t,n){
        "use strict";
        var o=e.document.getElementsByTagName("script")[0],
            r=e.document.createElement("script");
        return r.src=t,
        r.async=!0,
        o.parentNode.insertBefore(r,o),
        n&&"function"==typeof n&&
        (r.onload=n),
        r
    };
    "undefined"!=typeof module?module.exports=t:e.loadJS=t
}("undefined"!=typeof global?global:this);

// always load Pattern-specific JS so UI like accordions, etc can continue to work even when viewed as a standalone HTML page
loadJS('../../styleguide/js/patternlab-pattern.js');

var layoutMode = null;

var evtLocationStorageUpdates = () => {
    let patternlab = JSON.parse(window.localStorage.getItem('patternlab'));
    if (patternlab.app.layoutMode !== layoutMode && patternlab.app.layoutMode === "vertical") {
        console.log("Layout i");
    }
};
```

--------------------------------

### Import HTWOO-CORE Styles

Source: https://github.com/n8design/htwoo/blob/main/htwoo-react/src/generalDocs/Root.mdx

Demonstrates how to import and include HTWOO-CORE SCSS styles within a project's root SCSS file. It uses Sass meta functions for loading CSS and ensures styles are scoped to a specific class.

```css
@use 'sass:meta';

.myWebPartRoot{
  :global {
    @include meta.load-css('node_modules/@n8d/htwoo-core/lib/sass/htwoo-core');
  }
}
```

--------------------------------

### PatternLab Initialization and Script Loading

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/atoms-loading-shimmer-theme-inline-neutral/atoms-loading-shimmer-theme-inline-neutral.rendered.html

Initializes PatternLab specific JavaScript and loads polyfills and pattern-specific scripts asynchronously. It includes logic to handle script loading dependencies and ensures UI components function correctly.

```javascript
var scriptLoader = {
    run: function(js,cb,target) {
        var s = document.getElementById(target+'-'+cb);
        for (var i = 0; i < js.length; i++) {
            var src = (typeof js[i] != 'string') ? js[i].src : js[i];
            var c = document.createElement('script');
            c.src = '../../'+src+'?'+cb;
            if (typeof js[i] != 'string') {
                if (js[i].dep !== undefined) {
                    c.onload = function(dep,cb,target) {
                        return function() {
                            scriptLoader.run(dep,cb,target);
                        }
                    }(js[i].dep,cb,target);
                }
            }
            s.parentNode.insertBefore(c,s);
        }
    }
}

(function() {
    if (self != top) {
        var cb = '1732824153115';
        var js = [];
        scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
})();

// always load Pattern-specific JS so UI like accordions, etc can continue to work even when viewed as a standalone HTML page
import('../../styleguide/js/patternlab-pattern.modern.js');

!function(e){
    var t=function(t,n){
        "use strict";
        var o=e.document.getElementsByTagName("script")[0],
            r=e.document.createElement("script");
        return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r
    };
    "undefined"!=typeof module?module.exports=t:e.loadJS=t
}("undefined"!=typeof global?global:this);

// always load Pattern-specific JS so UI like accordions, etc can continue to work even when viewed as a standalone HTML page
loadJS('../../styleguide/js/patternlab-pattern.js');
```

--------------------------------

### File Listing Example

Source: https://github.com/n8design/htwoo/blob/main/docs/ver/v0.2.0/styleguide/html/styleguide.html

This snippet represents a typical file entry in a project file listing. It includes the file name, a preview icon (represented by a data URI), the owner, modification date, and file size.

```text
ErosViverra.mp3 just a variable height of everything that is in the perfect state
lmaggiore0
2/4/2021
30
![](data:image/png;base64,...)

CrasMi.mpeg
llaurencot3
6/8/2020
59
![](data:image/png;base64,...)
```

--------------------------------

### HTML Structure for Color Tokens

Source: https://github.com/n8design/htwoo/blob/main/docs/htwoo-core/patterns/design-tokens-colors-neutral-colors/design-tokens-colors-neutral-colors.rendered.html

Example HTML structure demonstrating how neutral color tokens are presented, including their SASS variable and corresponding Fluent UI names. This is part of the UI Framework's documentation or style guide.

```html
<div>
  <p><strong>SASS:</strong> $neutral-000</p>
  <p><em><strong>Fluent UI:</strong> White / White</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-050</p>
  <p><em><strong>Fluent UI:</strong> Neutral Lighter Alt / neutralLighterAlt</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-100</p>
  <p><em><strong>Fluent UI:</strong> Neutral Lighter / neutralLighter</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-200</p>
  <p><em><strong>Fluent UI:</strong> Neutral Light / neutralLight</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-250</p>
  <p><em><strong>Fluent UI:</strong> Neutral Quaternary Alt / neutralQuaternaryAlt</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-300</p>
  <p><em><strong>Fluent UI:</strong> Neutral Quaternary / neutralQuaternary</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-350</p>
  <p><em><strong>Fluent UI:</strong> Neutral Tertiary Alt / neutralTertiaryAlt</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-400</p>
  <p><em><strong>Fluent UI:</strong> Neutral Tertiary / neutralTertiary</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-450</p>
  <p><em><strong>Fluent UI:</strong> Neutral Secondary Alt / neutralSecondaryAlt</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-500</p>
  <p><em><strong>Fluent UI:</strong> Neutral Secondary / neutralSecondary</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-600</p>
  <p><em><strong>Fluent UI:</strong> Neutral Primary Alt / neutralPrimaryAlt</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-700</p>
  <p><em><strong>Fluent UI:</strong> Neutral Primary / neutralPrimary</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-800</p>
  <p><em><strong>Fluent UI:</strong> Neutral Dark / neutralDark</em></p>
</div>
<div>
  <p><strong>SASS:</strong> $neutral-900</p>
  <p><em><strong>Fluent UI:</strong> Black / Black</em></p>
</div>
```