@bookklik/senangstart-icons 1.0.7 → 1.0.11

package/docs/.vitepress/config.mjs

@@ -0,0 +1,173 @@
+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: '/assets/ss-logo.svg',
+  socialLinks: [
+    { icon: 'github', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+  ],
+  footer: {
+    message: 'SenangStart Icons v' + pkg.version + ' is part of the <a href="https://senangstart.com/" target="_blank" style="color: var(--vp-c-brand)">SenangStart</a> ecosystem.',
+    copyright: `Copyright © ${new Date().getFullYear()} <a href="https://bookklik.com/" target="_blank" style="color: #ff6600">Bookklik Technologies</a>. Released under the MIT License.`
+  }
+}
+
+// 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
+            }
+          ]
+        }
+      }
+    }
+  },
+
+  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' }
+    ],
+
+    search: {
+      provider: 'local'
+    }
+  },
+
+  markdown: {
+    config: (md) => {
+      md.core.ruler.push('replace_version', (state) => {
+        state.tokens.forEach((token) => {
+          if (token.type === 'fence' && token.content.includes('__PKG_VERSION__')) {
+            token.content = token.content.replace(/__PKG_VERSION__/g, pkg.version)
+          }
+        })
+      })
+    }
+  }
+})

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,80 @@
+# Configuration
+
+Configure SenangStart Icons for your project needs.
+
+## Framework Integration
+
+### Vue.js
+
+```vue
+<template>
+  <ss-icon :icon="iconName" :style="{ fontSize: iconSize + 'px' }"></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 icon="home" style={{ fontSize: '24px' }}></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 icon="home" style="font-size: 24px;"></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,41 @@
+# 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 icon="home"></ss-icon>
+  <!-- Use CSS for sizing and color -->
+  <ss-icon icon="user" style="font-size: 32px;"></ss-icon>
+  <ss-icon icon="settings" style="color: #3498db;"></ss-icon>
+</body>
+</html>
+```
+
+## For AI Assistants
+
+If you are using AI coding assistants (like Cursor, Windsurf, or others), you can provide them with our specialized context file. This file contains the full list of available icons and usage instructions in a format optimized for LLMs.
+
+File location: [`https://bookklik-technologies.github.io/senangstart-icons/llms.txt`](https://bookklik-technologies.github.io/senangstart-icons/llms.txt)
+
+## 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@__PKG_VERSION__/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 {
+  color: #333;
+  font-size: 24px;
+}
+```
+
+## Inline Styles
+
+Apply styles directly to icon elements:
+
+```html
+<ss-icon icon="home" style="color: blue; font-size: 24px;"></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 icon="info" class="icon-primary"></ss-icon>
+<ss-icon icon="x-circle" class="icon-danger"></ss-icon>
+<ss-icon icon="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 icon="loader" class="icon-spin"></ss-icon>
+<ss-icon icon="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 icon="plus" style="font-size: 16px;"></ss-icon>
+  Add Item
+</button>
+
+<button class="btn btn-icon-only">
+  <ss-icon icon="menu"></ss-icon>
+</button>
+```

package/docs/guide/usage.md

@@ -0,0 +1,96 @@
+# Usage
+
+Learn how to use SenangStart Icons in your projects.
+
+## Basic Usage
+
+After including the library, you can use icons in two ways:
+
+### 1. Web Component
+
+Use the `<ss-icon>` custom element:
+
+```html
+<ss-icon icon="home"></ss-icon>
+```
+
+### 2. CSS Classes
+
+Use the `<i>` tag with specific classes:
+
+```html
+<i class="ss ss-home"></i>
+```
+
+## Attributes (`<ss-icon>`)
+
+### icon
+
+**Required.** The slug of the icon to display.
+
+```html
+<ss-icon icon="search"></ss-icon>
+<ss-icon icon="user"></ss-icon>
+<ss-icon icon="settings"></ss-icon>
+```
+
+### thickness
+
+Set the stroke width for the icon. Default is `1.5`.
+
+```html
+<ss-icon icon="circle" thickness="1"></ss-icon>
+<ss-icon icon="circle" thickness="2"></ss-icon>
+<ss-icon icon="circle" thickness="3"></ss-icon>
+```
+
+## Styling
+
+SenangStart Icons are powered by currentColor, so they inherit the text color of their parent. You can style them using standard CSS.
+
+### Sizing & Coloring
+
+```html
+<!-- Via utility classes (e.g. Tailwind) -->
+<ss-icon icon="home" class="w-6 h-6 text-blue-500"></ss-icon>
+
+<!-- Via style attribute -->
+<ss-icon icon="heart" style="font-size: 32px; color: red;"></ss-icon>
+```
+
+## In JavaScript
+
+You can also manipulate icons programmatically:
+
+```js
+// Get icon element
+const icon = document.querySelector('ss-icon');
+
+// Change icon
+icon.setAttribute('icon', 'check');
+
+// Update thickness
+icon.setAttribute('thickness', '2');
+
+// Update styling
+icon.style.color = 'green';
+icon.style.fontSize = '48px';
+```
+
+## Accessibility
+
+For better accessibility, add `aria-label` or `aria-hidden`:
+
+```html
+<!-- Decorative icon -->
+<ss-icon icon="star" aria-hidden="true"></ss-icon>
+
+<!-- Meaningful icon -->
+<ss-icon icon="warning" aria-label="Warning"></ss-icon>
+
+<!-- Icon with text -->
+<button>
+  <ss-icon icon="save" aria-hidden="true"></ss-icon>
+  Save
+</button>
+```