vite-plugin-sprites-wym

vite-plugin-sprites-wym 是一个用于生成 PNG 和 SVG 雪碧图的 Vite 插件。它可以帮助你在构建过程中自动生成雪碧图，提高前端资源的加载效率。

安装

npm install vite-plugin-sprites-wym --save-dev

用法

配置 vite.config.js

import { defineConfig } from 'vite'
import { vitePluginSprites } from 'vite-plugin-sprites-wym'

export default defineConfig({
    plugins: [
        vitePluginSprites({
            png: {
                src: 'test/assets/icons',
                metaFile: 'test/assets/sprites/meta.json',
                outputDir: 'test/assets/sprites',
            },
            svg: {
                src: 'test/assets/svgs',
                outputDir: 'test/assets/sprites',
            },
        }),
    ],
})

配置选项

png

| 选项 | 类型 | 默认值 | 描述 | | ------------ | -------- | ------ | ------------------------------- | | src | string | 无 | PNG 图标源文件夹路径 | | outputDir | string | 无 | 生成的 PNG 雪碧图输出文件夹路径 | | spriteName | string | 无 | 生成的 PNG 雪碧图文件名 | | metaFile | string | 无 | 生成的 PNG 雪碧图元数据文件路径 | | padding | number | 无 | 图标之间的间距 |

svg

| 选项 | 类型 | 默认值 | 描述 | | -------------- | -------- | ------ | ------------------------------- | | src | string | 无 | SVG 图标源文件夹路径 | | outputDir | string | 无 | 生成的 SVG 雪碧图输出文件夹路径 | | spriteName | string | 无 | 生成的 SVG 雪碧图文件名 | | symbolPrefix | string | 无 | SVG 符号的前缀 |

开发模式

在开发模式下，插件会监听源文件夹中的文件变化，并在文件修改时自动重新生成雪碧图。同时，会触发浏览器的全量刷新。

构建模式

在构建开始时，插件会自动生成 PNG 和 SVG 雪碧图。

类型定义

如果你使用 TypeScript，可以导入插件的类型定义：

import { vitePluginSprites, PluginOptions } from 'vite-plugin-sprites-wym'

const options: PluginOptions = {
    png: {
        src: 'test/assets/icons',
        metaFile: 'test/assets/sprites/meta.json',
        outputDir: 'test/assets/sprites',
    },
    svg: {
        src: 'test/assets/svgs',
        outputDir: 'test/assets/sprites',
    },
}

export default defineConfig({
    plugins: [vitePluginSprites(options)],
})

依赖

• vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
• chokidar: ^4.0.3
• spritesmith: ^3.5.1

开发依赖

• @rollup/plugin-commonjs: ^28.0.6
• @rollup/plugin-json: ^6.1.0
• @rollup/plugin-node-resolve: ^16.0.1
• @types/node: ^24.1.0
• pixelsmith: ^2.6.0
• rollup: ^4.40.0
• rollup-plugin-ignore: ^1.0.10

脚本命令

• npm run build: 使用 Rollup 构建项目
• npm run dev: 使用 Vite 进行开发构建
• npm prepublishOnly: 在发布前自动执行构建命令

许可证

本项目采用 MIT 许可证。

作者

wym