@bookklik/senangstart-icons 1.0.6 → 1.0.8

package/docs/index.md

@@ -0,0 +1,48 @@
+---
+layout: home
+
+hero:
+  name: "SenangStart Icons"
+  text: "Beautiful icons for modern web projects"
+  tagline: Curated, customizable, and easy to use icon library
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: View Icons
+      link: /icons/
+  image:
+    src: https://senangstart.com/img/use_senangstart.svg
+    alt: SenangStart Icons
+
+features:
+  - icon: <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.64 3.64-1.28-1.28a1.21 1.21 0 00-1.72 0L2.36 18.64a1.21 1.21 0 000 1.72l1.28 1.28a1.2 1.2 0 001.72 0L21.64 5.36a1.2 1.2 0 000-1.72M10.5 10.5l3 3M5 6v4M19 15v4M10 3v2M7 8H3M21 17h-4M11 4H9"></path></svg>
+    title: Customizable
+    details: Easily customize colors, sizes, and styles to match your design system.
+  - icon: <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="M9 3h5L12 8 18 8 8.5 22l3.5-10h-6l2-9z"></path></svg>
+    title: Lightweight
+    details: Optimized SVG icons that are fast to load and easy on performance.
+  - icon: <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="M9.90 5.32 L9.14 2.94 A9.5 9.5 0 0 1 14.86 2.94 L14.10 5.32 A7 7 0 0 1 16.73 6.84 L18.42 5.00 A9.5 9.5 0 0 1 21.27 9.94 L18.83 10.48 A7 7 0 0 1 18.83 13.52 L21.27 14.06 A9.5 9.5 0 0 1 18.42 19.00 L16.73 17.16 A7 7 0 0 1 14.10 18.68 L14.86 21.06 A9.5 9.5 0 0 1 9.14 21.06 L9.90 18.68 A7 7 0 0 1 7.27 17.16 L5.58 19.00 A9.5 9.5 0 0 1 2.73 14.06 L5.17 13.52 A7 7 0 0 1 5.17 10.48 L2.73 9.94 A9.5 9.5 0 0 1 5.58 5.00 L7.27 6.84 A7 7 0 0 1 9.90 5.32 Z M14.5 12 A2.5 2.5 0 1 0 9.5 12 A2.5 2.5 0 1 0 14.5 12 Z"></path></svg>
+    title: Easy Integration
+    details: Simple API with multiple ways to use - Web Components, CDN, or npm.
+---
+
+## Quick Start
+
+Add SenangStart Icons to your project:
+
+```html
+<!-- CDN -->
+<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+
+<!-- Use icons -->
+<ss-icon name="home"></ss-icon>
+<ss-icon name="search" size="24"></ss-icon>
+```
+
+Or install via npm:
+
+```bash
+npm install @bookklik/senangstart-icons
+```

package/docs/ms/guide/configuration.md

@@ -0,0 +1,125 @@
+# Konfigurasi
+
+Konfigurasikan SenangStart Icons untuk keperluan projek anda.
+
+## Tetapan Lalai
+
+Tetapkan lalai global untuk semua ikon:
+
+```js
+// Tetapkan saiz lalai untuk semua ikon
+SSIcon.defaults = {
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2
+};
+```
+
+## Laluan Ikon Tersuai
+
+Jika anda menghos ikon sendiri, konfigurasikan laluan asas:
+
+```js
+// Tetapkan laluan tersuai ke ikon
+SSIcon.config({
+  basePath: '/assets/icons/'
+});
+```
+
+## Pramuat Ikon
+
+Pramuat ikon yang kerap digunakan untuk prestasi yang lebih baik:
+
+```js
+// Pramuat ikon tertentu
+SSIcon.preload(['home', 'user', 'settings', 'menu']);
+```
+
+## Sokongan TypeScript
+
+SenangStart Icons termasuk definisi TypeScript:
+
+```ts
+import '@bookklik/senangstart-icons';
+
+// Elemen ikon ditaip
+const icon: HTMLElement = document.querySelector('ss-icon')!;
+icon.setAttribute('name', 'home');
+```
+
+## Integrasi Rangka Kerja
+
+### Vue.js
+
+```vue
+<template>
+  <ss-icon :name="iconName" :size="iconSize"></ss-icon>
+</template>
+
+<script setup>
+import '@bookklik/senangstart-icons';
+
+const iconName = 'home';
+const iconSize = 24;
+</script>
+```
+
+### React
+
+```jsx
+import '@bookklik/senangstart-icons';
+
+function App() {
+  return (
+    <ss-icon name="home" size="24"></ss-icon>
+  );
+}
+```
+
+### Angular
+
+```ts
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import '@bookklik/senangstart-icons';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+
+```html
+<!-- component.html -->
+<ss-icon name="home" size="24"></ss-icon>
+```
+
+## Konfigurasi Pembinaan
+
+### Webpack
+
+Tiada konfigurasi tambahan diperlukan. Import terus:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Vite
+
+Berfungsi terus:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Rollup
+
+Tambah ke input anda:
+
+```js
+// rollup.config.js
+export default {
+  input: 'src/main.js',
+  // ... baki konfigurasi
+};
+```

package/docs/ms/guide/getting-started.md

@@ -0,0 +1,34 @@
+# Bermula
+
+SenangStart Icons adalah pustaka ikon terkurasi yang direka untuk projek web. Ia menyediakan API yang mudah dan konsisten untuk menggunakan ikon di seluruh aplikasi anda.
+
+## Apakah SenangStart Icons?
+
+SenangStart Icons menawarkan:
+
+- **Berasaskan Web Component** - Gunakan ikon sebagai elemen HTML tersuai
+- **Reka Bentuk Konsisten** - Semua ikon mengikut bahasa reka bentuk yang seragam
+- **Mudah Disesuaikan** - Kawal saiz, warna, dan lebar garisan
+- **Ringan** - Ikon SVG yang dioptimumkan untuk pemuatan pantas
+
+## Contoh Pantas
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+</head>
+<body>
+  <ss-icon name="home"></ss-icon>
+  <ss-icon name="user" size="32"></ss-icon>
+  <ss-icon name="settings" color="#3498db"></ss-icon>
+</body>
+</html>
+```
+
+## Langkah Seterusnya
+
+- [Pemasangan](/ms/guide/installation) - Pelajari pelbagai cara untuk memasang
+- [Penggunaan](/ms/guide/usage) - Arahan penggunaan terperinci
+- [Penggayaan](/ms/guide/styling) - Sesuaikan penampilan ikon

package/docs/ms/guide/installation.md

@@ -0,0 +1,54 @@
+# Pemasangan
+
+Terdapat pelbagai cara untuk memasang dan menggunakan SenangStart Icons dalam projek anda.
+
+## CDN
+
+Cara paling pantas untuk bermula ialah menggunakan CDN:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+```
+
+Atau dengan versi tertentu:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons@1.0.7/dist/senangstart-icon.min.js"></script>
+```
+
+## npm
+
+Pasang melalui npm untuk kegunaan dalam aplikasi yang dibundle:
+
+```bash
+npm install @bookklik/senangstart-icons
+```
+
+Kemudian import dalam JavaScript anda:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+## Yarn
+
+```bash
+yarn add @bookklik/senangstart-icons
+```
+
+## pnpm
+
+```bash
+pnpm add @bookklik/senangstart-icons
+```
+
+## Sokongan Pelayar
+
+SenangStart Icons menggunakan Web Components dan menyokong semua pelayar moden:
+
+| Pelayar | Versi   |
+|---------|---------|
+| Chrome  | 67+     |
+| Firefox | 63+     |
+| Safari  | 10.1+   |
+| Edge    | 79+     |

package/docs/ms/guide/styling.md

@@ -0,0 +1,156 @@
+# Penggayaan
+
+Sesuaikan penampilan SenangStart Icons menggunakan CSS.
+
+## Ciri Tersuai CSS
+
+Ikon boleh digayakan menggunakan ciri tersuai CSS:
+
+```css
+ss-icon {
+  --ss-icon-color: #333;
+  --ss-icon-size: 24px;
+}
+```
+
+## Gaya Sebaris
+
+Gunakan gaya terus pada elemen ikon:
+
+```html
+<ss-icon name="home" style="color: blue;"></ss-icon>
+```
+
+## Kelas CSS
+
+Cipta gaya ikon yang boleh diguna semula:
+
+```css
+.icon-primary {
+  color: #3498db;
+}
+
+.icon-danger {
+  color: #e74c3c;
+}
+
+.icon-success {
+  color: #2ecc71;
+}
+
+.icon-lg {
+  font-size: 32px;
+}
+
+.icon-sm {
+  font-size: 16px;
+}
+```
+
+```html
+<ss-icon name="info" class="icon-primary"></ss-icon>
+<ss-icon name="x-circle" class="icon-danger"></ss-icon>
+<ss-icon name="check-circle" class="icon-success"></ss-icon>
+```
+
+## Kesan Hover
+
+Tambah kesan hover interaktif:
+
+```css
+ss-icon {
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+
+ss-icon:hover {
+  color: #3498db;
+  transform: scale(1.1);
+}
+```
+
+## Animasi
+
+Animasikan ikon dengan CSS:
+
+```css
+/* Animasi pusing */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Animasi denyut */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.icon-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+```
+
+```html
+<ss-icon name="loader" class="icon-spin"></ss-icon>
+<ss-icon name="heart" class="icon-pulse"></ss-icon>
+```
+
+## Mod Gelap
+
+Sokong mod gelap dengan CSS:
+
+```css
+ss-icon {
+  color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  ss-icon {
+    color: #fff;
+  }
+}
+
+/* Atau dengan mod gelap berasaskan kelas */
+.dark ss-icon {
+  color: #fff;
+}
+```
+
+## Ikon dalam Butang
+
+Gayakan ikon dalam butang:
+
+```css
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn ss-icon {
+  flex-shrink: 0;
+}
+
+.btn-icon-only {
+  padding: 0.5rem;
+}
+```
+
+```html
+<button class="btn">
+  <ss-icon name="plus" size="16"></ss-icon>
+  Tambah Item
+</button>
+
+<button class="btn btn-icon-only">
+  <ss-icon name="menu"></ss-icon>
+</button>
+```

package/docs/ms/guide/usage.md

@@ -0,0 +1,103 @@
+# Penggunaan
+
+Pelajari cara menggunakan SenangStart Icons dalam projek anda.
+
+## Penggunaan Asas
+
+Selepas memasukkan pustaka, gunakan elemen tersuai `<ss-icon>`:
+
+```html
+<ss-icon name="home"></ss-icon>
+```
+
+## Atribut
+
+### name
+
+**Diperlukan.** Nama ikon untuk dipaparkan.
+
+```html
+<ss-icon name="search"></ss-icon>
+<ss-icon name="user"></ss-icon>
+<ss-icon name="settings"></ss-icon>
+```
+
+### size
+
+Tetapkan saiz ikon dalam piksel. Lalai adalah `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
+
+Tetapkan warna ikon. Menerima sebarang nilai warna CSS yang sah.
+
+```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
+
+Tetapkan lebar garisan untuk ikon bergaris luar.
+
+```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>
+```
+
+## Menggabungkan Atribut
+
+Gabungkan beberapa atribut untuk penyesuaian penuh:
+
+```html
+<ss-icon 
+  name="bell" 
+  size="32" 
+  color="#3498db"
+  stroke-width="2"
+></ss-icon>
+```
+
+## Dalam JavaScript
+
+Anda juga boleh memanipulasi ikon secara programatik:
+
+```js
+// Dapatkan elemen ikon
+const icon = document.querySelector('ss-icon');
+
+// Tukar ikon
+icon.setAttribute('name', 'check');
+
+// Kemas kini saiz
+icon.setAttribute('size', '48');
+
+// Kemas kini warna
+icon.setAttribute('color', 'green');
+```
+
+## Kebolehcapaian
+
+Untuk kebolehcapaian yang lebih baik, tambah `aria-label` atau `aria-hidden`:
+
+```html
+<!-- Ikon hiasan -->
+<ss-icon name="star" aria-hidden="true"></ss-icon>
+
+<!-- Ikon bermakna -->
+<ss-icon name="warning" aria-label="Amaran"></ss-icon>
+
+<!-- Ikon dengan teks -->
+<button>
+  <ss-icon name="save" aria-hidden="true"></ss-icon>
+  Simpan
+</button>
+```

package/docs/ms/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>
+
+## Penggunaan
+
+```html
+<ss-icon name="alert"></ss-icon>
+```
+
+### Dengan saiz tersuai
+
+```html
+<ss-icon name="alert" size="32"></ss-icon>
+```
+
+### Dengan warna tersuai
+
+```html
+<ss-icon name="alert" color="#3b82f6"></ss-icon>
+```
+
+### Dengan lebar garisan tersuai
+
+```html
+<ss-icon name="alert" stroke="2"></ss-icon>
+```
+
+## Butiran Ikon
+
+| Ciri | Nilai |
+|------|-------|
+| **Nama** | Alert |
+| **Slug** | `alert` |
+| **Tag** | `warning`, `danger`, `notification`, `popup`, `window`, `modal`, `dialog`, `alert`, `senangwebs`, `sw-modals` |
+
+## Laluan SVG
+
+```
+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
+```
+
+## SVG Mentah
+
+```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>
+```
+
+---
+
+[← Kembali ke Pustaka Ikon](/ms/icons/)

package/docs/ms/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>
+
+## Penggunaan
+
+```html
+<ss-icon name="align-bottom-object"></ss-icon>
+```
+
+### Dengan saiz tersuai
+
+```html
+<ss-icon name="align-bottom-object" size="32"></ss-icon>
+```
+
+### Dengan warna tersuai
+
+```html
+<ss-icon name="align-bottom-object" color="#3b82f6"></ss-icon>
+```
+
+### Dengan lebar garisan tersuai
+
+```html
+<ss-icon name="align-bottom-object" stroke="2"></ss-icon>
+```
+
+## Butiran Ikon
+
+| Ciri | Nilai |
+|------|-------|
+| **Nama** | Align Bottom Object |
+| **Slug** | `align-bottom-object` |
+| **Tag** | `align`, `bottom`, `object`, `layout`, `position`, `design` |
+
+## Laluan SVG
+
+```
+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
+```
+
+## SVG Mentah
+
+```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>
+```
+
+---
+
+[← Kembali ke Pustaka Ikon](/ms/icons/)

package/docs/ms/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>
+
+## Penggunaan
+
+```html
+<ss-icon name="align-center-object"></ss-icon>
+```
+
+### Dengan saiz tersuai
+
+```html
+<ss-icon name="align-center-object" size="32"></ss-icon>
+```
+
+### Dengan warna tersuai
+
+```html
+<ss-icon name="align-center-object" color="#3b82f6"></ss-icon>
+```
+
+### Dengan lebar garisan tersuai
+
+```html
+<ss-icon name="align-center-object" stroke="2"></ss-icon>
+```
+
+## Butiran Ikon
+
+| Ciri | Nilai |
+|------|-------|
+| **Nama** | Align Center Object |
+| **Slug** | `align-center-object` |
+| **Tag** | `align`, `center`, `object`, `layout`, `position`, `design` |
+
+## Laluan SVG
+
+```
+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
+```
+
+## SVG Mentah
+
+```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>
+```
+
+---
+
+[← Kembali ke Pustaka Ikon](/ms/icons/)