PurgeIcons 开源项目安装与使用指南

PurgeIcons 开源项目安装与使用指南

purge-icons项目地址:https://gitcode.com/gh_mirrors/pu/purge-icons

目录结构及介绍

PurgeIcons 是一个用于按需打包图标的工具，主要目标是减少应用中图标资源的体积，只保留实际使用的图标。该项目支持多种图标库和前端框架，以下是一般的目录结构：

.
├── node_modules/
│   └── # 安装的依赖包
├── src/
│   ├── assets/
│   │   └── icons/ # 自定义图标存放位置
│   └── components/
│       └── Icon.vue # 图标组件
└── package.json # 包含项目元数据和脚本命令

• node_modules/: 存放项目的所有依赖。
• src/assets/icons/: 如果你有自定义图标，可以将其放置于此目录下。
• src/components/Icon.vue: 这是处理并展示图标的组件。

启动文件介绍

在 PurgeIcons 中，主要通过 CLI 命令或是在构建过程中动态生成图标代码来启动。具体方式取决于你的项目设置和需求：

使用 npx

如果你不希望全局安装 PurgeIcons，可以通过 npx 运行一次性的 CLI 命令进行扫描和生成图标代码。例如:

npx purge-icons --content 'src/*html' --format mjs --output output.js

这条命令将扫描所有源代码中的 .html 文件，寻找其中引用的图标，并将这些图标代码打包成 MJS 格式输出到指定的输出文件中。

全局安装并使用

如果你想频繁使用 PurgeIcons 的 CLI 功能，你可以选择全局安装 PurgeIcons。

npm install -g purge-icons

然后，你可以更简单地运行 CLI 命令而无需每次都带上 npx。

配置文件介绍

尽管 PurgeIcons 可以通过 CLI 参数控制其行为，但为了项目的一致性和可维护性，推荐使用配置文件（如 purgeicons.config.js 或者环境变量）进行更详细的配置。配置文件通常包括以下几个方面：

指定要分析的文件类型和位置

{
    "content": [
        "./src/**/*.{html,js,ts,jsx,tsx,vue}",
        "./public/index.html"
    ]
}

这里指定了一组 glob 模式去匹配要被分析的源代码文件路径。

输出格式和输出文件名

{
    "format": "mjs", // 可选值："json", "mjs"
    "output": "./dist/icons.mjs"
}

这表示图标代码将以 MJS 格式输出到指定路径下的文件中。

其他可配置选项

还有许多其他可配置选项，如排除某些文件，自定义图标前缀等，具体可以在 PurgeIcons 的文档中查看。

---

以上就是 PurgeIcons 开源项目的基本安装与使用方法概述，以及相关重要配置和启动点的说明。通过此文档，你应该能够快速上手并在自己的项目中有效地运用 PurgeIcons 来优化图标资源管理。

purge-icons项目地址:https://gitcode.com/gh_mirrors/pu/purge-icons