@mcansh/vite-plugin-svg-sprite

這個 vite 插件會轉換任何導入的 svg 檔案，並將它們合併成一個 svg 精靈圖。

安裝與設定

npm i -D @mcansh/vite-svg-sprite-plugin

這是一個使用 Remix 的範例，但此插件適用於任何 vite 設定。

import { svgSprite } from "@mcansh/vite-plugin-svg-sprite";
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remix(), tsconfigPaths(), svgSprite()],
});

您可以設定產生的精靈圖檔案名稱以及產生的符號 ID 模式。

import { DEFAULT_COPY_ATTRS, svgSprite } from "@mcansh/vite-plugin-svg-sprite";

svgSprite({
  spriteOutputName: "sprite.svg",
  symbolId: "icon-[name]-[hash]",
  svgstoreOptions: {
    copyAttrs: [
      ...DEFAULT_COPY_ATTRS,
      // any additional attributes you want to copy from the svg to the symbol
    ],
  },
});

使用方式

import spriteUrl from "virtual:@mcansh/vite-plugin-svg-sprite";
import linkIconHref from "@primer/octicons/build/svg/link-16.svg";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => {
  return [
    { rel: "preload", as: "image", href: spriteUrl, type: "image/svg+xml" },
  ];
};

export default function Component() {
  return (
    <svg className="size-4" aria-hidden>
      <use href={linkIconHref} />
    </svg>
  );
}