PurgeIcons 使用教程

PurgeIcons 使用教程

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

项目介绍

PurgeIcons 是一个用于按需打包图标的工具，灵感来源于 PurgeCSS。它通过分析你的源代码或构建文件，提取你使用的图标名称，并将这些图标的 SVG 数据打包到你的代码中。这样，你只会获取你需要的图标，不会浪费额外的带宽，也不会有未使用的图标。PurgeIcons 底层使用 Iconify，让你可以访问超过 80 个流行的开源图标集，包含超过 5000 个图标。

项目快速启动

安装

你可以全局安装 PurgeIcons：

npm i -g purge-icons

或者使用 npx 来运行：

npx purge-icons

使用 CLI

以下是一个基本的 CLI 使用示例：

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

这个命令会扫描 src 目录下的所有 HTML 文件，并生成一个 mjs 格式的输出文件 output.js。

应用案例和最佳实践

动态图标

PurgeIcons 支持动态图标的使用。例如，你可以根据条件动态加载不同的图标：

const span = document.createElement('span');
span.className = 'iconify';
span.dataset.icon = isDark ? 'carbon:moon' : 'carbon:sun';
document.body.appendChild(span);

框架集成

PurgeIcons 设计为框架无关，但使用框架插件是最推荐的启动方式。以下是一些官方插件的示例：

• Vite: 使用 vite-plugin-purge-icons
• Nuxt: 使用 nuxt-plugin-purge-module
• Vue CLI: 即将支持

典型生态项目

Iconify

PurgeIcons 底层使用 Iconify，这是一个强大的图标框架，提供了超过 80 个开源图标集，包含超过 5000 个图标。你可以通过 Iconify 访问 Material Design Icons、Font Awesome、Octicon 等图标集。

Icônes

Icônes 是一个图标浏览器，你可以在这里浏览和选择 Iconify 提供的图标集。网址：Icônes

通过这些工具和插件，你可以轻松地在你的项目中集成和使用图标，提高开发效率和用户体验。

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