以下是项目 type-dom/svgs 的详细介绍：
- 名称：
type-dom/svgs - 描述：这是一个基于 TypeDom 前端框架的 SVG 组件库，提供可复用的 SVG 图标组件（如加号、箭头等）。
- 目标：通过 TypeDom 框架封装 SVG 图形，实现模块化导入和类型安全的 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>type-dom/svgs/
├── src/
│ ├── lib/
│ │ ├── common/ # Common 分类 SVG 组件
│ │ ├── element-plus/ # Element Plus 分类 SVG 组件
│ │ ├── fluentui/ # FluentUI 分类 SVG 组件
│ │ ├── other/ # Other 分类 SVG 组件
│ │ ├── common-index.ts # Common 分类导出
│ │ ├── element-plus-index.ts # Element Plus 分类导出
│ │ ├── fluentui-index.ts # FluentUI 分类导出
│ │ └── icon.ts # 图标基类
│ ├── index.ts # 主入口文件（导出所有组件）
│ ├── common-svg-list.ts # Common SVG 列表
│ ├── element-plus-svg-list.ts # Element Plus SVG 列表
│ └── fluentui-svg-list.ts # FluentUI SVG 列表
├── trans-svgs/ # SVG 转换脚本
│ ├── common/ # Common SVG 源文件和测试
│ ├── element-plus/ # Element Plus SVG 源文件
│ ├── fluentui/ # FluentUI SVG 源文件
│ └── *.mjs # 转换脚本
├── tests/ # 测试文件
├── ai-docs/ # AI 文档
├── GENERATED/ # 生成的文档（TypeDoc）
├── package.json # 依赖和脚本
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite Plus 配置
├── typedoc.json # TypeDoc 配置
└── README.md # 项目说明文档
npm install @type-dom/svgs
# 或使用 yarn/pnpm- 需提前安装
@type-dom/framework核心库：npm install @type-dom/framework
本项目提供多种导入方式，支持灵活的 tree-shaking 优化。详见 TREE-SHAKING-GUIDE.md。
方式 1：从主入口导入（推荐）
// 最简单的方式，现代 bundler 会自动进行 tree-shaking
import { TdAddSvg, TdCloseSvg } from "@type-dom/svgs";方式 2：从分类入口导入（适合大型项目）
// Common 分类（195 个图标，~10.7 KB）
import { TdAddSvg } from "@type-dom/svgs/common";
// Element Plus 分类（293 个图标，~17.8 KB）
import { TdSomeIcon } from "@type-dom/svgs/element-plus";
// FluentUI 分类（5255 个图标，~425 KB）
import { TdFluentIcon } from "@type-dom/svgs/fluentui";
// Other 分类（33 个图标，~1.7 KB）
import { TdOtherIcon } from "@type-dom/svgs/other";示例：使用 SVG 组件
import { Division, TypeRoot } from "@type-dom/framework";
import { TdAddSvg } from "@type-dom/svgs";
export class AppElement extends TypeRoot {
className: "AppElement";
constructor() {
super();
this.className = "AppElement";
this.addChild(
new Division({
children: [
new TdAddSvg(), // 使用加号图标
],
}),
);
}
}可用的图标分类：
- Common: 通用图标（如 add, close, user, 404 等）
- Element Plus: Element Plus 风格图标
- FluentUI: Microsoft FluentUI 风格图标
- Other: 其他自定义图标
-
每个 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 节点使用，支持动态渲染和事件绑定。
- 结合
TypeRoot实现根节点挂载，通过mount()方法渲染到 DOM。
- 图标管理系统：适用于需要高度定制化 SVG 图标的 TypeDom 项目。
- 动态图形渲染：结合 TypeDom 的响应式机制，动态更新 SVG 内容。
- 教学示例：学习 TypeDom 框架与 SVG 组件封装的最佳实践。
- SVG 组件化会增加代码体积，需按需引入。
- 在
src/lib/{category}/中创建新组件（如ArrowSvg.ts）。 - 继承
TypeSvg基类，定义 SVG 路径数据和样式。 - 导出组件供外部调用。
type-dom/svgs 是一个轻量级的 SVG 图标解决方案，专为 TypeDom 框架设计。它通过 TypeScript 的类型系统和 TypeDom 的组件化能力，实现了 SVG 图标的模块化管理和类型安全渲染。尽管目前处于早期阶段，但它为开发者提供了一个灵活的模板，可用于构建高度定制化的 SVG 图标库。