@type-dom/svgs

v0.4.0

Published

a month ago

以下是项目 **[type-dom/svgs](https://github.com/type-dom/svgs)** 的详细介绍：

0High
0Medium
0Low

xjf7711

以下是项目 type-dom/svgs 的详细介绍：

1. 项目概述

名称：type-dom/svgs
描述：这是一个基于 TypeDom 前端框架的 SVG 组件库，提供可复用的 SVG 图标组件（如加号、箭头等）。
目标：通过 TypeDom 框架封装 SVG 图形，实现模块化导入和类型安全的 SVG 图标管理。
技术栈：
- 框架：TypeDom（基于 TypeScript 的前端框架）
- 语言：TypeScript
- 构建工具：Webpack（需手动配置）
- 依赖：@type-dom/framework（TypeDom 核心库）

2. 核心功能

SVG 组件化

将 SVG 图标封装为 TypeDom 组件（如 AddSvg），支持按需导入。
提供基础图标库（如加号、箭头等），开发者可扩展更多自定义图标。

类型安全

基于 TypeScript 的类型系统，确保组件属性和子节点的类型正确性。
支持 TypeDom 的虚拟 DOM 机制，动态更新 SVG 内容。

模块化设计

组件可独立导入使用，无需全局引入。
支持与 TypeDom 的其他组件（如 Division, Br）组合使用。

示例代码

// Typescript Webpack
import {Br, Division, TypeRoot, TextNode} from '@type-dom/framework';
import {AddSvg} from '@type-dom/svgs';
// svgs-root.ts 项目根节点
export class AppElement extends TypeRoot {
  className: 'AppElement';
  constructor() {
    super();
    this.className = 'AppElement';
    addAttrObj(this, { // 设置根节点的属性
      name: 'app-root'
    })
    addStyleObj(this, { // 设置根节点样式
      padding: '30px',
      border: '20px solid #dddddd'
    });
    this.addChild(
      new AddSvg(), // 加号图标
    );
  }
}

// main.ts 项目主程序
// 监听 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取页面中的某个特定元素
  const uiEl = document.querySelector('#example-ref') as HTMLElement;
  if (uiEl) {
    // 实例化 AppElement 组件
    new AppElement().mount(uiEl);
  } else {
    console.error('#example-ref 元素未找到');
  }
});

// index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>type dom svgs </title>
  </head>
  <body>
    <div id="example-ref"></div>
  </body>
</html>

3. 项目结构

type-dom/svgs/
├── src/
│   ├── lib/       # SVG 组件源码（如 AddSvg.ts）
│   ├── lib/       # SVG 组件源码（如 AddSvg.ts）
│   ├── lib/       # SVG 组件源码（如 AddSvg.ts）
│   ├── lib/       # SVG 组件源码（如 AddSvg.ts）
│   ├── index.ts          # 入口文件（导出所有组件）
├── tests/
│   ├── svgs-root.ts      # 示例根组件
│   ├── main.ts           # 示例主程序
├── eslint.config.mjs
├── package.json
├── tsconfig.json
├── vite.config.spec.json
├── package.json          # 依赖和脚本
└── README.md             # 简要说明文档

4. 安装与使用

安装

npm install @type-dom/svgs
# 或使用 yarn/pnpm

依赖要求

需提前安装 @type-dom/framework 核心库：
```
npm install @type-dom/framework
```

5. 技术细节

SVG 组件实现

每个 SVG 图标封装为独立类，继承自 TypeDom 的基类（如 TypeSvg）。

示例：AddSvg 组件定义

    import { TypeProps, SvgPath, TypeSvgSvg } from '@type-dom/framework';
    export class AddSvg extends TypeSvgSvg {
        className: 'AddSvg';
        override childNodes: SvgPath[];
        constructor(params: TypeProps = {}) {
            super(params);
            this.className = 'TdAddSvg';
            addAttrObj(this, {
                name: 'TdAddSvg',
                title: 'TdAddSvg'
            });
            addAttrObj(this, {
                viewBox: '0 0 1024 1024',
            });
            this.resetSize(24, 24);
            this.childNodes = [];
            const path0 = new SvgPath({
                attrObj: {
                    fill: 'currentColor'
                }
            });
            path0.setData(
                'M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333S735.850667 106.666667 512 106.666667z m34.133333 213.333333c4.693333 0 8.533333 3.84 8.533334 8.533333V469.333333h140.8c4.693333 0 8.533333 3.84 8.533333 8.533334v46.933333a8.533333 8.533333 0 0 1-8.533333 8.533333H554.666667v140.8a8.533333 8.533333 0 0 1-8.533334 8.533334h-46.933333a8.533333 8.533333 0 0 1-8.533333-8.533334V533.333333h-140.8a8.533333 8.533333 0 0 1-8.533334-8.533333v-46.933333c0-4.693333 3.84-8.533333 8.533334-8.533334H490.666667v-140.8c0-4.693333 3.84-8.533333 8.533333-8.533333h46.933333z',
            );
            this.addChild(path0);
        }
    }

TypeDom 集成

组件可直接作为 TypeDom 节点使用，支持动态渲染和事件绑定。
结合 TypeRoot 实现根节点挂载，通过 mount() 方法渲染到 DOM。

6. 使用场景

图标管理系统：适用于需要高度定制化 SVG 图标的 TypeDom 项目。
动态图形渲染：结合 TypeDom 的响应式机制，动态更新 SVG 内容。
教学示例：学习 TypeDom 框架与 SVG 组件封装的最佳实践。

7. 注意事项

依赖 TypeDom

需熟悉 TypeDom 的核心概念（如组件生命周期、虚拟 DOM）。
需手动配置 Webpack 构建流程（无现成 CLI 工具）。

性能与限制

SVG 组件化会增加代码体积，需按需引入。

8. 贡献与扩展

添加新 SVG 组件

在 src/libs/ 中创建新组件（如 ArrowSvg.ts）。
继承 TypeSvg 基类，定义 SVG 路径数据和样式。
导出组件供外部调用。

文档

TypeDom.svgs

9. 总结

type-dom/svgs 是一个轻量级的 SVG 图标解决方案，专为 TypeDom 框架设计。它通过 TypeScript 的类型系统和 TypeDom 的组件化能力，实现了 SVG 图标的模块化管理和类型安全渲染。尽管目前处于早期阶段，但它为开发者提供了一个灵活的模板，可用于构建高度定制化的 SVG 图标库。