open-index/open-npm huggingface dataset:
npm package: @svgfmt/cli
Description: CLI tool for formatting SVG files
Latest version: 0.2.0

# @svgfmt/cli

[English](./README.md) | [简体中文](./README.zh-CN.md)

使用 [@svgfmt/core](../svgfmt-core) 格式化 SVG 文件的命令行工具。

## 功能特性

- 🎯 使用 glob 模式格式化 SVG 文件
- 📁 支持单文件和批量处理
- 🔄 原地格式化或输出到指定目录
- ✨ 将单色 SVG 转换为使用 `currentColor`
- 🧹 移除不必要的属性并优化文件大小
- 🔧 自定义转换函数（文件或内联代码）
- 📦 易于集成到构建流程中

## 安装

```bash
# 使用 pnpm（在 monorepo 中推荐）
pnpm add @svgfmt/cli

# 使用 npm
npm install @svgfmt/cli

# 使用 yarn
yarn add @svgfmt/cli
```

## 使用方法

### 命令行

```bash
# 格式化单个文件（覆盖原文件）
svgfmt icon.svg

# 使用 glob 模式格式化多个文件
svgfmt "icons/**/*.svg"

# 输出到指定目录
svgfmt "icons/**/*.svg" -o dist/icons

# 输出单个文件到指定位置
svgfmt icon.svg -o formatted-icon.svg

# 显示帮助
svgfmt --help

# 显示版本
svgfmt --version
```

### 编程 API

```typescript
import { formatPattern } from '@svgfmt/cli';

// 格式化匹配模式的文件
const summary = await formatPattern('icons/**/*.svg', {
  output: 'dist/icons',
});

console.log(`已格式化 ${summary.success}/${summary.total} 个文件`);

// 检查单个结果
for (const result of summary.results) {
  if (result.success) {
    console.log(`✓ ${result.input} → ${result.output}`);
  } else {
    console.error(`✗ ${result.input}: ${result.error}`);
  }
}
```

## 选项

- `-o, --output <path>` - 输出目录或文件路径。如果未指定，将原地格式化文件。
- `-t, --transform <value>` - 自定义转换函数：文件路径（如 `./transform.js`）或内联代码（如 `svg => svg.replace(...)`）。
- `-V, --version` - 显示版本号
- `-h, --help` - 显示帮助信息

## 示例

### 原地格式化

```bash
# 格式化当前目录中的所有 SVG 文件
svgfmt "*.svg"

# 格式化 src/icons 中的所有 SVG 文件
svgfmt "src/icons/**/*.svg"
```

### 输出到目录

```bash
# 保留目录结构
svgfmt "src/icons/**/*.svg" -o dist/icons
```

### 单个文件

```bash
# 格式化并保存到新文件
svgfmt logo.svg -o logo-formatted.svg
```

### 自定义转换

您可以使用 `-t` / `--transform` 选项对 SVG 文件应用自定义转换。

#### 使用转换文件

创建一个导出函数的转换文件：

```javascript
// transform.js
export default function addCustomClass(svg) {
  return svg.replace(/<svg/, '<svg class="custom-icon"');
}
```

或使用命名导出：

```javascript
// transform.js
export function transform(svg) {
  return svg.replace(/<svg/, '<svg data-processed="true"');
}
```

然后在 CLI 中使用：

```bash
svgfmt "icons/**/*.svg" --transform ./transform.js
```

#### 使用内联代码

对于简单的转换，您可以使用内联代码：

```bash
# 添加自定义属性
svgfmt "icons/**/*.svg" -t 'svg => svg.replace(/<svg/, "<svg data-icon=\"true\"")'

# 异步转换
svgfmt "icons/**/*.svg" -t 'async svg => { await doSomething(); return svg; }'
```

#### 在编程 API 中使用

```typescript
import { formatPattern } from '@svgfmt/cli';

// 直接传入转换函数
const summary = await formatPattern('icons/**/*.svg', {
  output: 'dist/icons',
  transform: (svg) => {
    // 添加自定义属性
    return svg.replace(/<svg/, '<svg class="icon"');
  },
});

// 或异步转换
const summary2 = await formatPattern('icons/**/*.svg', {
  transform: async (svg) => {
    // 执行异步操作
    const processed = await processWithAPI(svg);
    return processed;
  },
});
```

## 开发

### 设置

安装依赖：

```bash
pnpm install
```

### 构建

构建 CLI：

```bash
pnpm build
```

监听模式：

```bash
pnpm dev
```

### 测试

运行测试：

```bash
pnpm test
```

## 许可证

MIT
npm package: @svgfmt/core
Description: SVG 格式化和优化的核心库，提供强大的 SVG 处理功能。
Latest version: 0.2.0

# @svgfmt/core

SVG 格式化和优化的核心库，提供强大的 SVG 处理功能。

## 安装

```bash
pnpm add @svgfmt/core
```

## 基本使用

### 格式化 SVG

```typescript
import { format } from '@svgfmt/core';

// 基本格式化
const optimizedSvg = await format(svgContent);

// 自定义配置
const customSvg = await format(svgContent, {
  traceResolution: 800, // 提高路径合并分辨率
});
```

### 颜色处理

库会自动检测 SVG 中的颜色，并进行以下处理：

- **单一颜色检测**：识别只使用一种颜色的 SVG
- **颜色移除**：将单一颜色统一为黑色，然后移除颜色属性，使其继承父元素颜色
- **多色保持**：对于多色 SVG，保持原始颜色不变
- **透明度处理**：移除不必要的透明度属性

### 路径合并

使用先进的图像追踪技术，将多个路径元素合并为单个路径：

```typescript
import { format } from '@svgfmt/core';

// 自动路径合并
const mergedSvg = await format(complexSvg, {
  traceResolution: 600, // 路径追踪分辨率
});
```

## API 文档

### `format(svgContent, options?)`

主要的 SVG 格式化函数。

**参数：**

- `svgContent: string` - 要处理的 SVG 内容
- `options?: FormatOptions` - 可选的配置选项

**返回值：**

- `Promise<string>` - 格式化后的 SVG 内容

### `FillifyOptions`

路径合并处理的配置选项。

```typescript
interface FillifyOptions {
  /** 路径追踪分辨率，默认: 600 */
  traceResolution?: number;
}
```

### `FormatOptions`

格式化处理的配置选项，扩展自 `FillifyOptions`。

```typescript
interface FormatOptions extends FillifyOptions {
  /** 自定义转换函数 */
  transform?: (svg: string) => string | Promise<string>;
}
```

## 处理流程

1. **预处理**：去除尺寸、透明度、样式和脚本等不必要的属性
2. **颜色统一**：检测并统一单一颜色为黑色
3. **路径合并**：使用图像追踪技术合并路径
4. **颜色移除**：移除颜色属性，使其继承父元素颜色
5. **SVG 优化**：使用 SVGO 进行深度优化
6. **代码格式化**：使用 Prettier 美化输出代码
7. **自定义转换**：执行用户提供的自定义转换函数

## 示例

### 处理单色图标

```typescript
const input = `<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#ff0000" d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>`;

const output = await format(input);
// 结果将移除固定颜色，使其继承父元素颜色
```

### 处理复杂多路径 SVG

```typescript
const complexSvg = `<svg>
  <path d="M10 10 L20 10 L20 20 L10 20 Z" fill="#333"/>
  <path d="M15 15 L25 15 L25 25 L15 25 Z" fill="#333"/>
</svg>`;

const merged = await format(complexSvg);
// 结果将是合并为单个路径的优化 SVG
```

### 使用自定义转换函数

```typescript
import { format } from '@svgfmt/core';

// 使用同步转换函数
const customSvg = await format(svgContent, {
  // 自定义转换：添加class属性到svg元素
  transform: (svg) => svg.replace(/<svg/, '<svg class="icon"'),
});

// 使用异步转换函数
const asyncCustomSvg = await format(svgContent, {
  // 异步自定义转换示例
  transform: async (svg) => {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 50));
    return svg;
  },
});
```

## 开发

### 安装依赖

```bash
pnpm install
```

### 构建

```bash
pnpm build
```

### 开发模式

```bash
pnpm dev
```

### 测试

```bash
pnpm test
```

## 技术细节

本库使用以下技术实现功能：

- **@iconify/tools**：SVG 解析和处理
- **oslllo-potrace**：图像追踪和路径合并
- **oslllo-svg-fixer** 和 **oslllo-svg2**：SVG 处理和转换
- **svgo**：SVG 优化
- **prettier**：代码格式化

## 许可证

[查看许可证文件](../../LICENSE)
npm package: @svgfwjs/err
Description: [ [README на русском](README_ru.md) ]
Author: Vsevolod S.V.G Subbotkin
Latest version: 1.0.0

[ [README на русском](README_ru.md) ]

# JS Error with reduced Stack Trace
V8 JavaScript engine introduced stack trace into [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) objects and gave ability to manipulate it with [`Error.captureStackTrace()`](https://v8.dev/docs/stack-trace-api) static method. This gives opportunity for developing own API and libraries which has functions that throws `Error`s to cut off parts of the stack trace which points to the API/library and make focus on code that used its functions wrong.

This package of my personal framework provides function that creates and returns an `Error` instance and reduces the stack trace to function that throws that `Error` instance. It's part of my personal framework as core component that is used in other packages, however, You may use it in Your code or projects.

# Usage
```
npm i @svgfwjs/err
```

## Syntax
```js
err('Error Message.', callerFunction, ErrorType, optionsOrFileName, lineNumber)
```

- `callerFunction` is the function that throws an error which is used for stack trace reduction
- `ErrorType` is the type of error that was chosen to be thrown.

It should be any of [`Error` objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) that exists in JavaScript or it may be own custom `Error`.
- `optionsOrFileName` - this argument is being passed to [`Error` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Error#options) alongside with `'Error Message.'`. It can be object that has `cause` property/key or string that is path to the file.
- `lineNumber` is the number of the line in the file (which also is being passed to `Error` constructor)

**The thing is:** file name and line number parameters/arguments are mostly usable in certain web browsers. Node and other alike runtime enviroments doesn't use those parameters/arguments.

All parameters/arguments are optional, just like in `Error` constructor.

## Back-end
```js
import { err } from '@svgfwjs/err'

function yourCoolFunction() {
    if ( somethingIncorrect )
        throw err('You did it wrong!', yourCoolFunction)
}

yourCoolFunction()
// Will result as following:
// yourCoolFunction()
// ^
// 
// Error: You did it wrong!
//     at file:///.../yourCoolScript.js:8:1
```

## Front-end
```html
<script src="https://svg.moe/js/err.js"></script>
<script>
function yourCoolFunction() {
    if ( somethingIncorrect )
        throw svgfwjs.err('You did it wrong!', yourCoolFunction)
}

yourCoolFunction()
// Will result as following:
// Uncaught Error: You did it wrong!
//     at index.html:13:1
</script>
```

## As bundle-able module
```js
import err from '@svgfwjs/err'
```