@bookklik/senangstart-icons 1.0.7 → 1.0.8

package/docs/guide/usage.md

@@ -0,0 +1,103 @@
+# Usage
+
+Learn how to use SenangStart Icons in your projects.
+
+## Basic Usage
+
+After including the library, use the `<ss-icon>` custom element:
+
+```html
+<ss-icon name="home"></ss-icon>
+```
+
+## Attributes
+
+### name
+
+**Required.** The name of the icon to display.
+
+```html
+<ss-icon name="search"></ss-icon>
+<ss-icon name="user"></ss-icon>
+<ss-icon name="settings"></ss-icon>
+```
+
+### size
+
+Set the icon size in pixels. Default is `24`.
+
+```html
+<ss-icon name="home" size="16"></ss-icon>
+<ss-icon name="home" size="24"></ss-icon>
+<ss-icon name="home" size="32"></ss-icon>
+<ss-icon name="home" size="48"></ss-icon>
+```
+
+### color
+
+Set the icon color. Accepts any valid CSS color value.
+
+```html
+<ss-icon name="heart" color="red"></ss-icon>
+<ss-icon name="star" color="#f1c40f"></ss-icon>
+<ss-icon name="check" color="rgb(46, 204, 113)"></ss-icon>
+```
+
+### stroke-width
+
+Set the stroke width for outlined icons.
+
+```html
+<ss-icon name="circle" stroke-width="1"></ss-icon>
+<ss-icon name="circle" stroke-width="2"></ss-icon>
+<ss-icon name="circle" stroke-width="3"></ss-icon>
+```
+
+## Combining Attributes
+
+Combine multiple attributes for full customization:
+
+```html
+<ss-icon 
+  name="bell" 
+  size="32" 
+  color="#3498db"
+  stroke-width="2"
+></ss-icon>
+```
+
+## In JavaScript
+
+You can also manipulate icons programmatically:
+
+```js
+// Get icon element
+const icon = document.querySelector('ss-icon');
+
+// Change icon
+icon.setAttribute('name', 'check');
+
+// Update size
+icon.setAttribute('size', '48');
+
+// Update color
+icon.setAttribute('color', 'green');
+```
+
+## Accessibility
+
+For better accessibility, add `aria-label` or `aria-hidden`:
+
+```html
+<!-- Decorative icon -->
+<ss-icon name="star" aria-hidden="true"></ss-icon>
+
+<!-- Meaningful icon -->
+<ss-icon name="warning" aria-label="Warning"></ss-icon>
+
+<!-- Icon with text -->
+<button>
+  <ss-icon name="save" aria-hidden="true"></ss-icon>
+  Save
+</button>
+```

package/docs/icons/alert.md

@@ -0,0 +1,59 @@
+---
+title: Alert
+---
+
+# Alert
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18zM8 13.3h8v3H8z"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="alert"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="alert" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="alert" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="alert" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Alert |
+| **Slug** | `alert` |
+| **Tags** | `warning`, `danger`, `notification`, `popup`, `window`, `modal`, `dialog`, `alert`, `senangwebs`, `sw-modals` |
+
+## SVG Path
+
+```
+M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18zM8 13.3h8v3H8z
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18zM8 13.3h8v3H8z"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-bottom-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Bottom Object
+---
+
+# Align Bottom Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 12h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 20 3 20"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-bottom-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-bottom-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-bottom-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-bottom-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Bottom Object |
+| **Slug** | `align-bottom-object` |
+| **Tags** | `align`, `bottom`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M12 4h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 12h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 20 3 20
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 4h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 12h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 20 3 20"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-center-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Center Object
+---
+
+# Align Center Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4h3a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-12a1 1 0 01-1-1v-4a1 1 0 011-1ZM12 21 12 3"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-center-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-center-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-center-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-center-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Center Object |
+| **Slug** | `align-center-object` |
+| **Tags** | `align`, `center`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M12 4h3a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-12a1 1 0 01-1-1v-4a1 1 0 011-1ZM12 21 12 3
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 4h3a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-12a1 1 0 01-1-1v-4a1 1 0 011-1ZM12 21 12 3"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-left-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Left Object
+---
+
+# Align Left Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h6a1 1 0 011 1v4a1 1 0 01-1 1H7a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM3 21 3 3"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-left-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-left-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-left-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-left-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Left Object |
+| **Slug** | `align-left-object` |
+| **Tags** | `align`, `left`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M7 4h6a1 1 0 011 1v4a1 1 0 01-1 1H7a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM3 21 3 3
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M7 4h6a1 1 0 011 1v4a1 1 0 01-1 1H7a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h6a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM3 21 3 3"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-middle-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Middle Object
+---
+
+# Align Middle Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4h6a1 1 0 011 1v3a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1ZM12 15h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 12 3 12"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-middle-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-middle-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-middle-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-middle-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Middle Object |
+| **Slug** | `align-middle-object` |
+| **Tags** | `align`, `middle`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M12 4h6a1 1 0 011 1v3a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1ZM12 15h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 12 3 12
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 4h6a1 1 0 011 1v3a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1ZM12 15h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 12 3 12"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-right-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Right Object
+---
+
+# Align Right Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4h4a1 1 0 011 1v4a1 1 0 01-1 1H11a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h5a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM21 21 21 3"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-right-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-right-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-right-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-right-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Right Object |
+| **Slug** | `align-right-object` |
+| **Tags** | `align`, `right`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M13 4h4a1 1 0 011 1v4a1 1 0 01-1 1H11a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h5a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM21 21 21 3
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M13 4h4a1 1 0 011 1v4a1 1 0 01-1 1H11a1 1 0 01-1-1V5a1 1 0 011-1ZM12 14h5a1 1 0 011 1v4a1 1 0 01-1 1h-11a1 1 0 01-1-1v-4a1 1 0 011-1ZM21 21 21 3"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/align-top-object.md

@@ -0,0 +1,59 @@
+---
+title: Align Top Object
+---
+
+# Align Top Object
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V16a1 1 0 011-1ZM12 7h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 4 3 4"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="align-top-object"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="align-top-object" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="align-top-object" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="align-top-object" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Align Top Object |
+| **Slug** | `align-top-object` |
+| **Tags** | `align`, `top`, `object`, `layout`, `position`, `design` |
+
+## SVG Path
+
+```
+M12 15h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V16a1 1 0 011-1ZM12 7h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 4 3 4
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 15h3a1 1 0 011 1v3a1 1 0 01-1 1H9a1 1 0 01-1-1V16a1 1 0 011-1ZM12 7h6a1 1 0 011 1v3a1 1 0 01-1 1h-12a1 1 0 01-1-1v-3a1 1 0 011-1ZM21 4 3 4"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/ar.md

@@ -0,0 +1,59 @@
+---
+title: AR
+---
+
+# AR
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="ar"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="ar" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="ar" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="ar" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | AR |
+| **Slug** | `ar` |
+| **Tags** | `augmented reality`, `3d`, `cube`, `virtual`, `model`, `ar` |
+
+## SVG Path
+
+```
+m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)

package/docs/icons/archive-box.md

@@ -0,0 +1,59 @@
+---
+title: Archive Box
+---
+
+# Archive Box
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path></svg>
+</div>
+
+## Usage
+
+```html
+<ss-icon name="archive-box"></ss-icon>
+```
+
+### With custom size
+
+```html
+<ss-icon name="archive-box" size="32"></ss-icon>
+```
+
+### With custom color
+
+```html
+<ss-icon name="archive-box" color="#3b82f6"></ss-icon>
+```
+
+### With custom stroke width
+
+```html
+<ss-icon name="archive-box" stroke="2"></ss-icon>
+```
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | Archive Box |
+| **Slug** | `archive-box` |
+| **Tags** | `store`, `history`, `backup`, `inventory`, `storage`, `archive-box` |
+
+## SVG Path
+
+```
+M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z
+```
+
+## Raw SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"></path>
+</svg>
+```
+
+---
+
+[← Back to Icon Library](/icons/)