1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| // https://unocss.nodejs.cn/guide/config-file
| import {
| defineConfig,
| presetAttributify,
| presetIcons,
| presetTypography,
| presetUno,
| presetWebFonts,
| transformerDirectives,
| transformerVariantGroup,
| } from "unocss";
|
| import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders";
| import fs from "fs";
|
| // 本地SVG图标目录
| const iconsDir = "./src/assets/icons";
|
| // 读取本地 SVG 目录，自动生成 safelist
| const generateSafeList = () => {
| try {
| return fs
| .readdirSync(iconsDir)
| .filter((file) => file.endsWith(".svg"))
| .map((file) => `i-svg:${file.replace(".svg", "")}`);
| } catch (error) {
| console.error("无法读取图标目录:", error);
| return [];
| }
| };
|
| export default defineConfig({
| // 自定义快捷类
| shortcuts: {
| "wh-full": "w-full h-full",
| "flex-center": "flex justify-center items-center",
| "flex-x-center": "flex justify-center",
| "flex-y-center": "flex items-center",
| "flex-x-start": "flex items-center justify-start",
| "flex-x-between": "flex items-center justify-between",
| "flex-x-end": "flex items-center justify-end",
| },
| theme: {
| colors: {
| primary: "var(--el-color-primary)",
| primary_dark: "var(--el-color-primary-light-5)",
| },
| },
| presets: [
| presetUno(),
| presetAttributify(),
| presetIcons({
| // 额外属性
| extraProperties: {
| display: "inline-block",
| width: "1em",
| height: "1em",
| },
| // 图表集合
| collections: {
| // svg 是图标集合名称，使用 `i-svg:图标名` 调用
| svg: FileSystemIconLoader(iconsDir, (svg) => {
| // 如果 `fill` 没有定义，则添加 `fill="currentColor"`
| return svg.includes('fill="') ? svg : svg.replace(/^<svg /, '<svg fill="currentColor" ');
| }),
| },
| }),
| presetTypography(),
| presetWebFonts({
| fonts: {
| // ...
| },
| }),
| ],
| safelist: generateSafeList(),
| transformers: [transformerDirectives(), transformerVariantGroup()],
| });
|
|
