bpo-icon-lib 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 BPO Icon Library
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,263 @@
+# BPO Icon Library
+
+A lightweight, TypeScript-first React icon library with dynamic SVG icon loading. Easily add and use SVG icons in your React applications with full type safety.
+
+## Features
+
+- 🎯 **TypeScript Support** - Full type definitions included
+- ⚡ **Dynamic Icon Loading** - Automatically discovers icons from the `icons/` directory
+- 🎨 **Customizable** - Control size, color, and styling with props
+- 📦 **Tree-shakeable** - Only includes icons you use
+- 🚀 **Zero Runtime** - Icons are compiled at build time
+- ♿ **Accessible** - Includes proper ARIA attributes
+
+## Installation
+
+```bash
+npm install bpo-icon-lib
+# or
+yarn add bpo-icon-lib
+# or
+pnpm add bpo-icon-lib
+```
+
+## Peer Dependencies
+
+This library requires React 16.8.0 or higher:
+
+```bash
+npm install react react-dom
+```
+
+## Import
+
+### Import the Icon Component
+
+```tsx
+import { Icon } from 'bpo-icon-lib';
+// or
+import Icon from 'bpo-icon-lib';
+```
+
+### Import TypeScript Types
+
+```tsx
+import type { IconProps, IconName } from 'bpo-icon-lib';
+```
+
+### Import Utility Functions
+
+```tsx
+import {
+  iconFontMap,
+  getIconFontCode,
+  getIconFontChar,
+  generateIconFontHTML,
+} from 'bpo-icon-lib';
+```
+
+### Import CSS and Fonts
+
+**⚠️ Important: You must import `style.css` to use the icon fonts.** The CSS file contains the `@font-face` declaration and icon styles required for the icons to display correctly.
+
+Add the CSS file to your HTML or import it in your main entry file:
+
+**Option 1: HTML (Recommended)**
+
+```html
+<link rel="stylesheet" href="node_modules/bpo-icon-lib/dist/style.css" />
+<link
+  rel="preload"
+  href="node_modules/bpo-icon-lib/dist/fonts/Untitled.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+```
+
+**Option 2: JavaScript/TypeScript**
+
+```tsx
+// In your main.tsx or App.tsx
+// You can use either path:
+import 'bpo-icon-lib/style.css';
+// or
+import 'bpo-icon-lib/dist/style.css';
+```
+
+**Option 3: CSS Import**
+
+```css
+@import 'bpo-icon-lib/style.css';
+/* or */
+@import 'bpo-icon-lib/dist/style.css';
+```
+
+The font files are automatically available at `node_modules/bpo-icon-lib/dist/fonts/` after installation.
+
+**Note:** Without importing `style.css`, the icons will not display correctly as the font-face definitions and icon styles are defined in the CSS file.
+
+## Usage
+
+### Basic Usage
+
+**Don't forget to import the CSS file first!**
+
+```tsx
+// Import CSS (required for fonts to work)
+import 'bpo-icon-lib/dist/style.css';
+import { Icon } from 'bpo-icon-lib';
+
+function App() {
+  return (
+    <div>
+      <Icon name="spam_management" size={24} />
+      <Icon name="search" size={32} color="#ff0000" />
+    </div>
+  );
+}
+```
+
+### With Custom Styling
+
+```tsx
+import 'bpo-icon-lib/dist/style.css';
+import { Icon } from 'bpo-icon-lib';
+
+function App() {
+  return (
+    <Icon
+      name="add_circle"
+      size={48}
+      color="#646cff"
+      className="my-custom-icon"
+      style={{ margin: '10px' }}
+    />
+  );
+}
+```
+
+### Inline Icons (without wrapper)
+
+```tsx
+import 'bpo-icon-lib/dist/style.css';
+import { Icon } from 'bpo-icon-lib';
+
+function App() {
+  return (
+    <div>
+      <Icon name="search" size={20} color="#999" className="" />
+      <input type="text" placeholder="Search..." />
+    </div>
+  );
+}
+```
+
+### With Label
+
+```tsx
+import 'bpo-icon-lib/dist/style.css';
+import { Icon } from 'bpo-icon-lib';
+
+function App() {
+  return <Icon name="spam_management" showLabel={true} />;
+}
+```
+
+### Available Icons
+
+The library includes 118+ icons. Some examples:
+
+- `spam_management` - Spam management icon
+- `search` - Search icon
+- `add_circle` - Add circle icon
+- `user` - User icon
+- `settings` - Settings icon
+- And many more...
+
+Use TypeScript autocomplete to see all available icon names, or check the `IconName` type.
+
+## API
+
+### Icon Component Props
+
+| Prop            | Type                  | Default         | Description                                                                                            |
+| --------------- | --------------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
+| `name`          | `IconName`            | **required**    | The name of the icon to display. Must be a valid icon name from the icon map.                          |
+| `size`          | `number`              | `12`            | Font size of the icon in pixels.                                                                       |
+| `color`         | `string`              | -               | Color of the icon. Uses `currentColor` by default if not specified.                                    |
+| `className`     | `string \| undefined` | `'_demo_glyph'` | CSS class for the wrapper div. Use `''` (empty string) to render only the icon span without a wrapper. |
+| `iconClassName` | `string`              | `'icon'`        | CSS class for the icon span element. This is added alongside the `icon-{name}` class.                  |
+| `showLabel`     | `boolean`             | `false`         | Whether to display the icon name as a label below the icon.                                            |
+| `style`         | `React.CSSProperties` | -               | Inline styles to apply to the wrapper element (or icon span if `className` is empty string).           |
+
+### TypeScript Types
+
+```tsx
+import type { IconProps, IconName } from 'bpo-icon-lib';
+
+// IconName is a union type of available icon names
+const iconName: IconName = 'add'; // ✅
+const invalidName: IconName = 'invalid'; // ❌ TypeScript error
+```
+
+## Using Icon Font Utilities
+
+You can also use the icon font utilities directly:
+
+```tsx
+import { getIconFontCode, generateIconFontHTML } from 'bpo-icon-lib';
+
+// Get the Unicode code for an icon
+const code = getIconFontCode('search'); // Returns: "&#xf00b;"
+
+// Generate HTML string
+const html = generateIconFontHTML('spam_management');
+// Returns: '<div class="_demo_glyph">\n  <span class="icon">&#xf000;</span> icon-spam_management\n</div>'
+```
+
+## HTML/CSS Usage
+
+You can also use icons directly in HTML without React. **Make sure to include the CSS file first:**
+
+```html
+<!-- Required: Import the CSS file -->
+<link rel="stylesheet" href="node_modules/bpo-icon-lib/dist/style.css" />
+
+<!-- Then use icons in your HTML with the icon-{name} class format -->
+<span class="icon-cash"></span>
+<span class="icon-search"></span>
+<span class="icon-spam_management"></span>
+
+<!-- Or with the wrapper div for demo purposes -->
+<div class="_demo_glyph"><span class="icon-cash"></span> icon-cash</div>
+```
+
+The CSS file is required as it contains the `@font-face` declaration and icon styles (using `:before` pseudo-elements) needed for the fonts to work. Each icon uses the class format `icon-{iconName}` where `{iconName}` matches the icon name from the icon map.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Run tests
+npm test
+
+# Format code
+npm run format
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/Icon.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import type { IconName } from './iconMap';
+/**
+ * Props for the Icon component
+ *
+ * @interface IconProps
+ */
+export interface IconProps {
+    /** The name of the icon to display. Must be a valid icon name from the icon map. */
+    name: IconName;
+    /**
+     * CSS class name for the wrapper div element.
+     * - If `undefined`: defaults to `'_demo_glyph'`
+     * - If `''` (empty string): renders only the icon span without a wrapper div
+     * - If a string value: uses that as the wrapper class name
+     */
+    className?: string;
+    /**
+     * CSS class name for the icon span element.
+     * @default 'icon'
+     */
+    iconClassName?: string;
+    /**
+     * Whether to display the icon name as a label below the icon.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Inline styles to apply to the wrapper element (or icon span if className is empty).
+     */
+    style?: React.CSSProperties;
+    /**
+     * Color of the icon. Uses `currentColor` by default if not specified.
+     */
+    color?: string;
+    /**
+     * Font size of the icon in pixels.
+     * @default 12
+     */
+    size?: number;
+}
+/**
+ * Icon component that renders icons using icon font (CSS-based icon font).
+ *
+ * This component uses CSS classes and the `:before` pseudo-element to display icons
+ * from the icon font. The icon font must be loaded via the `style.css` file.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Icon name="spam_management" />
+ *
+ * // With custom size and color
+ * <Icon name="search" size={24} color="#ff0000" />
+ *
+ * // Inline icon (no wrapper div)
+ * <Icon name="search" size={20} className="" />
+ *
+ * // With label
+ * <Icon name="add" showLabel={true} />
+ *
+ * // With custom styling
+ * <Icon
+ *   name="settings"
+ *   size={32}
+ *   color="#646cff"
+ *   className="my-icon-wrapper"
+ *   style={{ margin: '10px' }}
+ * />
+ * ```
+ *
+ * @param {IconProps} props - The component props
+ * @returns {JSX.Element | null} The rendered icon component or null if icon not found
+ */
+export declare const Icon: React.FC<IconProps>;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,oFAAoF;IACpF,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyDpC,CAAC;AAEF,eAAe,IAAI,CAAC"}