@bookklik/senangstart-icons 1.0.6 → 1.0.8

package/docs/.vitepress/config.mjs

@@ -0,0 +1,171 @@
+import { defineConfig } from 'vitepress'
+import { createRequire } from 'module'
+import fs from 'fs'
+import path from 'path'
+
+const require = createRequire(import.meta.url)
+const pkg = require('../../package.json')
+
+// Load icons from icons.json to generate sidebar
+const iconsPath = path.resolve(__dirname, '../../src/icons.json')
+const icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'))
+const iconSidebarItems = icons.map(icon => ({
+  text: icon.name,
+  link: `/icons/${icon.slug}`
+}))
+
+// Shared theme config
+const sharedThemeConfig = {
+  logo: 'https://senangstart.com/img/ss_logo_typo.svg',
+  siteTitle: false,
+  socialLinks: [
+    { icon: 'github', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+  ],
+  footer: {
+    message: 'Released under the MIT License.',
+    copyright: 'Copyright © 2025 Bookklik Technologies'
+  }
+}
+
+// Generate Malay icon sidebar items
+const iconSidebarItemsMs = icons.map(icon => ({
+  text: icon.name,
+  link: `/ms/icons/${icon.slug}`
+}))
+
+export default defineConfig({
+  title: 'SenangStart Icons',
+  description: 'Curated Starter icons designed for web projects',
+  base: '/senangstart-icons/',
+  
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', href: 'https://senangstart.com/img/ss_icon_accent.svg' }],
+    ['script', { type: 'senangstart/config' }, '{ "darkMode": "selector" }'],
+  ],
+
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en'
+    },
+    ms: {
+      label: 'Bahasa Melayu',
+      lang: 'ms',
+      title: 'SenangStart Icons',
+      description: 'Ikon permulaan terkurasi untuk projek web',
+      themeConfig: {
+        nav: [
+          { text: 'Utama', link: '/ms/' },
+          { text: 'Panduan', link: '/ms/guide/getting-started' },
+          { text: 'Ikon', link: '/ms/icons/' },
+          {
+            text: `v${pkg.version}`,
+            items: [
+              { text: 'Changelog', link: '/changelog' },
+              { text: 'GitHub', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+            ]
+          }
+        ],
+        sidebar: {
+          '/ms/guide/': [
+            {
+              text: 'Pengenalan',
+              items: [
+                { text: 'Bermula', link: '/ms/guide/getting-started' },
+                { text: 'Pemasangan', link: '/ms/guide/installation' },
+                { text: 'Penggunaan', link: '/ms/guide/usage' }
+              ]
+            },
+            {
+              text: 'Penyesuaian',
+              items: [
+                { text: 'Penggayaan', link: '/ms/guide/styling' },
+                { text: 'Konfigurasi', link: '/ms/guide/configuration' }
+              ]
+            }
+          ],
+          '/ms/icons/': [
+            {
+              text: 'Pustaka Ikon',
+              items: [
+                { text: 'Semua Ikon', link: '/ms/icons/' }
+              ]
+            },
+            {
+              text: 'Ikon',
+              collapsed: false,
+              items: iconSidebarItemsMs
+            }
+          ]
+        },
+        footer: {
+          message: 'Dikeluarkan di bawah Lesen MIT.',
+          copyright: 'Hakcipta © 2025 Bookklik Technologies'
+        }
+      }
+    }
+  },
+
+  themeConfig: {
+    ...sharedThemeConfig,
+    
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/getting-started' },
+      { text: 'Icons', link: '/icons/' },
+      {
+        text: `v${pkg.version}`,
+        items: [
+          { text: 'Changelog', link: '/changelog' },
+          { text: 'GitHub', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+        ]
+      }
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Introduction',
+          items: [
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Installation', link: '/guide/installation' },
+            { text: 'Usage', link: '/guide/usage' }
+          ]
+        },
+        {
+          text: 'Customization',
+          items: [
+            { text: 'Styling', link: '/guide/styling' },
+            { text: 'Configuration', link: '/guide/configuration' }
+          ]
+        }
+      ],
+      '/icons/': [
+        {
+          text: 'Icon Library',
+          items: [
+            { text: 'All Icons', link: '/icons/' }
+          ]
+        },
+        {
+          text: 'Icons',
+          collapsed: false,
+          items: iconSidebarItems
+        }
+      ]
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2025 Bookklik Technologies'
+    },
+
+    search: {
+      provider: 'local'
+    }
+  }
+})

package/docs/.vitepress/theme/custom.css

@@ -0,0 +1,64 @@
+/**
+ * SenangStart CSS - VitePress Theme Customization
+ * Brand colors: primary #2563EB, secondary #DBEAFE, dark #3E4A5D
+ */
+
+/* Font family - Outfit (must be first) */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+
+:root {
+  /* Brand Colors */
+  --vp-c-brand-1: #2563EB;
+  --vp-c-brand-2: #3B82F6;
+  --vp-c-brand-3: #DBEAFE;
+  
+  /* Override default colors */
+  --vp-c-default-1: #3E4A5D;
+  --vp-c-default-2: #4B5563;
+  --vp-c-default-3: #6B7280;
+  
+  /* Button colors */
+  --vp-button-brand-bg: #2563EB;
+  --vp-button-brand-hover-bg: #1D4ED8;
+  --vp-button-brand-active-bg: #1E40AF;
+  
+  /* Font family */
+  --vp-font-family-base: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* Code blocks with brand accent */
+.vp-doc div[class*='language-'] {
+  border-left: 3px solid #2563EB;
+}
+
+/* Sidebar active link */
+.VPSidebarItem.is-active > .item > .link > .text {
+  color: #2563EB;
+}
+
+/* Custom container styling */
+.custom-block.tip {
+  border-color: #2563EB;
+}
+
+.custom-block.warning {
+  border-color: #F59E0B;
+}
+
+.custom-block.danger {
+  border-color: #EF4444;
+}
+
+/* Hero alt button - white background for better visibility */
+.VPButton.alt {
+  background-color: #F1F5F9 !important;
+  color: #3E4A5D !important;
+  border-color: #F1F5F9 !important;
+}
+
+.VPButton.alt:hover {
+  background-color: #DBEAFE !important;
+  color: #2563EB !important;
+  border-color: #DBEAFE !important;
+}

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

package/docs/guide/configuration.md

@@ -0,0 +1,125 @@
+# Configuration
+
+Configure SenangStart Icons for your project needs.
+
+## Default Settings
+
+Set global defaults for all icons:
+
+```js
+// Set default size for all icons
+SSIcon.defaults = {
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2
+};
+```
+
+## Custom Icon Path
+
+If you're self-hosting the icons, configure the base path:
+
+```js
+// Set custom path to icons
+SSIcon.config({
+  basePath: '/assets/icons/'
+});
+```
+
+## Preloading Icons
+
+Preload commonly used icons for better performance:
+
+```js
+// Preload specific icons
+SSIcon.preload(['home', 'user', 'settings', 'menu']);
+```
+
+## TypeScript Support
+
+SenangStart Icons includes TypeScript definitions:
+
+```ts
+import '@bookklik/senangstart-icons';
+
+// Icon element is typed
+const icon: HTMLElement = document.querySelector('ss-icon')!;
+icon.setAttribute('name', 'home');
+```
+
+## Framework Integration
+
+### 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>
+```
+
+## Build Configuration
+
+### Webpack
+
+No additional configuration needed. Import directly:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Vite
+
+Works out of the box:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Rollup
+
+Add to your input:
+
+```js
+// rollup.config.js
+export default {
+  input: 'src/main.js',
+  // ... rest of config
+};
+```

package/docs/guide/getting-started.md

@@ -0,0 +1,34 @@
+# Getting Started
+
+SenangStart Icons is a curated icon library designed for web projects. It provides a simple, consistent API for using icons across your applications.
+
+## What is SenangStart Icons?
+
+SenangStart Icons offers:
+
+- **Web Component-based** - Use icons as custom HTML elements
+- **Consistent Design** - All icons follow a unified design language
+- **Easy Customization** - Control size, color, and stroke width
+- **Lightweight** - Optimized SVG icons for fast loading
+
+## Quick Example
+
+```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>
+```
+
+## Next Steps
+
+- [Installation](/guide/installation) - Learn different ways to install
+- [Usage](/guide/usage) - Detailed usage instructions
+- [Styling](/guide/styling) - Customize icon appearance

package/docs/guide/installation.md

@@ -0,0 +1,54 @@
+# Installation
+
+There are multiple ways to install and use SenangStart Icons in your project.
+
+## CDN
+
+The quickest way to get started is using the CDN:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+```
+
+Or with a specific version:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons@1.0.7/dist/senangstart-icon.min.js"></script>
+```
+
+## npm
+
+Install via npm for use in bundled applications:
+
+```bash
+npm install @bookklik/senangstart-icons
+```
+
+Then import in your JavaScript:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+## Yarn
+
+```bash
+yarn add @bookklik/senangstart-icons
+```
+
+## pnpm
+
+```bash
+pnpm add @bookklik/senangstart-icons
+```
+
+## Browser Support
+
+SenangStart Icons uses Web Components and supports all modern browsers:
+
+| Browser | Version |
+|---------|---------|
+| Chrome  | 67+     |
+| Firefox | 63+     |
+| Safari  | 10.1+   |
+| Edge    | 79+     |

package/docs/guide/styling.md

@@ -0,0 +1,156 @@
+# Styling
+
+Customize the appearance of SenangStart Icons using CSS.
+
+## CSS Custom Properties
+
+Icons can be styled using CSS custom properties:
+
+```css
+ss-icon {
+  --ss-icon-color: #333;
+  --ss-icon-size: 24px;
+}
+```
+
+## Inline Styles
+
+Apply styles directly to icon elements:
+
+```html
+<ss-icon name="home" style="color: blue;"></ss-icon>
+```
+
+## CSS Classes
+
+Create reusable icon styles:
+
+```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>
+```
+
+## Hover Effects
+
+Add interactive hover effects:
+
+```css
+ss-icon {
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+
+ss-icon:hover {
+  color: #3498db;
+  transform: scale(1.1);
+}
+```
+
+## Animation
+
+Animate icons with CSS:
+
+```css
+/* Spin animation */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Pulse animation */
+@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>
+```
+
+## Dark Mode
+
+Support dark mode with CSS:
+
+```css
+ss-icon {
+  color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  ss-icon {
+    color: #fff;
+  }
+}
+
+/* Or with class-based dark mode */
+.dark ss-icon {
+  color: #fff;
+}
+```
+
+## Icon in Buttons
+
+Style icons within buttons:
+
+```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>
+  Add Item
+</button>
+
+<button class="btn btn-icon-only">
+  <ss-icon name="menu"></ss-icon>
+</button>
+```

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>
+```