我目前正在使用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组件,同时还是可定制的
提前感谢!
/// <reference types="vite-plugin-svgr/client" />
这一行声明。非常感谢你指导我找对了方向。 - fhueser