@tdm-design/icons 0.0.21 → 0.1.1

package/README.md

@@ -1,281 +1,86 @@
-# Icon Generator
-
-A Node.js script to automatically generate React TypeScript icon components from SVG files.
-
-## Overview
-
-This tool reads SVG files from the `svg/` directory and generates corresponding TSX React components in the `icons/` directory. Each generated component follows a consistent pattern, making it easy to use and maintain icons across your project.
-
-## Directory Structure
-
-```
-icon/
-├── svg/                    # Source SVG files
-│   ├── filled/            # Filled style icons
-│   ├── outlined/          # Outlined style icons
-│   ├── color/             # Color icons
-│   └── *.svg              # Other icons
-├── icons/                  # Generated TSX components (output)
-├── components/
-│   └── TdmIcon.tsx        # Base icon component
-├── utils.ts               # Utility functions
-└── generate-icons.js      # The generator script
-```
-
-## Usage
-
-### Basic Usage
-
-Generate new icon components (skips existing files):
-
-```bash
-node generate-icons.js
-```
-
-### Force Regenerate
-
-Overwrite existing icon components in the `icons/` directory:
-
-```bash
-node generate-icons.js --force
-# or
-node generate-icons.js -f
-```
-
-## How It Works
-
-1. **Scans** the `svg/` directory (including subdirectories) for `.svg` files
-2. **Parses** each SVG file and extracts the content
-3. **Generates** a TSX component with:
-   - JSX-formatted SVG content
-   - Icon definition using `svgToIconDefinition`
-   - ForwardRef component wrapper
-   - Base64 encoded SVG preview in comments
-4. **Outputs** the component to `icons/{IconName}.tsx`
-
-## Generated Component Structure
-
-Each generated component follows this structure:
-
-```tsx
-// GENERATE BY ./scripts/generate-icons.js
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react';
-
-import TdmIcon from '../components/TdmIcon';
-import type { TdmIconProps } from '../components/TdmIcon';
-import { svgToIconDefinition } from '../utils';
-
-const iconNameSvg = (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="#cacaca"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="..." />
-  </svg>
-);
-
-const iconNameIconDefinition = svgToIconDefinition(
-  iconNameSvg,
-  'icon-name'
-);
-
-/**![IconNameIcon](data:image/svg+xml;base64,...) */
-const RefIcon: React.ForwardRefExoticComponent<
-  Omit<TdmIconProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
-> = React.forwardRef<HTMLSpanElement, TdmIconProps>((props, ref) => {
-  return <TdmIcon {...props} ref={ref} icon={iconNameIconDefinition} />;
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  RefIcon.displayName = 'IconNameIcon';
-}
-
-export default RefIcon;
-```
-
-## Naming Conventions
-
-| SVG Filename | Component Name | Variable Name | Kebab Name |
-|--------------|----------------|---------------|------------|
-| `AddressBookFilledIcon.svg` | `AddressBookFilledIcon` | `addressBookFilledSvg` | `address-book-filled` |
-| `BellOutlinedIcon.svg` | `BellOutlinedIcon` | `bellOutlinedSvg` | `bell-outlined` |
-| `SocialGoogleColorIcon.svg` | `SocialGoogleColorIcon` | `socialGoogleColorSvg` | `social-google-color` |
-
-## Adding New Icons
-
-### 1. Chuẩn bị file SVG
-
-Đảm bảo file SVG của bạn có các thuộc tính chuẩn:
-
-```xml
-<svg width="24" height="24" viewBox="0 0 24 24" fill="#cacaca" xmlns="http://www.w3.org/2000/svg">
-  <path d="..." />
-</svg>
-```
-
-### 2. Đặt file SVG vào thư mục phù hợp
-
-Thêm file vào thư mục tương ứng trong `svg/`:
-- `svg/filled/` - Icon kiểu filled (ví dụ: `BellFilledIcon.svg`)
-- `svg/outlined/` - Icon kiểu outlined (ví dụ: `BellOutlinedIcon.svg`)
-- `svg/color/` - Icon có màu (ví dụ: `LogoColorIcon.svg`)
-- `svg/` - Icon không thuộc style cụ thể
-
-### 3. Generate icon components
-
-Chạy script để tạo các component React từ file SVG:
-
-```bash
-node generate-icons.js
-```
-
-Hoặc dùng `--force` để ghi đè các file đã tồn tại:
-
-```bash
-node generate-icons.js --force
-```
-
-### 4. Tạo changeset
-
-Tạo changeset để ghi nhận thay đổi cho version tiếp theo:
-
-```bash
-pnpm changeset
-```
-
-Chọn loại thay đổi:
-- **patch** - Sửa lỗi hoặc thay đổi nhỏ (0.0.x)
-- **minor** - Thêm tính năng mới (0.x.0)
-- **major** - Thay đổi breaking changes (x.0.0)
-
-Nhập mô tả thay đổi (ví dụ: "Add new BellFilledIcon")
-
-### 5. Build package
-
-Build package để tạo các file output:
-
-```bash
-pnpm build
-```
-
-Lệnh này sẽ:
-- Compile TypeScript sang JavaScript
-- Tạo type definitions (.d.ts)
-- Bundle các file theo cấu trúc trong `tsup.config.ts`
-
-### 6. Publish lên npm
-
-#### Cách 1: Sử dụng changeset (Khuyến nghị)
-
-```bash
-pnpm changeset version
-```
-
-Lệnh này sẽ:
-- Cập nhật version trong `package.json`
-- Tạo/cập nhật `CHANGELOG.md`
-- Xóa các changeset files đã được áp dụng
-
-Sau đó publish:
-
-```bash
-pnpm publish
-```
-
-#### Cách 2: Publish trực tiếp
-
-```bash
-npm publish
-```
-
-**Lưu ý**: Đảm bảo bạn đã đăng nhập npm (`npm login`) và có quyền publish package.
-
-### 7. Sử dụng icon mới
-
-Sau khi publish, bạn có thể sử dụng icon trong project:
-
-#### Import trực tiếp (Recommended)
-
-```tsx
-import BellFilledIcon from '@tdm-design/icons/BellFilledIcon';
-
-function App() {
-  return <BellFilledIcon />;
-}
-```
-
-#### Sử dụng Barrel Export (Hỗ trợ Tree-shaking)
-
-```tsx
-import { BellFilledIcon } from '@tdm-design/icons';
-```
-
-#### Tùy chỉnh Icon
-
-```tsx
-<BellFilledIcon style={{ color: 'red' }} spin />
-```
-
-## Output Status
-
-When running the script, you'll see the following status indicators:
-
-| Status | Description |
-|--------|-------------|
-| `[OK]` | New component generated successfully |
-| `[OVERWRITE]` | Existing component overwritten (with `--force`) |
-| `[SKIP]` | Component already exists, skipped |
-| `[ERROR]` | Failed to parse SVG file |
-
-## Example Output
-
-```bash
-$ node generate-icons.js --force
-
-Force mode enabled: will overwrite existing files in icons/
-
-[OVERWRITE] ArrowLeftIcon.tsx
-[OK] BellFilledIcon.tsx
-[SKIP] ChartSimpleIcon.tsx already exists in icons/
-[ERROR] Failed to parse InvalidIcon.svg
-
-=== Done ===
-Generated: 15
-Overwritten: 5
-Skipped: 100
-Errors: 1
-Total SVG files: 121
-```
-
-## Troubleshooting
-
-### SVG Not Parsing
-
-Ensure your SVG file:
-- Has valid XML structure
-- Contains a `<svg>` root element
-- Does not have extra characters (like trailing dots)
-
-### Component Not Generating
-
-Check that:
-- The SVG file is in the `svg/` directory or its subdirectories
-- The file has a `.svg` extension
-- The SVG content is valid
-
-### Overwriting Protected Files
-
-By default, existing files are protected. Use `--force` to overwrite:
-
-```bash
-node generate-icons.js --force
-```
-
-## License
-
-MIT
+# @tdm-design/icons
+
+React icon component library built from SVG, with full TypeScript support and tree-shaking.
+
+## Installation
+
+```bash
+npm install @tdm-design/icons
+# or
+yarn add @tdm-design/icons
+# or
+pnpm add @tdm-design/icons
+```
+
+> **Peer dependencies**: React >= 16.8.0
+
+## Usage
+
+### Direct import (recommended)
+
+Best for bundle size — only the icon you import is included:
+
+```tsx
+import BellFilledIcon from "@tdm-design/icons/BellFilledIcon";
+import BellOutlinedIcon from "@tdm-design/icons/BellOutlinedIcon";
+
+function App() {
+  return (
+    <>
+      <BellFilledIcon />
+      <BellOutlinedIcon />
+    </>
+  );
+}
+```
+
+### Named import (tree-shaking supported)
+
+```tsx
+import { BellFilledIcon, BellOutlinedIcon } from "@tdm-design/icons";
+```
+
+## Props
+
+All icons accept the same props via `TdmIconProps`:
+
+| Prop           | Type                  | Default | Description                          |
+| -------------- | --------------------- | ------- | ------------------------------------ |
+| `style`        | `React.CSSProperties` | —       | Inline styles applied to the wrapper |
+| `className`    | `string`              | —       | CSS class for the wrapper            |
+| `spin`         | `boolean`             | `false` | Applies a spinning animation         |
+| `rotate`       | `number`              | —       | Rotation angle in degrees            |
+| `twoToneColor` | `string`              | —       | Secondary color for two-tone icons   |
+
+```tsx
+<BellFilledIcon
+  style={{ color: "#1890ff", fontSize: 24 }}
+  className="my-icon"
+  spin
+/>
+```
+
+## Icon categories
+
+Icons are organized into groups based on their visual style:
+
+| Category   | Description          | Example                 |
+| ---------- | -------------------- | ----------------------- |
+| `Filled`   | Solid filled icons   | `BellFilledIcon`        |
+| `Outlined` | Stroke/outline icons | `BellOutlinedIcon`      |
+| `Color`    | Multi-color icons    | `SocialGoogleColorIcon` |
+| `Flag`     | Country flag icons   | `VNCircleIcon`          |
+
+## Naming convention
+
+Icon names follow the pattern: `{Name}{Style}Icon`
+
+| SVG file                    | Import name             |
+| --------------------------- | ----------------------- |
+| `BellFilledIcon.svg`        | `BellFilledIcon`        |
+| `ArrowUpOutlinedIcon.svg`   | `ArrowUpOutlinedIcon`   |
+| `SocialGoogleColorIcon.svg` | `SocialGoogleColorIcon` |
+
+## License
+
+MIT

package/RadioFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RadioFilledIcon';

package/RadioFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RadioFilledIcon = _interopRequireDefault(require('./lib/icons/RadioFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RadioFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RadioOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RadioOutlinedIcon';

package/RadioOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RadioOutlinedIcon = _interopRequireDefault(require('./lib/icons/RadioOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RadioOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RaindropsFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RaindropsFilledIcon';

package/RaindropsFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RaindropsFilledIcon = _interopRequireDefault(require('./lib/icons/RaindropsFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RaindropsFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RaindropsOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RaindropsOutlinedIcon';

package/RaindropsOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RaindropsOutlinedIcon = _interopRequireDefault(require('./lib/icons/RaindropsOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RaindropsOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleAdFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleAdFilledIcon';

package/RectangleAdFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleAdFilledIcon = _interopRequireDefault(require('./lib/icons/RectangleAdFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleAdFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleAdOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleAdOutlinedIcon';

package/RectangleAdOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleAdOutlinedIcon = _interopRequireDefault(require('./lib/icons/RectangleAdOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleAdOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleBarcodeFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleBarcodeFilledIcon';

package/RectangleBarcodeFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleBarcodeFilledIcon = _interopRequireDefault(require('./lib/icons/RectangleBarcodeFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleBarcodeFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleBarcodeOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleBarcodeOutlinedIcon';

package/RectangleBarcodeOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleBarcodeOutlinedIcon = _interopRequireDefault(require('./lib/icons/RectangleBarcodeOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleBarcodeOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleHistoryFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleHistoryFilledIcon';

package/RectangleHistoryFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleHistoryFilledIcon = _interopRequireDefault(require('./lib/icons/RectangleHistoryFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleHistoryFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleHistoryOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleHistoryOutlinedIcon';

package/RectangleHistoryOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleHistoryOutlinedIcon = _interopRequireDefault(require('./lib/icons/RectangleHistoryOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleHistoryOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleVerticalHistoryFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleVerticalHistoryFilledIcon';

package/RectangleVerticalHistoryFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleVerticalHistoryFilledIcon = _interopRequireDefault(require('./lib/icons/RectangleVerticalHistoryFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleVerticalHistoryFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RectangleVerticalHistoryOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RectangleVerticalHistoryOutlinedIcon';

package/RectangleVerticalHistoryOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RectangleVerticalHistoryOutlinedIcon = _interopRequireDefault(require('./lib/icons/RectangleVerticalHistoryOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RectangleVerticalHistoryOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/ResetPasswordFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/ResetPasswordFilledIcon';

package/ResetPasswordFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _ResetPasswordFilledIcon = _interopRequireDefault(require('./lib/icons/ResetPasswordFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _ResetPasswordFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RocketLaunchFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RocketLaunchFilledIcon';

package/RocketLaunchFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RocketLaunchFilledIcon = _interopRequireDefault(require('./lib/icons/RocketLaunchFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RocketLaunchFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RocketLaunchOutlinedIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RocketLaunchOutlinedIcon';

package/RocketLaunchOutlinedIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RocketLaunchOutlinedIcon = _interopRequireDefault(require('./lib/icons/RocketLaunchOutlinedIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RocketLaunchOutlinedIcon;
+exports.default = _default;
+module.exports = _default;

package/RotateLeftFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RotateLeftFilledIcon';

package/RotateLeftFilledIcon.js

@@ -0,0 +1,13 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const _RotateLeftFilledIcon = _interopRequireDefault(require('./lib/icons/RotateLeftFilledIcon'));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+const _default = _RotateLeftFilledIcon;
+exports.default = _default;
+module.exports = _default;

package/RotateRightFilledIcon.d.ts

@@ -0,0 +1 @@
+export { default } from './lib/icons/RotateRightFilledIcon';