@tdm-design/icons 0.0.14 → 0.0.15

package/README.md

@@ -108,43 +108,118 @@ export default RefIcon;
 
 ## Adding New Icons
 
-1. **Prepare SVG file**: Ensure your SVG has standard attributes:
-   ```xml
-   <svg width="24" height="24" viewBox="0 0 24 24" fill="#cacaca" xmlns="http://www.w3.org/2000/svg">
-     <path d="..." />
-   </svg>
-   ```
-
-2. **Place SVG file**: Add the file to the appropriate folder in `svg/`:
-   - `svg/filled/` - For filled style icons (e.g., `BellFilledIcon.svg`)
-   - `svg/outlined/` - For outlined style icons (e.g., `BellOutlinedIcon.svg`)
-   - `svg/color/` - For color icons (e.g., `LogoColorIcon.svg`)
-   - `svg/` - For icons without a specific style
-
-3. **Run the generator**:
-   ```bash
-   node generate-icons.js
-   ```
-
-4. **Import and use** the new component:
-   ```tsx
-    import BellFilledIcon from '@tdm-design/icons/BellFilledIcon';
-
-    function App() {
-      return <BellFilledIcon />;
-    }
-    ```
-
-    ### Using Barrel Export (Supports Tree-shaking)
-
-    ```tsx
-    import { BellFilledIcon } from '@tdm-design/icons';
-    ```
-
-    ### Customizing Icons
-    ```tsx
-    <BellFilledIcon style={{ color: 'red' }} spin />
-    ```
+### 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
 

package/RotateLeftOutlinedIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { T as TdmIconProps } from './TdmIcon-CClytigf.js';
+
+/**![RotateLeftOutlinedIcon](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2NhY2FjYSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy45MzEwMyAxMC43NTg2QzMuMzYyMDcgMTAuNzA2OSAzLjA1MTcyIDEwLjM5NjYgMyA5LjgyNzYxVjQuMjQxNEMzLjA1MTcyIDMuNjcyNDMgMy4zNjIwNyAzLjM2MjA5IDMuOTMxMDMgMy4zMTAzNkM0LjUgMy4zNjIwOSA0LjgxMDM0IDMuNjcyNDMgNC44NjIwNyA0LjI0MTRWNy4zNDQ4NUw1LjYzNzkzIDYuNDUyNjFDNi40Mzk2NiA1LjQ2OTg1IDcuNDA5NDggNC43MDY5MiA4LjU0NzQxIDQuMTYzODFDOS43MTEyMSAzLjU5NDg1IDEwLjk2NTUgMy4zMTAzNiAxMi4zMTAzIDMuMzEwMzZDMTMuOTM5NyAzLjMzNjIzIDE1LjQwMDkgMy43MzcwOSAxNi42OTQgNC41MTI5NUMxOC4wMTI5IDUuMjYyOTUgMTkuMDQ3NCA2LjI5NzQzIDE5Ljc5NzQgNy42MTY0QzIwLjU3MzMgOC45MDk1IDIwLjk3NDEgMTAuMzcwNyAyMSAxMkMyMC45NzQxIDEzLjYyOTMgMjAuNTczMyAxNS4wOTA1IDE5Ljc5NzQgMTYuMzgzNkMxOS4wNDc0IDE3LjcwMjYgMTguMDEyOSAxOC43MzcxIDE2LjY5NCAxOS40ODcxQzE1LjQwMDkgMjAuMjYzIDEzLjkzOTcgMjAuNjYzOCAxMi4zMTAzIDIwLjY4OTdDMTAuMzE5IDIwLjY2MzggOC41ODYyMSAyMC4wODE5IDcuMTEyMDcgMTguOTQ0QzYuNjcyNDEgMTguNTU2MSA2LjYwNzc2IDE4LjEyOTMgNi45MTgxIDE3LjY2MzhDNy4zMDYwMyAxNy4yMjQyIDcuNzMyNzYgMTcuMTU5NSA4LjE5ODI4IDE3LjQ2OThDOS4zNjIwNyAxOC4zNDkyIDEwLjczMjggMTguODAxNyAxMi4zMTAzIDE4LjgyNzZDMTQuMjUgMTguNzc1OSAxNS44NTM0IDE4LjEwMzUgMTcuMTIwNyAxNi44MTA0QzE4LjQxMzggMTUuNTQzMSAxOS4wODYyIDEzLjkzOTcgMTkuMTM3OSAxMkMxOS4wODYyIDEwLjA2MDQgMTguNDEzOCA4LjQ1NjkyIDE3LjEyMDcgNy4xODk2N0MxNS44NTM0IDUuODk2NTcgMTQuMjUgNS4yMjQxNiAxMi4zMTAzIDUuMTcyNDNDMTEuMjUgNS4xNzI0MyAxMC4yNjcyIDUuMzkyMjYgOS4zNjIwNyA1LjgzMTkyQzguNDU2OSA2LjI3MTU3IDcuNjkzOTcgNi44NjY0IDcuMDczMjggNy42MTY0VjcuNjU1MTlMNS45ODcwNyA4Ljg5NjU3SDkuNTE3MjRDMTAuMDg2MiA4Ljk0ODMgMTAuMzk2NiA5LjI1ODY0IDEwLjQ0ODMgOS44Mjc2MUMxMC4zOTY2IDEwLjM5NjYgMTAuMDg2MiAxMC43MDY5IDkuNTE3MjQgMTAuNzU4NkgzLjkzMTAzWiIvPjwvc3ZnPg==) */
+declare const RefIcon: React.ForwardRefExoticComponent<Omit<TdmIconProps, 'ref'> & React.RefAttributes<HTMLSpanElement>>;
+
+export { RefIcon as default };

package/RotateLeftOutlinedIcon.js

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RotateLeftOutlinedIcon_exports = {};
+__export(RotateLeftOutlinedIcon_exports, {
+  default: () => RotateLeftOutlinedIcon_default
+});
+module.exports = __toCommonJS(RotateLeftOutlinedIcon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_TdmIcon = __toESM(require("../components/TdmIcon"));
+var import_utils = require("../utils");
+const rotateLeftOutlinedSvg = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "#cacaca",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M3.93103 10.7586C3.36207 10.7069 3.05172 10.3966 3 9.82761V4.2414C3.05172 3.67243 3.36207 3.36209 3.93103 3.31036C4.5 3.36209 4.81034 3.67243 4.86207 4.2414V7.34485L5.63793 6.45261C6.43966 5.46985 7.40948 4.70692 8.54741 4.16381C9.71121 3.59485 10.9655 3.31036 12.3103 3.31036C13.9397 3.33623 15.4009 3.73709 16.694 4.51295C18.0129 5.26295 19.0474 6.29743 19.7974 7.6164C20.5733 8.9095 20.9741 10.3707 21 12C20.9741 13.6293 20.5733 15.0905 19.7974 16.3836C19.0474 17.7026 18.0129 18.7371 16.694 19.4871C15.4009 20.263 13.9397 20.6638 12.3103 20.6897C10.319 20.6638 8.58621 20.0819 7.11207 18.944C6.67241 18.5561 6.60776 18.1293 6.9181 17.6638C7.30603 17.2242 7.73276 17.1595 8.19828 17.4698C9.36207 18.3492 10.7328 18.8017 12.3103 18.8276C14.25 18.7759 15.8534 18.1035 17.1207 16.8104C18.4138 15.5431 19.0862 13.9397 19.1379 12C19.0862 10.0604 18.4138 8.45692 17.1207 7.18967C15.8534 5.89657 14.25 5.22416 12.3103 5.17243C11.25 5.17243 10.2672 5.39226 9.36207 5.83192C8.4569 6.27157 7.69397 6.8664 7.07328 7.6164V7.65519L5.98707 8.89657H9.51724C10.0862 8.9483 10.3966 9.25864 10.4483 9.82761C10.3966 10.3966 10.0862 10.7069 9.51724 10.7586H3.93103Z"
+      }
+    )
+  }
+);
+const rotateLeftOutlinedIconDefinition = (0, import_utils.svgToIconDefinition)(
+  rotateLeftOutlinedSvg,
+  "rotate-left-outlined"
+);
+const RefIcon = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TdmIcon.default, __spreadProps(__spreadValues({}, props), { ref, icon: rotateLeftOutlinedIconDefinition }));
+});
+if (process.env.NODE_ENV !== "production") {
+  RefIcon.displayName = "RotateLeftOutlinedIcon";
+}
+var RotateLeftOutlinedIcon_default = RefIcon;