@truenas/ui-components 0.1.2

package/README.md

@@ -0,0 +1,335 @@
+# TrueNAS UI Component Library
+
+A comprehensive Angular component library for TrueNAS and related applications, featuring a powerful icon system with automatic sprite generation.
+
+## Installation
+
+```bash
+npm install @truenas/ui-components
+```
+
+## Features
+
+- 🎨 **Complete UI Component Library** - Pre-built Angular components with consistent styling
+- 🖼️ **Icon Sprite System** - Automatic SVG sprite generation with tree-shaking
+- 📦 **7,000+ MDI Icons** - Material Design Icons built-in
+- 🎯 **Custom Icons** - Support for custom SVG icons
+- 🔌 **Icon Registry** - Integrate any third-party icon library (Lucide, Heroicons, etc.)
+- 🌈 **8 Built-in Themes** - Dark mode, high contrast, and more
+- ♿ **Accessibility** - WCAG 2.1 AA compliant components
+
+## Quick Start
+
+### 1. Import Components
+
+```typescript
+import { TnButtonComponent, TnIconComponent } from '@truenas/ui-components';
+
+@Component({
+  standalone: true,
+  imports: [TnButtonComponent, TnIconComponent],
+  template: `
+    <tn-button variant="primary">Click me</tn-button>
+    <tn-icon name="folder" library="mdi"></tn-icon>
+  `
+})
+export class MyComponent {}
+```
+
+### 2. Include Styles
+
+Add to your `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@truenas/ui-components/src/styles/themes.css"
+  ]
+}
+```
+
+Or import in your main styles file:
+
+```scss
+@import '@truenas/ui-components/src/styles/themes.css';
+```
+
+## Icon System
+
+### Using Icons
+
+The library includes an intelligent icon system that supports multiple icon sources:
+
+```html
+<!-- MDI icons from sprite (recommended) -->
+<tn-icon name="folder" library="mdi"></tn-icon>
+<tn-icon name="server" library="mdi" size="lg" color="#007acc"></tn-icon>
+
+<!-- Lucide icons via registry -->
+<tn-icon name="home" library="lucide"></tn-icon>
+
+<!-- Unicode fallbacks -->
+<tn-icon name="star"></tn-icon>  <!-- Shows ★ -->
+```
+
+### Icon Sizes
+
+Available sizes: `xs`, `sm`, `md` (default), `lg`, `xl`
+
+### Icons in Menus
+
+```typescript
+const menuItems: TnMenuItem[] = [
+  { id: '1', label: 'Home', icon: 'home', iconLibrary: 'mdi' },
+  { id: '2', label: 'Settings', icon: 'cog', iconLibrary: 'mdi' },
+  { id: '3', label: 'Profile', icon: 'user', iconLibrary: 'lucide' },
+];
+```
+
+## Sprite Generation for Consumers
+
+The library includes a powerful sprite generation system that scans your application and automatically creates an optimized SVG sprite containing only the icons you use.
+
+### Setup
+
+1. **Add the sprite generation script to your `package.json`:**
+
+```json
+{
+  "scripts": {
+    "icons": "truenas-icons generate"
+  }
+}
+```
+
+2. **Run sprite generation:**
+
+```bash
+npm run icons
+```
+
+This will:
+- Scan your templates for `<tn-icon>` elements
+- Detect icons marked with `tnIconMarker()` in TypeScript
+- Generate `src/assets/icons/sprite.svg` with only used icons
+- Create `src/assets/icons/sprite-config.json` with manifest
+
+### Configuration
+
+Create `truenas-icons.config.js` in your project root:
+
+```javascript
+export default {
+  // Source directories to scan for icon usage
+  srcDirs: ['./src/lib', './src/app'],
+
+  // Output directory for sprite files
+  outputDir: './src/assets/icons',
+
+  // Optional: Directory with custom SVG icons
+  customIconsDir: './custom-icons'
+};
+```
+
+### CLI Options
+
+```bash
+# Use custom source directories
+npx truenas-icons generate --src ./src,./app
+
+# Specify output directory
+npx truenas-icons generate --output ./public/icons
+
+# Use custom icons
+npx truenas-icons generate --custom ./my-icons
+
+# Use config file
+npx truenas-icons generate --config ./my-config.js
+```
+
+### Marking Dynamic Icons
+
+For icons whose names are determined at runtime, use `tnIconMarker()` to ensure they're included in the sprite:
+
+```typescript
+import { tnIconMarker } from '@truenas/ui-components';
+
+// In arrays or objects
+const actions = [
+  { name: 'Save', icon: tnIconMarker('mdi-content-save') },
+  { name: 'Delete', icon: tnIconMarker('mdi-delete') }
+];
+
+// In conditional logic
+const icon = isEditing
+  ? tnIconMarker('mdi-pencil')
+  : tnIconMarker('mdi-eye');
+
+// In component properties
+export class MyComponent {
+  icon = tnIconMarker('mdi-database');
+}
+```
+
+### Custom Icons
+
+1. **Create a directory for your custom SVG icons:**
+
+```bash
+mkdir custom-icons
+```
+
+2. **Add SVG files** (they'll be prefixed with `tn-` automatically):
+
+```
+custom-icons/
+  ├── logo.svg        → Available as "tn-logo"
+  ├── brand.svg       → Available as "tn-brand"
+  └── custom-icon.svg → Available as "tn-custom-icon"
+```
+
+3. **Configure sprite generation:**
+
+```javascript
+// truenas-icons.config.js
+export default {
+  customIconsDir: './custom-icons'
+};
+```
+
+4. **Run sprite generation:**
+
+```bash
+npm run icons
+```
+
+5. **Use your custom icons:**
+
+```html
+<tn-icon name="tn-logo"></tn-icon>
+```
+
+## Icon Registry (Advanced)
+
+For integrating third-party icon libraries like Lucide:
+
+```typescript
+import { TnIconRegistryService } from '@truenas/ui-components';
+import * as LucideIcons from 'lucide';
+
+export function setupIcons() {
+  const iconRegistry = inject(TnIconRegistryService);
+
+  // Register Lucide library
+  iconRegistry.registerLibrary({
+    name: 'lucide',
+    resolver: (iconName: string) => {
+      const icon = LucideIcons[iconName];
+      // Convert icon data to SVG string
+      return svgString;
+    }
+  });
+
+  // Register individual icons
+  iconRegistry.registerIcon('my-logo', '<svg>...</svg>');
+}
+```
+
+## Themes
+
+Apply themes by adding a class to your root element:
+
+```html
+<html class="tn-dark">
+  <!-- Your app -->
+</html>
+```
+
+Available themes:
+- `tn-dark` (default)
+- `tn-blue`
+- `dracula`
+- `nord`
+- `paper`
+- `solarized-dark`
+- `midnight`
+- `high-contrast`
+
+## Development
+
+### Building the Library
+
+```bash
+# Build the library
+ng build truenas-ui
+
+# Generate icon sprite for library development
+yarn icons
+
+# Run Storybook
+yarn run sb
+```
+
+### Testing
+
+```bash
+# Run unit tests
+yarn test
+
+# Run tests with coverage
+yarn test-coverage
+
+# Run Storybook interaction tests
+yarn test-sb
+```
+
+### Publishing
+
+```bash
+# Build the library
+ng build truenas-ui
+
+# Navigate to dist
+cd dist/truenas-ui
+
+# Pack for testing
+npm pack
+
+# Or publish to npm
+npm publish
+```
+
+## Project Structure
+
+```
+projects/truenas-ui/
+├── src/
+│   ├── lib/              # Component source code
+│   ├── stories/          # Storybook stories
+│   ├── styles/           # Global themes and styles
+│   └── public-api.ts     # Public API exports
+├── assets/
+│   └── icons/
+│       ├── custom/       # Custom TrueNAS icons
+│       ├── sprite.svg    # Generated sprite
+│       └── sprite-config.json
+├── scripts/
+│   └── icon-sprite/      # Sprite generation system
+└── package.json
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+
+## License
+
+Copyright © iXsystems, Inc.
+
+## Additional Resources
+
+- [Angular CLI Documentation](https://angular.dev/tools/cli)
+- [Material Design Icons](https://pictogrammers.com/library/mdi/)
+- [Storybook Documentation](https://storybook.js.org/)

package/assets/tn-icons/custom/cloud-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#D9D9D9"><path d="M792-56 686-160H260q-92 0-156-64T40-380q0-77 47.5-137T210-594q3-8 6-15.5t6-16.5L56-792l56-56 736 736-56 56ZM260-240h346L284-562q-2 11-3 21t-1 21h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm185-161Zm419 191-58-56q17-14 25.5-32.5T840-340q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-27 0-52 6.5T380-693l-58-58q35-24 74.5-36.5T480-800q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 39-15 72.5T864-210ZM593-479Z"/></svg>

package/assets/tn-icons/custom/dataset-root.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path d="M3 3h6v4H3V3m12 7h6v4h-6v-4m0 7h6v4h-6v-4m-2-4H7v5h6v2H5V9h2v2h6v2Z"/>
+</svg>

package/assets/tn-icons/custom/dataset.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 8C5.72 8 5.48 7.9 5.29 7.71C5.1 7.52 5 7.28 5 7C5 6.72 5.1 6.48 5.29 6.29C5.48 6.1 5.72 6 6 6H18C18.28 6 18.52 6.1 18.71 6.29C18.9 6.48 19 6.72 19 7C19 7.28 18.9 7.52 18.71 7.71C18.52 7.9 18.28 8 18 8H6ZM8 5C7.72 5 7.48 4.9 7.29 4.71C7.1 4.52 7 4.28 7 4C7 3.72 7.1 3.48 7.29 3.29C7.48 3.1 7.72 3 8 3H16C16.28 3 16.52 3.1 16.71 3.29C16.9 3.48 17 3.72 17 4C17 4.28 16.9 4.52 16.71 4.71C16.52 4.9 16.28 5 16 5H8ZM3 9L5 21H19L21 9H3ZM14.71 15.1C14.52 15.29 14.28 15.39 14 15.39H10C9.72 15.39 9.48 15.29 9.29 15.1C9.1 14.91 9 14.67 9 14.39C9 14.11 9.1 13.87 9.29 13.68C9.48 13.49 9.72 13.39 10 13.39H14C14.28 13.39 14.52 13.49 14.71 13.68C14.9 13.87 15 14.11 15 14.39C15 14.67 14.9 14.91 14.71 15.1Z" fill="currentColor"/>
+</svg>

package/assets/tn-icons/custom/enclosure.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 17.3 9.9" style="enable-background:new 0 0 17.3 9.9;" xml:space="preserve">
+<g id="Enclosure_Icon_2_cols_3_rows" transform="translate(0 0)">
+	<path id="right-ear" d="M17.2,9.9h-2c0,0-0.1-0.1-0.1-0.2V0.2c0-0.1,0-0.2,0.1-0.2h2c0,0,0.1,0.1,0.1,0.2v9.6
+		C17.3,9.8,17.3,9.9,17.2,9.9z"/>
+	<path id="left-ear" d="M2.1,9.9h-2C0,9.9,0,9.8,0,9.7V0.2C0,0.1,0,0,0.1,0h2c0,0,0.1,0.1,0.1,0.2v9.6C2.2,9.8,2.1,9.9,2.1,9.9z"/>
+	<path id="drivetray" d="M8.2,2.8H2.7c-0.1,0-0.2,0-0.2,0V0c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7C8.4,2.8,8.3,2.8,8.2,2.8z"/>
+	<path id="drivetray-2" d="M14.5,2.8H9c-0.1,0-0.2,0-0.2,0V0c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7C14.7,2.8,14.6,2.8,14.5,2.8
+		z"/>
+	<path id="drivetray-3" d="M8.2,6.3H2.7c-0.1,0-0.2,0-0.2,0V3.5c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7C8.4,6.3,8.3,6.3,8.2,6.3
+		z"/>
+	<path id="drivetray-4" d="M14.5,6.3H9c-0.1,0-0.2,0-0.2,0V3.5c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7
+		C14.7,6.3,14.6,6.3,14.5,6.3z"/>
+	<path id="drivetray-5" d="M8.2,9.8H2.7c-0.1,0-0.2,0-0.2,0V7c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7C8.4,9.8,8.3,9.8,8.2,9.8z"
+		/>
+	<path id="drivetray-6" d="M14.5,9.8H9c-0.1,0-0.2,0-0.2,0V7c0,0,0.1,0,0.2,0h5.5c0.1,0,0.2,0,0.2,0v2.7C14.7,9.8,14.6,9.8,14.5,9.8
+		z"/>
+</g>
+</svg>

package/assets/tn-icons/custom/ha-disabled.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.33333,0,0,1.33333,0,0)">
+        <path d="M13.029,22L3,22C1.903,22 1,21.097 1,20L1,4C1,2.903 1.903,2 3,2L21,2C22.097,2 23,2.903 23,4L23,13.246L21,13.246L21,4L13,4L13,20L13.029,20L13.029,22ZM15,6L19,6L19,7.5L15,7.5L15,6ZM15,9L19,9L19,10.5L15,10.5L15,9ZM3,4L3,20L11,20L11,4L3,4ZM5,13L7,13L7,17L5,17L5,13ZM5,6L9,6L9,7.5L5,7.5L5,6ZM5,9L9,9L9,10.5L5,10.5L5,9Z"/>
+      <g transform="matrix(1.33991,0,0,1.33991,-6.21874,-6.25177)">
+            <path d="M20.41,19L22.54,21.12L21.12,22.54L19,20.41L16.88,22.54L15.47,21.12L17.59,19L15.47,16.88L16.88,15.47L19,17.59L21.12,15.47L22.54,16.88L20.41,19" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

package/assets/tn-icons/custom/ha-enabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,2H21A2,2 0 0,1 23,4V20A2,2 0 0,1 21,22H3A2,2 0 0,1 1,20V4A2,2 0 0,1 3,2M13,4V20H21V4H13M3,4V20H11V4H3M5,13H7V17H5V13M5,6H9V7.5H5V6M5,9H9V10.5H5V9M15,13H17V17H15V13M15,6H19V7.5H15V6M15,9H19V10.5H15V9Z" /></svg>

package/assets/tn-icons/custom/ha-reconnecting.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.33333,0,0,1.33333,0,0)">
+        <path d="M13.029,22L3,22C1.903,22 1,21.097 1,20L1,4C1,2.903 1.903,2 3,2L21,2C22.097,2 23,2.903 23,4L23,13.246L21,13.246L21,4L13,4L13,20L13.029,20L13.029,22ZM15,6L19,6L19,7.5L15,7.5L15,6ZM15,9L19,9L19,10.5L15,10.5L15,9ZM3,4L3,20L11,20L11,4L3,4ZM5,13L7,13L7,17L5,17L5,13ZM5,6L9,6L9,7.5L5,7.5L5,6ZM5,9L9,9L9,10.5L5,10.5L5,9Z"/>
+      <g transform="matrix(0.823927,0.823927,-0.823927,0.823927,18.206,-10.5412)">
+            <path d="M19,12L16.75,14.25L19,16.5L19,15C20.38,15 21.5,16.12 21.5,17.5C21.5,17.9 21.41,18.28 21.24,18.62L22.33,19.71C22.75,19.08 23,18.32 23,17.5C23,15.29 21.21,13.5 19,13.5L19,12M15.67,15.29C15.25,15.92 15,16.68 15,17.5C15,19.71 16.79,21.5 19,21.5L19,23L21.25,20.75L19,18.5L19,20C17.62,20 16.5,18.88 16.5,17.5C16.5,17.1 16.59,16.72 16.76,16.38L15.67,15.29Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

package/assets/tn-icons/custom/hdd-mirror.svg

@@ -0,0 +1,3 @@
+<svg aria-labelledby="tn-hdd-mirror" role="img" viewBox="115 15.3 60 70">
+    <path d="M 132.044 15.622 L 170.029 15.622 C 172.54 15.622 174.575 17.657 174.575 20.168 L 174.575 68.68 C 174.575 71.191 172.54 73.226 170.029 73.226 L 132.044 73.226 C 129.533 73.226 127.498 71.191 127.498 68.68 L 127.498 20.168 C 127.498 17.657 129.533 15.622 132.044 15.622 Z M 151.222 22.442 C 141.706 22.442 133.992 30.156 133.992 39.672 C 133.992 49.188 141.706 56.902 151.222 56.902 C 151.48 56.902 151.738 56.896 151.993 56.885 L 148.761 50.002 L 154.855 45.627 L 160.994 53.865 C 165.499 50.757 168.452 45.559 168.452 39.672 C 168.452 30.156 160.738 22.442 151.222 22.442 Z M 135.214 61.491 C 133.286 61.491 131.723 63.054 131.723 64.982 C 131.723 66.91 133.286 68.473 135.214 68.473 C 137.142 68.473 138.705 66.91 138.705 64.982 C 138.705 63.054 137.142 61.491 135.214 61.491 Z M 154.356 39.672 C 154.356 41.403 152.953 42.806 151.222 42.806 C 149.491 42.806 148.088 41.403 148.088 39.672 C 148.088 37.941 149.491 36.538 151.222 36.538 C 152.953 36.538 154.356 37.941 154.356 39.672 Z M 159.114 67.343 L 165.711 63.54 L 154.425 48.397 L 151.279 50.656 Z M 119.066 29.629 L 122.624 29.629 L 122.624 79.141 L 158.941 79.141 L 158.941 81.644 C 158.941 83.51 157.428 85.023 155.562 85.023 L 119.066 85.023 C 117.2 85.023 115.687 83.51 115.687 81.644 L 115.687 33.008 C 115.687 31.142 117.2 29.629 119.066 29.629 Z" style="fill: rgb(205, 205, 205);"></path>
+</svg>

package/assets/tn-icons/custom/hdd.svg

@@ -0,0 +1,3 @@
+<svg aria-labelledby="tn-hdd" role="img" viewBox="126.7 15 49 59">
+    <path d="M 132.044 15.622 L 170.029 15.622 C 172.54 15.622 174.575 17.657 174.575 20.168 L 174.575 68.68 C 174.575 71.191 172.54 73.226 170.029 73.226 L 132.044 73.226 C 129.533 73.226 127.498 71.191 127.498 68.68 L 127.498 20.168 C 127.498 17.657 129.533 15.622 132.044 15.622 Z M 151.222 22.442 C 141.706 22.442 133.992 30.156 133.992 39.672 C 133.992 49.188 141.706 56.902 151.222 56.902 C 151.48 56.902 151.738 56.896 151.993 56.885 L 148.761 50.002 L 154.855 45.627 L 160.994 53.865 C 165.499 50.757 168.452 45.559 168.452 39.672 C 168.452 30.156 160.738 22.442 151.222 22.442 Z M 135.214 61.491 C 133.286 61.491 131.723 63.054 131.723 64.982 C 131.723 66.91 133.286 68.473 135.214 68.473 C 137.142 68.473 138.705 66.91 138.705 64.982 C 138.705 63.054 137.142 61.491 135.214 61.491 Z M 154.356 39.672 C 154.356 41.403 152.953 42.806 151.222 42.806 C 149.491 42.806 148.088 41.403 148.088 39.672 C 148.088 37.941 149.491 36.538 151.222 36.538 C 152.953 36.538 154.356 37.941 154.356 39.672 Z M 159.114 67.343 L 165.711 63.54 L 154.425 48.397 L 151.279 50.656 L 159.114 67.343 Z" style="fill: rgb(205, 205, 205);"></path>
+</svg>

package/assets/tn-icons/custom/iscsi-share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.999" height="24" viewBox="0 0 23.999 24">
+  <path id="iscsi-share" d="M-3527.6,3184.5h-4.8a1.2,1.2,0,0,1-1.2-1.2h-8.4v-2.4h8.4a1.2,1.2,0,0,1,1.2-1.2h1.2v-2.4h-7.2a2.4,2.4,0,0,1-2.4-2.4v-12a2.4,2.4,0,0,1,2.4-2.4h7.2l2.4,2.4h7.2a2.4,2.4,0,0,1,2.4,2.4v9.6a2.4,2.4,0,0,1-2.4,2.4h-7.2v2.4h1.2a1.2,1.2,0,0,1,1.2,1.2h8.4v2.4h-8.4A1.2,1.2,0,0,1-3527.6,3184.5Zm.463-12.445h0l-.1.8.324.063a8.921,8.921,0,0,0,1.692.18,2.228,2.228,0,0,0,1.508-.481,1.833,1.833,0,0,0,.553-1.454,1.483,1.483,0,0,0-.378-1.121,3.2,3.2,0,0,0-1.3-.612,5.2,5.2,0,0,1-1.193-.432.652.652,0,0,1-.27-.589c0-.531.385-.8,1.143-.8.345,0,.928.047,1.782.144l.081-.81-.315-.054a9.9,9.9,0,0,0-1.638-.162,2.392,2.392,0,0,0-1.508.427,1.518,1.518,0,0,0-.544,1.264,1.571,1.571,0,0,0,.432,1.224,3.088,3.088,0,0,0,1.314.607,3.853,3.853,0,0,1,1.134.405.664.664,0,0,1,.252.572c0,.657-.375.99-1.116.99a15.275,15.275,0,0,1-1.854-.162Zm-2.655-5.319a2.056,2.056,0,0,0-1.827.724,4.573,4.573,0,0,0-.486,2.435,4.731,4.731,0,0,0,.482,2.457,2.025,2.025,0,0,0,1.831.747,8.441,8.441,0,0,0,1.755-.2l-.027-.828a10.21,10.21,0,0,1-1.638.135,1.155,1.155,0,0,1-1.089-.481,4.013,4.013,0,0,1-.279-1.809,3.906,3.906,0,0,1,.288-1.809,1.178,1.178,0,0,1,1.1-.482,9.358,9.358,0,0,1,1.62.144l.036-.81A7.881,7.881,0,0,0-3529.793,3166.736Zm-7.128,5.319h0l-.1.8.324.063a8.921,8.921,0,0,0,1.692.18,2.229,2.229,0,0,0,1.508-.481,1.833,1.833,0,0,0,.553-1.454,1.483,1.483,0,0,0-.378-1.121,3.2,3.2,0,0,0-1.3-.612,5.2,5.2,0,0,1-1.193-.432.652.652,0,0,1-.27-.589c0-.531.385-.8,1.143-.8.347,0,.929.047,1.782.144l.081-.81-.315-.054a9.9,9.9,0,0,0-1.638-.162,2.391,2.391,0,0,0-1.507.427,1.516,1.516,0,0,0-.545,1.264,1.571,1.571,0,0,0,.432,1.224,3.088,3.088,0,0,0,1.314.607,3.841,3.841,0,0,1,1.134.405.664.664,0,0,1,.252.572c0,.657-.375.99-1.116.99a15.275,15.275,0,0,1-1.854-.162Zm14.841-5.22V3173h1v-6.165Zm-16.956,1.665v4.5h.981v-4.5Zm0-1.8v1.035h.981V3166.7Z" transform="translate(3542 -3160.5)"/>
+</svg>

package/assets/tn-icons/custom/layout-full.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="17.59" viewBox="0 0 24 17.59">
+  <g id="Layout_0" data-name="Layout 0" transform="translate(-1108 -226.998)">
+    <g id="Rect" transform="translate(1108 226.998)" stroke="#000" stroke-width="1">
+      <rect width="24" height="17.59" stroke="none"/>
+      <rect x="0.5" y="0.5" width="23" height="16.59" fill="none"/>
+    </g>
+  </g>
+</svg>

package/assets/tn-icons/custom/layout-half-and-quarters.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.004" height="16.59" viewBox="0 0 23.004 16.59">
+  <g id="Layout_2" data-name="Layout 2" transform="translate(-1108.5 -227.498)">
+    <rect id="Rectangle_275" data-name="Rectangle 275" width="23" height="7.43" transform="translate(1108.5 227.498)"/>
+    <rect id="Rectangle_275-2" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1108.5 236.298)"/>
+    <rect id="Rectangle_275-3" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1120.684 236.298)"/>
+  </g>
+</svg>

package/assets/tn-icons/custom/layout-halves.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="16.593" viewBox="0 0 23 16.593">
+  <g id="Layout_4" data-name="Layout 4" transform="translate(1131.5 244.09) rotate(180)">
+    <rect id="Rectangle_275" data-name="Rectangle 275" width="23" height="7.43" transform="translate(1108.5 227.497)"/>
+    <rect id="Rectangle_275-2" data-name="Rectangle 275" width="23" height="7.43" transform="translate(1108.5 236.66)"/>
+  </g>
+</svg>

package/assets/tn-icons/custom/layout-quarters-and-half.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.004" height="16.58" viewBox="0 0 23.004 16.58">
+  <g id="Layout_3" data-name="Layout 3" transform="translate(1131.5 244.08) rotate(180)">
+    <rect id="Rectangle_275" data-name="Rectangle 275" width="23" height="7.43" transform="translate(1108.5 227.5)"/>
+    <rect id="Rectangle_275-2" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1108.497 236.29)"/>
+    <rect id="Rectangle_275-3" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1120.68 236.29)"/>
+  </g>
+</svg>

package/assets/tn-icons/custom/layout-quarters.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.004" height="16.59" viewBox="0 0 23.004 16.59">
+  <g id="Layout_1" data-name="Layout 1" transform="translate(-1108.5 -227.498)">
+    <rect id="Rectangle_275" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1108.5 236.298)"/>
+    <rect id="Rectangle_275-2" data-name="Rectangle 275" width="10.82" height="7.79" transform="translate(1120.68 236.298)"/>
+    <rect id="Rectangle_275-3" data-name="Rectangle 275" width="10.82" height="7.43" transform="translate(1108.5 227.498)"/>
+    <rect id="Rectangle_275-4" data-name="Rectangle 275" width="10.82" height="7.43" transform="translate(1120.684 227.498)"/>
+  </g>
+</svg>

package/assets/tn-icons/custom/network-upload-download-both.svg

@@ -0,0 +1,4 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m8.12293,0.42553l5.14736,5.15366l-3.86131,-0.03152l0,9.01497l-2.58471,0l0,-9.01497l-3.84555,0l5.14421,-5.12214z" fill="#33a9db"/>
+  <path d="m14.53743,9.40898l2.57841,-0.01576l0,9.01497l3.87707,0l-5.15366,5.1379l-5.15366,-5.15366l3.84555,0l0.0063,-8.98345z" fill="#33a9db"/>
+</svg>

package/assets/tn-icons/custom/network-upload-download-disabled.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14.76674,17.84909l-14.30914,-14.30914l1.54752,-1.53662l20.03061,20.04151l-1.53662,1.53662l-5.73237,-5.73237z"/>
+  <path d="m8.10983,0.40417l-2.29984,2.35768l3.60388,3.60388l0,-0.84203l3.77229,0.01684l-5.07633,-5.13637z"/>
+  <path d="m6.82995,9.90225l2.58392,2.61028l0,2.03771l-2.59344,0l0.00952,-4.64799z" />
+  <path d="m14.53827,9.44802l2.58501,-0.02014l0,4.63336l-2.59871,-2.57856l0.0137,-2.03465l0,-0.00001z" />
+  <path d="m18.18945,21.25942l-2.36598,2.33226l-5.16685,-5.18479l3.85719,0l0,-0.82526l3.67564,3.67779z" />
+</svg>

package/assets/tn-icons/custom/network-upload-download-down.svg

@@ -0,0 +1,4 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m8.12293,0.42553l5.14736,5.15366l-3.86131,-0.03152l0,9.01497l-2.58471,0l0,-9.01497l-3.84555,0l5.14421,-5.12214z" fill="#124b64"/>
+  <path d="m14.53743,9.40898l2.57841,-0.01576l0,9.01497l3.87707,0l-5.15366,5.1379l-5.15366,-5.15366l3.84555,0l0.0063,-8.98345z" fill="#33a9db"/>
+</svg>

package/assets/tn-icons/custom/network-upload-download-up.svg

@@ -0,0 +1,4 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m8.12293,0.42553l5.14736,5.15366l-3.86131,-0.03152l0,9.01497l-2.58471,0l0,-9.01497l-3.84555,0l5.14421,-5.12214z" fill="#33a9db"/>
+  <path d="m14.53743,9.40898l2.57841,-0.01576l0,9.01497l3.87707,0l-5.15366,5.1379l-5.15366,-5.15366l3.84555,0l0.0063,-8.98345z" fill="#124b64"/>
+</svg>

package/assets/tn-icons/custom/network-upload-download.svg

@@ -0,0 +1,4 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m8.12293,0.42553l5.14736,5.15366l-3.86131,-0.03152l0,9.01497l-2.58471,0l0,-9.01497l-3.84555,0l5.14421,-5.12214z" fill="#124b64"/>
+  <path d="m14.53743,9.40898l2.57841,-0.01576l0,9.01497l3.87707,0l-5.15366,5.1379l-5.15366,-5.15366l3.84555,0l0.0063,-8.98345z" fill="#124b64"/>
+</svg>

package/assets/tn-icons/custom/nfs-share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.999" height="24" viewBox="0 0 23.999 24">
+  <path id="nfs-share" d="M-3527.6,3184.5h-4.8a1.2,1.2,0,0,1-1.2-1.2h-8.4v-2.4h8.4a1.2,1.2,0,0,1,1.2-1.2h1.2v-2.4h-7.2a2.4,2.4,0,0,1-2.4-2.4v-12a2.4,2.4,0,0,1,2.4-2.4h7.2l2.4,2.4h7.2a2.4,2.4,0,0,1,2.4,2.4v9.6a2.4,2.4,0,0,1-2.4,2.4h-7.2v2.4h1.2a1.2,1.2,0,0,1,1.2,1.2h8.4v2.4h-8.4A1.2,1.2,0,0,1-3527.6,3184.5Zm1.147-12.445h0l-.1.8.324.063a8.913,8.913,0,0,0,1.692.18,2.229,2.229,0,0,0,1.508-.481,1.833,1.833,0,0,0,.553-1.454,1.482,1.482,0,0,0-.378-1.121,3.2,3.2,0,0,0-1.3-.612,5.2,5.2,0,0,1-1.193-.432.652.652,0,0,1-.27-.589c0-.531.385-.8,1.143-.8.346,0,.929.047,1.782.144l.081-.81-.315-.054a9.9,9.9,0,0,0-1.638-.162,2.391,2.391,0,0,0-1.507.427,1.516,1.516,0,0,0-.545,1.264,1.571,1.571,0,0,0,.432,1.224,3.091,3.091,0,0,0,1.314.607,3.859,3.859,0,0,1,1.134.405.666.666,0,0,1,.252.572c0,.657-.375.99-1.116.99a15.275,15.275,0,0,1-1.854-.162Zm-4.554-5.22V3173h1v-2.34h2.349v-.873h-2.349v-2.079h2.826v-.873Zm-6.174,0V3173h1v-5.291h.126l1.917,5.292h1.71v-6.165h-1v5.283h-.135l-1.872-5.283Z" transform="translate(3542 -3160.5)"/>
+</svg>

package/assets/tn-icons/custom/nvme-share.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="iscsi-share" transform="matrix(1,0,0,1,3542,-3160.5)">
+        <path d="M-3527.6,3184.5L-3532.4,3184.5C-3533.06,3184.5 -3533.6,3183.96 -3533.6,3183.3L-3542,3183.3L-3542,3180.9L-3533.6,3180.9C-3533.6,3180.24 -3533.06,3179.7 -3532.4,3179.7L-3531.2,3179.7L-3531.2,3177.3L-3538.4,3177.3C-3539.72,3177.3 -3540.8,3176.22 -3540.8,3174.9L-3540.8,3162.9C-3540.8,3161.58 -3539.72,3160.5 -3538.4,3160.5L-3531.2,3160.5L-3528.8,3162.9L-3521.6,3162.9C-3520.28,3162.9 -3519.2,3163.98 -3519.2,3165.3L-3519.2,3174.9C-3519.2,3176.22 -3520.28,3177.3 -3521.6,3177.3L-3528.8,3177.3L-3528.8,3179.7L-3527.6,3179.7C-3526.94,3179.7 -3526.4,3180.24 -3526.4,3180.9L-3518,3180.9L-3518,3183.3L-3526.4,3183.3C-3526.4,3183.96 -3526.94,3184.5 -3527.6,3184.5ZM-3520.86,3172.24C-3521.22,3172.27 -3521.57,3172.29 -3521.9,3172.29C-3522.24,3172.29 -3522.47,3172.2 -3522.6,3172.04C-3522.72,3171.88 -3522.79,3171.63 -3522.79,3171.28L-3520.57,3171.28L-3520.52,3170.63C-3520.52,3169.36 -3521.02,3168.72 -3522.03,3168.72C-3523.06,3168.72 -3523.58,3169.46 -3523.58,3170.94C-3523.58,3171.69 -3523.46,3172.23 -3523.23,3172.57C-3523,3172.91 -3522.62,3173.08 -3522.09,3173.08C-3521.67,3173.08 -3521.19,3173.01 -3520.64,3172.89L-3520.66,3172.21L-3520.86,3172.24ZM-3521.29,3170.58L-3522.8,3170.58C-3522.79,3170.19 -3522.73,3169.9 -3522.61,3169.73C-3522.49,3169.56 -3522.29,3169.47 -3522.03,3169.47C-3521.76,3169.47 -3521.57,3169.56 -3521.46,3169.72C-3521.34,3169.88 -3521.29,3170.17 -3521.29,3170.58ZM-3529.43,3172.99L-3528.63,3172.99L-3528.63,3168.3L-3528.52,3168.3L-3527.36,3172.75L-3526.53,3172.75L-3525.38,3168.3L-3525.27,3168.3L-3525.27,3172.99L-3524.47,3172.99L-3524.47,3167.27L-3525.85,3167.27L-3526.95,3171.74L-3528.04,3167.27L-3529.43,3167.27L-3529.43,3172.99ZM-3538.73,3172.99L-3537.93,3172.99L-3537.93,3168.08L-3537.83,3168.08L-3536.31,3172.99L-3534.95,3172.99L-3534.95,3167.27L-3535.74,3167.27L-3535.74,3172.17L-3535.85,3172.17L-3537.34,3167.27L-3538.73,3167.27L-3538.73,3172.99ZM-3531.04,3167.27L-3532.01,3172.17L-3532.37,3172.17L-3533.34,3167.27L-3534.17,3167.27L-3532.97,3172.99L-3531.41,3172.99L-3530.2,3167.27L-3531.04,3167.27Z"/>
+    </g>
+</svg>

package/assets/tn-icons/custom/replication.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.186114,0,0,0.186114,7.04646,15.6216)">
+        <g transform="matrix(1,0,0,1,-31,-24.5)">
+            <path d="M61.03,19.16L61.03,32.17L33.19,48.25L33.19,35.24L61.03,19.16ZM27.86,35.24L27.86,48.24L0,32.17L0,19.17L12.59,26.43C12.59,26.43 12.62,26.45 12.64,26.46L27.87,35.25L27.86,35.24ZM41.79,24.13L30.53,30.64L19.25,24.13L30.53,17.62L41.79,24.13ZM58.38,14.55L47.11,21.06L33.19,13.01L33.19,0L58.38,14.55ZM27.86,0L27.86,13.01L13.93,21.05L2.65,14.55L27.86,0Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g transform="matrix(0.186114,0,0,0.186114,17.5609,8.86895)">
+        <g transform="matrix(1,0,0,1,-31,-24.5)">
+            <path d="M61.03,19.16L61.03,32.17L33.19,48.25L33.19,35.24L61.03,19.16ZM27.86,35.24L27.86,48.24L0,32.17L0,19.17L12.59,26.43C12.59,26.43 12.62,26.45 12.64,26.46L27.87,35.25L27.86,35.24ZM41.79,24.13L30.53,30.64L19.25,24.13L30.53,17.62L41.79,24.13ZM58.38,14.55L47.11,21.06L33.19,13.01L33.19,0L58.38,14.55ZM27.86,0L27.86,13.01L13.93,21.05L2.65,14.55L27.86,0Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

package/assets/tn-icons/custom/smb-share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.999" height="24" viewBox="0 0 23.999 24">
+  <path id="smb-share" d="M-3527.6,3184.5h-4.8a1.2,1.2,0,0,1-1.2-1.2h-8.4v-2.4h8.4a1.2,1.2,0,0,1,1.2-1.2h1.2v-2.4h-7.2a2.4,2.4,0,0,1-2.4-2.4v-12a2.4,2.4,0,0,1,2.4-2.4h7.2l2.4,2.4h7.2a2.4,2.4,0,0,1,2.4,2.4v9.6a2.4,2.4,0,0,1-2.4,2.4h-7.2v2.4h1.2a1.2,1.2,0,0,1,1.2,1.2h8.4v2.4h-8.4A1.2,1.2,0,0,1-3527.6,3184.5Zm-10.882-12.445h0l-.1.8.324.063a8.921,8.921,0,0,0,1.692.18,2.229,2.229,0,0,0,1.508-.481,1.833,1.833,0,0,0,.553-1.454,1.483,1.483,0,0,0-.378-1.121,3.2,3.2,0,0,0-1.3-.612,5.2,5.2,0,0,1-1.193-.432.652.652,0,0,1-.27-.589c0-.531.385-.8,1.143-.8.346,0,.928.047,1.782.144l.081-.81-.315-.054a9.9,9.9,0,0,0-1.638-.162,2.391,2.391,0,0,0-1.508.427,1.518,1.518,0,0,0-.544,1.264,1.571,1.571,0,0,0,.432,1.224,3.094,3.094,0,0,0,1.314.607,3.841,3.841,0,0,1,1.134.405.664.664,0,0,1,.252.572c0,.657-.375.99-1.116.99a15.275,15.275,0,0,1-1.854-.162Zm12.708-5.22V3173h2.412c1.3,0,1.962-.587,1.962-1.746a1.383,1.383,0,0,0-.882-1.431,1.354,1.354,0,0,0,.553-.522,1.79,1.79,0,0,0,.176-.864,1.489,1.489,0,0,0-.468-1.219,2.211,2.211,0,0,0-1.413-.383Zm-2.556,1.107h.135V3173h1.008v-6.165h-1.746l-1.377,4.815-1.377-4.815h-1.737V3173h1v-5.058h.135l1.458,4.806h1.044l1.458-4.805Zm4.914,4.194h-1.359v-1.827h1.341a1.227,1.227,0,0,1,.72.2.808.808,0,0,1,.288.707.887.887,0,0,1-.248.711A1.145,1.145,0,0,1-3523.417,3172.135Zm-.036-2.673h-1.323V3167.7h1.287c.609,0,.918.288.918.855A.794.794,0,0,1-3523.452,3169.463Z" transform="translate(3542 -3160.5)"/>
+</svg>

package/assets/tn-icons/custom/ssd-mirror.svg

@@ -0,0 +1,3 @@
+<svg aria-labelledby="tn-ssd-mirror" role="img" viewBox="115 15.3 60 71">
+    <path d="M 132.895 15.383 L 140.145 15.383 L 140.145 19.883 C 140.145 22.104 141.945 23.904 144.166 23.904 L 157.191 23.904 C 159.412 23.904 161.212 22.104 161.212 19.883 L 161.212 15.383 L 168.463 15.383 C 171.537 15.383 174.029 17.875 174.029 20.949 L 174.029 69.064 C 174.029 72.138 171.537 74.63 168.463 74.63 L 132.895 74.63 C 129.821 74.63 127.329 72.138 127.329 69.064 L 127.329 20.949 C 127.329 17.875 129.821 15.383 132.895 15.383 Z M 143.388 15.658 L 150.88 15.658 C 151.354 15.658 151.739 16.043 151.739 16.517 L 151.739 20.367 C 151.739 20.841 151.354 21.226 150.88 21.226 L 143.388 21.226 C 142.914 21.226 142.529 20.841 142.529 20.367 L 142.529 16.517 C 142.529 16.043 142.914 15.658 143.388 15.658 Z M 155.063 15.658 L 157.521 15.658 C 158.123 15.658 158.611 16.146 158.611 16.748 L 158.611 20.162 C 158.611 20.764 158.123 21.252 157.521 21.252 L 155.063 21.252 C 154.461 21.252 153.973 20.764 153.973 20.162 L 153.973 16.748 C 153.973 16.146 154.461 15.658 155.063 15.658 Z M 135.812 39.088 L 135.812 59.5 C 135.812 62.22 138.017 64.425 140.737 64.425 L 160.622 64.425 C 163.342 64.425 165.547 62.22 165.547 59.5 L 165.547 39.088 C 165.547 36.368 163.342 34.163 160.622 34.163 L 140.737 34.163 C 138.017 34.163 135.812 36.368 135.812 39.088 Z M 140.066 36.834 L 161.293 36.834 C 162.345 36.834 163.197 37.686 163.197 38.738 L 163.197 59.85 C 163.197 60.902 162.345 61.754 161.293 61.754 L 140.066 61.754 C 139.014 61.754 138.162 60.902 138.162 59.85 L 138.162 38.738 C 138.162 37.686 139.014 36.834 140.066 36.834 Z M 167.65 20.027 C 166.469 20.027 165.512 20.984 165.512 22.165 C 165.512 23.346 166.469 24.303 167.65 24.303 C 168.831 24.303 169.788 23.346 169.788 22.165 C 169.788 20.984 168.831 20.027 167.65 20.027 Z M 167.65 65.71 C 166.469 65.71 165.512 66.667 165.512 67.848 C 165.512 69.029 166.469 69.986 167.65 69.986 C 168.831 69.986 169.788 69.029 169.788 67.848 C 169.788 66.667 168.831 65.71 167.65 65.71 Z M 133.708 65.71 C 132.527 65.71 131.57 66.667 131.57 67.848 C 131.57 69.029 132.527 69.986 133.708 69.986 C 134.889 69.986 135.846 69.029 135.846 67.848 C 135.846 66.667 134.889 65.71 133.708 65.71 Z M 133.708 20.027 C 132.527 20.027 131.57 20.984 131.57 22.165 C 131.57 23.346 132.527 24.303 133.708 24.303 C 134.889 24.303 135.846 23.346 135.846 22.165 C 135.846 20.984 134.889 20.027 133.708 20.027 Z M 118.868 31.077 L 122.426 31.077 L 122.426 80.589 L 158.743 80.589 L 158.743 83.092 C 158.743 84.958 157.23 86.471 155.364 86.471 L 118.868 86.471 C 117.002 86.471 115.489 84.958 115.489 83.092 L 115.489 34.456 C 115.489 32.59 117.002 31.077 118.868 31.077 Z" style="fill: rgb(216, 216, 216);"></path>
+</svg>

package/assets/tn-icons/custom/ssd.svg

@@ -0,0 +1,3 @@
+<svg aria-labelledby="tn-ssd" role="img" viewBox="126.7 15.3 49 59">
+    <path d="M 132.935 15.223 L 140.185 15.223 L 140.185 19.723 C 140.185 21.944 141.985 23.744 144.206 23.744 L 157.231 23.744 C 159.452 23.744 161.252 21.944 161.252 19.723 L 161.252 15.223 L 168.503 15.223 C 171.577 15.223 174.069 17.715 174.069 20.789 L 174.069 68.904 C 174.069 71.978 171.577 74.47 168.503 74.47 L 132.935 74.47 C 129.861 74.47 127.369 71.978 127.369 68.904 L 127.369 20.789 C 127.369 17.715 129.861 15.223 132.935 15.223 Z M 143.428 15.498 L 150.92 15.498 C 151.394 15.498 151.779 15.883 151.779 16.357 L 151.779 20.207 C 151.779 20.681 151.394 21.066 150.92 21.066 L 143.428 21.066 C 142.954 21.066 142.569 20.681 142.569 20.207 L 142.569 16.357 C 142.569 15.883 142.954 15.498 143.428 15.498 Z M 155.103 15.498 L 157.561 15.498 C 158.163 15.498 158.651 15.986 158.651 16.588 L 158.651 20.002 C 158.651 20.604 158.163 21.092 157.561 21.092 L 155.103 21.092 C 154.501 21.092 154.013 20.604 154.013 20.002 L 154.013 16.588 C 154.013 15.986 154.501 15.498 155.103 15.498 Z M 135.852 38.928 L 135.852 59.34 C 135.852 62.06 138.057 64.265 140.777 64.265 L 160.662 64.265 C 163.382 64.265 165.587 62.06 165.587 59.34 L 165.587 38.928 C 165.587 36.208 163.382 34.003 160.662 34.003 L 140.777 34.003 C 138.057 34.003 135.852 36.208 135.852 38.928 Z M 140.106 36.674 L 161.333 36.674 C 162.385 36.674 163.237 37.526 163.237 38.578 L 163.237 59.69 C 163.237 60.742 162.385 61.594 161.333 61.594 L 140.106 61.594 C 139.054 61.594 138.202 60.742 138.202 59.69 L 138.202 38.578 C 138.202 37.526 139.054 36.674 140.106 36.674 Z M 167.69 19.867 C 166.509 19.867 165.552 20.824 165.552 22.005 C 165.552 23.186 166.509 24.143 167.69 24.143 C 168.871 24.143 169.828 23.186 169.828 22.005 C 169.828 20.824 168.871 19.867 167.69 19.867 Z M 167.69 65.55 C 166.509 65.55 165.552 66.507 165.552 67.688 C 165.552 68.869 166.509 69.826 167.69 69.826 C 168.871 69.826 169.828 68.869 169.828 67.688 C 169.828 66.507 168.871 65.55 167.69 65.55 Z M 133.748 65.55 C 132.567 65.55 131.61 66.507 131.61 67.688 C 131.61 68.869 132.567 69.826 133.748 69.826 C 134.929 69.826 135.886 68.869 135.886 67.688 C 135.886 66.507 134.929 65.55 133.748 65.55 Z M 133.748 19.867 C 132.567 19.867 131.61 20.824 131.61 22.005 C 131.61 23.186 132.567 24.143 133.748 24.143 C 134.929 24.143 135.886 23.186 135.886 22.005 C 135.886 20.824 134.929 19.867 133.748 19.867 Z" style="fill: rgb(216, 216, 216);"></path>
+</svg>

package/assets/tn-icons/custom/true-cloud.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M6.5,20C4.98,20 3.683,19.477 2.61,18.43C1.537,17.377 1,16.093 1,14.58C1,13.28 1.39,12.12 2.17,11.1C2.957,10.08 3.983,9.43 5.25,9.15C5.67,7.617 6.503,6.377 7.75,5.43C9.003,4.477 10.42,4 12,4C13.953,4 15.607,4.68 16.96,6.04C18.32,7.393 19,9.047 19,11C20.153,11.133 21.107,11.633 21.86,12.5C22.62,13.353 23,14.353 23,15.5C23,16.753 22.563,17.817 21.69,18.69C20.817,19.563 19.753,20 18.5,20M6.5,18L18.5,18C19.2,18 19.79,17.757 20.27,17.27C20.757,16.79 21,16.2 21,15.5C21,14.8 20.757,14.21 20.27,13.73C19.79,13.243 19.2,13 18.5,13L17,13L17,11C17,9.62 16.513,8.44 15.54,7.46C14.567,6.487 13.387,6 12,6C10.62,6 9.44,6.487 8.46,7.46C7.487,8.44 7,9.62 7,11L6.5,11C5.533,11 4.71,11.343 4.03,12.03C3.343,12.71 3,13.533 3,14.5C3,15.467 3.343,16.3 4.03,17C4.71,17.667 5.533,18 6.5,18" style="fill-rule:nonzero;"/>
+    <g transform="matrix(0.135117,0,0,0.135117,11.9087,13.5272)">
+        <g transform="matrix(1,0,0,1,-31,-24.5)">
+            <path d="M61.03,19.16L61.03,32.17L33.19,48.25L33.19,35.24L61.03,19.16ZM27.86,35.24L27.86,48.24L0,32.17L0,19.17L12.59,26.43C12.59,26.43 12.62,26.45 12.64,26.46L27.87,35.25L27.86,35.24ZM41.79,24.13L30.53,30.64L19.25,24.13L30.53,17.62L41.79,24.13ZM58.38,14.55L47.11,21.06L33.19,13.01L33.19,0L58.38,14.55ZM27.86,0L27.86,13.01L13.93,21.05L2.65,14.55L27.86,0Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

package/assets/tn-icons/custom/truecommand-logo-mark-color.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.8564 71.1493">
+  <g id="full-rgb">
+    <g id="logoMark">
+      <polygon id="logoMark_PathItem_" data-name="logoMark &lt;PathItem&gt;" points="28.961 9.106 7.388 24.743 10.188 52.475 28.961 61.418 51.306 47.445 51.306 19.963 28.961 9.106" style="fill: none"/>
+      <path id="logoMark_CompoundPathItem_" data-name="logoMark &lt;CompoundPathItem&gt;" d="M51.304,47.4432,32.5383,58.2687H28.9578L10.1922,47.4328V25.7716l1.7849-3.1034L28.9578,12.87h3.5805l16.97,9.798,1.7956,3.1034v-.6125l11.5524-6.6737L30.8051,0,0,17.78v35.58l30.8051,17.79L62.5346,52.83l-11.2306-8.2Z" style="fill: #0095d5"/>
+      <polygon id="logoMark_PathItem_2" data-name="logoMark &lt;PathItem&gt;" points="38.403 29.124 30.816 33.504 23.218 29.124 30.816 24.744 38.403 29.124" style="fill: #aeadae"/>
+      <path id="logoMark_CompoundPathItem_2" data-name="logoMark &lt;CompoundPathItem&gt;" d="M32.5387,49.519,51.3043,38.6832V34.542L32.5387,45.3674Zm16.97-26.8508-7.5873,4.39-8.9571-5.1792-.4257-.2387v4.1l5.8641,3.3836-5.8641,3.3837v4.1L51.3043,25.7716ZM10.1925,38.6832l8.4691,4.8886.0416.0208,10.255,5.9264V45.3674L10.1925,34.5316Zm9.3722-11.6246-7.5872-4.39-1.785,3.1034,8.4691,4.8989.0416.0208,10.255,5.9161V32.4349l-5.74-3.3109,5.74-3.3109V21.6407l-.6959.4047Z" style="fill: #0095d5"/>
+      <polygon id="logoMark_PathItem_3" data-name="logoMark &lt;PathItem&gt;" points="32.539 12.87 32.539 25.74 30.816 24.744 28.958 25.813 28.958 12.87 32.539 12.87" style="fill: #0095d5"/>
+      <polygon id="logoMark_PathItem_4" data-name="logoMark &lt;PathItem&gt;" points="32.539 32.508 32.539 58.269 28.958 58.269 28.958 32.435 30.816 33.504 32.539 32.508" style="fill: #0095d5"/>
+      <polygon id="logoMark_PathItem_5" data-name="logoMark &lt;PathItem&gt;" points="0 17.78 11.977 22.668 11.977 22.668 28.958 12.87 32.539 12.87 49.509 22.668 51.304 25.159 62.856 18.485 30.805 0 0 17.78" style="fill: #31beec"/>
+      <polygon id="logoMark_PathItem_6" data-name="logoMark &lt;PathItem&gt;" points="0 53.359 10.192 47.433 10.192 25.772 11.977 22.668 0 17.78 0 53.359" style="fill: #31beec"/>
+    </g>
+  </g>
+</svg>

package/assets/tn-icons/custom/truecommand-logo-mark.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.8564 71.1493">
+  <g id="white-rgb">
+    <path id="logoMark_CompoundPathItem_" data-name="logoMark &lt;CompoundPathItem&gt;" d="M51.304,47.4432,32.5383,58.2687H28.9578L10.1922,47.4328V25.7716l1.7849-3.1034L28.9578,12.87h3.5805l16.97,9.798,1.7956,3.1034v-.6125l11.5524-6.6737L30.8051,0,0,17.78v35.58l30.8051,17.79L62.5346,52.83l-11.2306-8.2Z"/>
+    <path id="logoMark_CompoundPathItem_2" data-name="logoMark &lt;CompoundPathItem&gt;" d="M32.5387,49.519,51.3043,38.6832V34.542L32.5387,45.3674Zm16.97-26.8508-7.5873,4.39-8.9571-5.1792-.4257-.2387v4.1l5.8641,3.3836-5.8641,3.3837v4.1L51.3043,25.7716ZM10.1925,38.6832l8.4691,4.8886.0416.0208,10.255,5.9264V45.3674L10.1925,34.5316Zm9.3722-11.6246-7.5872-4.39-1.785,3.1034,8.4691,4.8989.0416.0208,10.255,5.9161V32.4349l-5.74-3.3109,5.74-3.3109V21.6407l-.6959.4047Z"/>
+    <polygon id="logoMark_PathItem_" data-name="logoMark &lt;PathItem&gt;" points="32.539 12.87 32.539 25.74 30.816 24.744 28.958 25.813 28.958 12.87 32.539 12.87"/>
+    <polygon id="logoMark_PathItem_2" data-name="logoMark &lt;PathItem&gt;" points="32.539 32.508 32.539 58.269 28.958 58.269 28.958 32.435 30.816 33.504 32.539 32.508"/>
+    <polygon id="logoMark_PathItem_3" data-name="logoMark &lt;PathItem&gt;" points="0 17.78 11.977 22.668 11.977 22.668 28.958 12.87 32.539 12.87 49.509 22.668 51.304 25.159 62.856 18.485 30.805 0 0 17.78"/>
+    <polygon id="logoMark_PathItem_4" data-name="logoMark &lt;PathItem&gt;" points="0 53.359 10.192 47.433 10.192 25.772 11.977 22.668 0 17.78 0 53.359" />
+  </g>
+</svg>

package/assets/tn-icons/custom/truenas-connect-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43.494" height="28.99" fill="none"><g style="fill: rgb(0, 0, 0);"><path d="M34.436 10.874A12.849 12.849 0 0 0 21.755.004 14.536 14.536 0 0 0 9.073 7.25 10.404 10.404 0 0 0 .015 18.12c0 6.003 4.866 10.87 10.87 10.87h23.551a9.058 9.058 0 0 0 9.058-9.058 9.67 9.67 0 0 0-9.058-9.058Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;" class="fills"/></g><g style="fill: rgb(0, 0, 0);"><path d="M34.319 14.237v5.358l-11.47 6.626v-5.358Z" class="fills"/><path d="M20.654 20.863v5.358L9.175 19.594v-5.357l5.187 2.99a.076.076 0 0 0 .019.012Z" class="fills"/><path d="m26.392 16.283-4.641 2.685-4.644-2.68 4.644-2.681Z" class="fills"/><path d="m33.226 12.339-4.643 2.68-5.734-3.314V6.343Z" class="fills"/><path d="M20.654 6.343v5.362l-5.741 3.311-4.644-2.677Z" class="fills"/></g></svg>

package/assets/tn-icons/custom/truenas-logo-ce-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 293.68 83.01"><path fill="#0a95d3" d="M108.63 3.46v4.67H96.05V44.8H90.9V8.13H78.32V3.46h30.31ZM124.86 21.31c-1.26-1.74-2.82-2.52-5.03-2.52-3.66 0-6.41 2.76-6.41 7.25v18.75h-4.79V14.84h4.79v2.94c1.26-2.1 3.29-3.42 6.95-3.42 4.07 0 6.65 1.38 8.57 4.07l-4.07 2.88h-.01ZM155.96 44.79h-4.79v-2.94c-1.5 2.28-3.59 3.41-8.03 3.41-6.41 0-10.9-3.36-10.9-11.74V14.84h4.79v18.63c0 6.05 3.29 7.37 6.83 7.37 4.49 0 7.31-3.18 7.31-7.31V14.84h4.79V44.8v-.01ZM184.35 40.24c-2.1 3.66-5.27 5.03-10.48 5.03-8.03 0-12.82-5.21-12.82-13.54v-3.95c0-8.51 4.01-13.42 11.86-13.42s11.86 4.85 11.86 13.42v3.12h-18.93v.84c0 5.15 2.46 9.23 7.67 9.23 3.89 0 5.87-1.14 7.13-3.35l3.72 2.64-.01-.02ZM165.84 26.7h14.08c-.24-5.03-2.46-8.03-7.01-8.03s-6.77 3.06-7.07 8.03ZM222.15 3.46V44.8h-6.17l-16.83-28.1v28.1h-6.71V3.46h5.99l17.01 28.46V3.46h6.71ZM226.82 44.79 241.2 3.45h6.59l14.38 41.34h-7.37l-2.82-8.57h-14.92l-2.82 8.57h-7.43.01Zm12.17-14.55h11.02l-5.51-16.72-5.51 16.72ZM287.81 13.46c-2.04-2.82-4.25-4.49-8.93-4.49-4.25 0-6.77 1.92-6.77 5.39 0 3.95 3.12 5.51 8.87 6.77 8.33 1.8 12.64 4.91 12.64 12.34 0 6.17-4.13 11.86-14.08 11.86-7.07 0-12.04-2.16-15.46-6.77l5.45-3.77c2.46 2.94 4.91 4.49 9.65 4.49 5.69 0 7.49-2.52 7.49-5.51 0-3.3-1.86-5.33-9.05-6.89-7.97-1.68-12.46-5.51-12.46-12.52 0-6.23 4.07-11.44 13.78-11.44 6.59 0 11.2 2.22 14.14 6.77l-5.27 3.77Z"/><a xlink:href="39.967"><path fill="#35beeb" d="M61.03 19.16v13.01L33.19 48.25V35.24l27.84-16.08z"/></a><a xlink:href="56.178"><path fill="#0a95d3" d="M27.86 35.24v13L0 32.17v-13l12.59 7.26s.03.02.05.03l15.23 8.79-.01-.01Z"/></a><a xlink:href="31.995"><path fill="#afadae" d="m41.79 24.13-11.26 6.51-11.28-6.51 11.28-6.51 11.26 6.51z"/></a><a xlink:href="56.178"><path fill="#0a95d3" d="m58.38 14.55-11.27 6.51-13.92-8.05V0l25.19 14.55z"/></a><a xlink:href="39.967"><path fill="#35beeb" d="M27.86 0v13.01l-13.93 8.04-11.28-6.5L27.86 0z"/></a><path fill="#0a95d3" d="M118.29 64.97c-.51-.31-1.08-.46-1.73-.46s-1.22.15-1.73.46c-.51.31-.91.75-1.2 1.34-.29.59-.44 1.32-.44 2.18s.15 1.59.44 2.18.69 1.04 1.2 1.34c.51.31 1.08.46 1.73.46s1.22-.15 1.73-.46c.51-.3.91-.75 1.2-1.34.29-.59.44-1.32.44-2.18s-.15-1.59-.44-2.18c-.29-.59-.69-1.04-1.2-1.34ZM233.39 65.05c-.55-.3-1.23-.45-2.05-.45h-1.95v7.8h1.84c.85 0 1.56-.15 2.13-.46.56-.31.99-.75 1.27-1.33s.42-1.29.42-2.13-.14-1.54-.42-2.11c-.28-.58-.69-1.02-1.24-1.32ZM269.71 64.97c-.51-.31-1.08-.46-1.73-.46s-1.22.15-1.73.46c-.51.31-.91.75-1.2 1.34s-.44 1.32-.44 2.18.15 1.59.44 2.18.69 1.04 1.2 1.34c.51.31 1.08.46 1.73.46s1.22-.15 1.73-.46c.51-.3.91-.75 1.2-1.34s.44-1.32.44-2.18-.15-1.59-.44-2.18c-.29-.59-.69-1.04-1.2-1.34Z"/><path fill="#0a95d3" d="M90.68 54.01v29h203v-29h-203Zm10.09 16.67c.29.59.7 1.04 1.21 1.34.51.3 1.08.45 1.72.45.35 0 .69-.05 1.01-.14s.61-.23.87-.41.48-.4.66-.66.31-.56.37-.9h1.71c-.09.53-.27 1-.53 1.44s-.59.81-1 1.13a4.5 4.5 0 0 1-1.39.73c-.52.17-1.09.26-1.71.26-.97 0-1.83-.22-2.59-.65a4.612 4.612 0 0 1-1.79-1.87c-.44-.81-.65-1.78-.65-2.91s.22-2.1.66-2.91 1.04-1.44 1.79-1.87c.75-.43 1.62-.65 2.59-.65.59 0 1.15.08 1.67.24s.98.39 1.39.7c.41.31.75.68 1.02 1.13.27.44.45.95.55 1.52h-1.71c-.07-.34-.19-.65-.37-.91s-.4-.48-.66-.67c-.26-.18-.55-.32-.87-.41-.32-.09-.66-.14-1.01-.14-.65 0-1.22.15-1.73.46s-.91.76-1.2 1.35c-.29.59-.44 1.32-.44 2.17s.15 1.59.44 2.18h-.01Zm20.18.73c-.44.81-1.04 1.44-1.8 1.87-.76.44-1.62.65-2.59.65s-1.83-.22-2.59-.65c-.76-.43-1.36-1.06-1.8-1.87-.44-.81-.66-1.78-.66-2.91s.22-2.1.66-2.91 1.04-1.44 1.8-1.87c.76-.43 1.63-.65 2.59-.65s1.83.22 2.59.65c.76.44 1.36 1.06 1.8 1.87s.66 1.78.66 2.91-.22 2.1-.66 2.91Zm15.66 2.38H135v-7.66h-.1l-3.3 7.65h-1.33l-3.3-7.65h-.1v7.67h-1.61V63.21h2.05l3.57 8.23h.13l3.57-8.23h2.05V73.8l-.02-.01Zm15.37 0h-1.61v-7.66h-.1l-3.3 7.65h-1.33l-3.3-7.65h-.1v7.67h-1.61V63.21h2.05l3.57 8.23h.13l3.57-8.23H152V73.8l-.02-.01Zm12.9-3.62c0 .74-.18 1.4-.55 1.97-.37.57-.89 1.02-1.55 1.34s-1.45.49-2.35.49-1.67-.16-2.34-.49c-.67-.33-1.19-.77-1.55-1.34-.37-.57-.55-1.23-.55-1.97v-6.96h1.69v6.84c0 .48.11.9.34 1.28.22.37.54.66.95.88.41.21.9.32 1.47.32s1.06-.11 1.47-.32.73-.5.95-.88c.22-.37.33-.8.33-1.28v-6.84h1.7v6.96h-.01Zm13.04 3.62h-1.55l-5.69-7.77h-.1v7.77h-1.69V63.2h1.56l5.7 7.78h.1V63.2h1.67v10.59Zm5.69 0h-1.69V63.2h1.69v10.59Zm12.11-9.21h-3.49v9.21h-1.68v-9.21h-3.49V63.2h8.67v1.38h-.01Zm8.34 5.05v4.16h-1.68v-4.16l-4.06-6.43h1.92l2.93 4.81h.12l2.93-4.81h1.92l-4.06 6.43h-.02Zm19.9 4.16h-7.09V63.2h7.02v1.38h-5.33v3.23h4.97v1.37h-4.97v3.24h5.4v1.38-.01Zm12.12-2.47c-.42.79-1.04 1.4-1.84 1.83-.8.43-1.77.64-2.91.64h-3.63V63.2h3.74c1.1 0 2.04.21 2.83.63.79.42 1.39 1.03 1.81 1.81.42.79.63 1.73.63 2.83s-.21 2.05-.64 2.84l.01.01Zm5.96 2.47h-1.69V63.2h1.69v10.59Zm12.12-9.21h-3.49v9.21h-1.68v-9.21h-3.49V63.2h8.67v1.38h-.01Zm5.14 9.21h-1.69V63.2h1.69v10.59Zm13.07-2.38c-.44.81-1.04 1.44-1.8 1.87-.76.44-1.62.65-2.59.65s-1.83-.22-2.59-.65a4.7 4.7 0 0 1-1.8-1.87c-.44-.81-.66-1.78-.66-2.91s.22-2.1.66-2.91 1.04-1.44 1.8-1.87c.76-.44 1.62-.65 2.59-.65s1.83.22 2.59.65c.76.44 1.36 1.06 1.8 1.87s.66 1.78.66 2.91-.22 2.1-.66 2.91Zm13.34 2.38h-1.55l-5.69-7.77h-.1v7.77h-1.69V63.2h1.56l5.7 7.78h.1V63.2h1.67v10.59Z"/></svg>