使用 Preact 和 Vite 将 SVG 导入为组件

Question

我目前正在使用preact、tailwindcss和vite开发一个应用程序。不幸的是，导入svg似乎有一些问题。有一个单独的存储库只包含svg资源。 我的原始计划是像在经典的react中使用SVGR和以下语法将它们作为组件导入：

import { ReactComponent as Search } from 'assets/icons/search-lg.svg';

这种方法至少有两个问题无法解决。一个是preact，另一个是缺乏SVGR。 然后我尝试导入vite-plugin-svgr，并在我的vite.config.js中使用它。

  plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],

使用以下导入语法，它“有点”可以工作:

import Search from 'assets/icons/search-lg.svg?component';

很不幸，这会引发以下错误，我无法解决除了忽略它之外的其他方法，但这并不是一个真正的选择：

TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations

现在备选方案是创建一个包装组件，仅从给定路径中导入svg并自己创建一个组件。这也将简化使用tailwind的样式。
不幸的是，我无法以一种可以用<svg>标签来包装它的方式导入文件。使用<img>不是一个真正的选择，因为我需要能够操作svg。
那么，有人有想法如何：

• 在我的设置中正确使用组件导入
• 创建一个从文件导入svg的preact组件，同时还是可定制的

提前感谢！

- fhueser

---

这个插件 https://github.com/pd4d10/vite-plugin-svgr 怎么样？示例请见 https://stackblitz.com/edit/vitejs-vite-qk88v1 - User 28

@qk88v1 我使用的插件是你提供链接的一个分支版本。我尝试了你的版本，发现了问题所在。我在 vite-env.d.ts 中缺少 /// <reference types="vite-plugin-svgr/client" /> 这一行声明。非常感谢你指导我找对了方向。 - fhueser

Answer 1

我最终通过使用vite-plugin-svgr让它工作了。最后在vite-env.d.ts中加入/// <reference types="vite-plugin-svgr/client" />使编译器满意。

现在我可以使用传统的语法:

import { ReactComponent as Search } from 'assets/icons/search-lg.svg';

感谢@user-28指导我走上了正确的道路！

- fhueser

---

就此而言，svgr 是一种非常糟糕的使用 SVG 的方式，如果可能的话应该避免使用。请参见 https://twitter.com/_developit/status/1382838799420514317。 - rschristian

有趣，谢谢！如果可以使用Tailwind/CSS操纵SVG，您会选择哪种替代方案？ - fhueser

"<use>" 可能是您想要的：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/use - rschristian