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" />;
};
