vite svg图标生成精灵图（雪碧图）

SVG图标精灵图（雪碧图）可以通过将多个SVG图标合并成一个单独的SVG文件。这种方法可以减少HTTP请求，提高页面加载速度和性能。

1、安装依赖

npm i vite-plugin-svg-spritemap -D

2、配置

import { svgSpritemap } from 'vite-plugin-svg-spritemap'
{
  plugins: [
    ...
    svgSpritemap({
      pattern: 'src/xxx/*.svg', // 需要处理的svg路径
      filename: 'static/spritemap_home.svg', // 生成的精灵图路径
      currentColor: false,
      svgo: {
        plugins: [
          {
            name: 'preset-default',
            params: {
              overrides: {
                removeViewBox: false,
                removeEmptyAttrs: false,
                moveGroupAttrsToElems: false,
                // collapseGroups: false,
                removeDimensions: false,
                cleanupIds: {
                  preservePrefixes: ['sprite-'],
                },
              },
            },
          },
        ],
      },
    }),
  ],
}

想要生成多个精灵图，配置多组plugin即可

3、使用

// name：原svg文件名
export const Icon: React.FC<{ name: string }> = ({ name }) => (
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <use xlinkHref={`/static/spritemap_home.svg#${name}`} />
  </svg>
);

const App = () => {
  return <Icon name="arrow" />;
};