告别图标管理烦恼！vite-plugin-svg-spritemap 让 SVG 图标使用更简单

概述

vite-plugin-svg-spritemap 是一个 Vite 插件，用于自动生成 SVG 精灵图（sprite map）。它可以将多个 SVG 文件合并成一个精灵图，并提供便捷的使用方式，大大简化 SVG 图标的管理和使用。

主要特性

• 🚀 自动生成 SVG 精灵图
• 📁 支持文件夹扫描
• 🎨 支持 SVG 优化
• 🔧 灵活的配置选项
• 📦 零运行时依赖
• 🎯 TypeScript 支持

安装

npm install vite-plugin-svg-spritemap --save-dev

基础配置

在 vite.config.js 中配置插件

import { defineConfig } from "vite";
import { svgSpritemap } from "vite-plugin-svg-spritemap";

export default defineConfig({
  plugins: [
    svgSpritemap({
      pattern: "src/assets/icons/*.svg",
    }),
  ],
});

基本配置选项

svgSpritemap({
  // SVG 文件匹配模式
  pattern: "src/assets/icons/*.svg",

  // 输出文件名
  filename: "sprite.svg",

  // 输出目录
  outputDir: "public",

  // 是否在开发模式下启用
  dev: true,

  // 是否在构建模式下启用
  build: true,
});

高级配置

完整配置示例

import { defineConfig } from "vite";
import { svgSpritemap } from "vite-plugin-svg-spritemap";

export default defineConfig({
  plugins: [
    svgSpritemap({
      // 文件匹配模式
      pattern: "src/assets/icons/*.svg",

      // 输出配置
      filename: "sprite.svg",
      outputDir: "public",

      // 开发和生产环境配置
      dev: true,
      build: true,

      // SVG 优化选项
      svgo: {
        plugins: [
          {
            name: "preset-default",
            params: {
              overrides: {
                removeViewBox: false,
              },
            },
          },
        ],
      },

      // 自定义 ID 生成
      id: (file) => `icon-${file.name}`,

      // 自定义类名
      className: "sprite-icon",

      // 内联样式
      inline: false,

      // 前缀
      prefix: "icon-",

      // 后缀
      suffix: "",
    }),
  ],
});

使用方法

在 Vue 组件中使用

<template>
  <div>
    <svg class="icon">
      <use :href="`/sprite.svg#icon-${iconName}`"></use>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

在 React 组件中使用

import React from "react";

const Icon = ({ name, className = "", ...props }) => {
  return (
    <svg className={`icon ${className}`} {...props}>
      <use href={`/sprite.svg#icon-${name}`} />
    </svg>
  );
};

export default Icon;

最佳实践

文件组织

src/
├── assets/
│   └── icons/
│       ├── home.svg
│       ├── user.svg
│       └── settings.svg
├── components/
│   └── Icon.vue
└── vite.config.js

创建 Icon 组件

<!-- src/components/Icon.vue -->
<template>
  <svg
    :class="['icon', className]"
    :style="{ width: size + 'px', height: size + 'px' }"
    v-bind="$attrs"
  >
    <use :href="`/sprite.svg#icon-${name}`" />
  </svg>
</template>

<script>
export default {
  name: "Icon",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: [String, Number],
      default: 24,
    },
    className: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped>
.icon {
  fill: currentColor;
  vertical-align: middle;
}
</style>

使用示例

<template>
  <div>
    <Icon name="home" size="24" />
    <Icon name="user" size="32" className="text-blue-500" />
    <Icon name="settings" size="16" />
  </div>
</template>

<script>
import Icon from "@/components/Icon.vue";

export default {
  components: {
    Icon,
  },
};
</script>

常见问题

Q: 如何自定义 SVG 优化？

A: 使用 svgo 配置选项：

svgSpritemap({
  pattern: "src/assets/icons/*.svg",
  svgo: {
    plugins: [
      {
        name: "preset-default",
        params: {
          overrides: {
            removeViewBox: false,
            removeTitle: false,
          },
        },
      },
    ],
  },
});

Q: 如何支持多主题图标？

A: 使用不同的文件夹和配置：

svgSpritemap([
  {
    pattern: "src/assets/icons/light/*.svg",
    filename: "sprite-light.svg",
  },
  {
    pattern: "src/assets/icons/dark/*.svg",
    filename: "sprite-dark.svg",
  },
]);

Q: 如何添加自定义类名？

A: 使用 className 选项：

svgSpritemap({
  pattern: "src/assets/icons/*.svg",
  className: "sprite-icon",
});

总结

vite-plugin-svg-spritemap 是一个功能强大且易于使用的 Vite 插件，它能够：

1. 自动扫描和合并 SVG 文件
2. 生成优化的精灵图
3. 提供灵活的配置选项
4. 支持开发和生产环境
5. 零运行时依赖

通过合理配置和使用，可以大大简化项目中 SVG 图标的管理，提高开发效率和用户体验。