寻求替代品

[yangxu52]

如题：
这个插件已经不维护了，并且他的PostCSS和vue主线的PostCSS版本冲突。

讨论，
现在是否还需要精灵图这种方式来优化网络请求，是否有比较简单将assets/xxx/icons/下的svg建立统一使用的插件？

[liucjuan]

如题： 这个插件已经不维护了，并且他的PostCSS和vue主线的PostCSS版本冲突。

讨论， 现在是否还需要精灵图这种方式来优化网络请求，是否有比较简单将assets/xxx/icons/下的svg建立统一使用的插件？

vite-svg-loader试过吗

[FrankFang]

你确实可以直接引入 svg 文件变成一个 svg 节点来使用，这样一来就可以做到按需 import 了

[yangxu52]

我自己维护的新版本：vite-plugin-svg-icons-ng
github
npm

[xxwangkaimin]

@yangxu52
你好，我用了你维护的版本，发现svg图标在渲染的时候出现了问题
sun.svg图标代码：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun">
    <circle cx="12" cy="12" r="4"/>
    <path d="M12 2v2"/>
    <path d="M12 20v2"/>
    <path d="m4.93 4.93 1.41 1.41"/>
    <path d="m17.66 17.66 1.41 1.41"/>
    <path d="M2 12h2"/>
    <path d="M20 12h2"/>
    <path d="m6.34 17.66-1.41 1.41"/>
    <path d="m19.07 4.93-1.41 1.41"/>
</svg>

使用vite-plugin-svg-icons-ng插件：

使用vite-plugin-svg-icons插件：

在渲染效果上看vite-plugin-svg-icons-ng这个插件是有点问题的，还是说我少了什么配置？

[yangxu52]

@xxwangkaimin 你可以试试 v1.1.1 应该修复了这个问题

提供的这个svg内部的path是用来“占位的”，依赖在svg标签上定义的stroke（描边）及相关属性去“绘制”这个图形。

原本的转换逻辑是直接新建的symbol，不会保留svg标签上的其他属性的，现在修改了逻辑，保留了属性。

后续issue提交在这边吧https://github.com/yangxu52/vite-plugin-svg-icons-ng/issues

[chocho-1115]

找到了2个vite下的替代方案
https://www.npmjs.com/package/@spiriit/vite-plugin-svg-spritemap
https://www.npmjs.com/package/vite-plugin-svg-spritemap

我在思考这2个方案，我该怎么选择
看起来他们都差不多

如果你们有什么建议 希望能分享给我