无法为 SVG 组件设置 className 属性

Question

在从 webpack 迁移到 vite 的过程中，我遇到了以下问题。我有以下 React 组件：

import { otherQuote as other__quote } from '@styles/pages/product/other/other.module.scss';
import {
  quote,
  quoteText as quote__text,
  quoteAuthor as quote__author,
  quoteIcon as quote__icon,
} from '@styles/pages/product/other/quote.module.scss';
import { productRectangle as product__rectangle } from '@styles/pages/product/product.module.scss';
import cn from 'classnames';
import QuotationMark from '@assets/quotationMark.svg';

const Quote = () => {
  return (
    <section className={cn(other__quote, quote, product__rectangle)}>
      <QuotationMark className={quote__icon} /> {/*<--- erorr */}
      <q className={quote__text}>
        ...
      </q>
      <footer className={quote__author}>...</footer>
    </section>
  );
};

export { Quote };

当我尝试将 className 属性设置为 QuotationMark svg 组件时，打字稿会生成以下错误：

TS2322：类型 { 类名：字符串； } 不可分配给 IntrinsicAttributes 类型 类型 IntrinsicAttributes 上不存在属性 className

我注意到当我按照 vite 的 env 参考中的建议连接 vite 的 vite/client 类型声明文件时发生了错误，该文件又包含以下 svg 声明：

declare module '*.svg' {
  const src: string
  export default src
}

那么这里可以做什么才能向 svg 组件添加 className 属性呢？

Answer 1

Vite 不会导入

.svg

文件作为 React 组件。它只是一个字符串，您可以将其设置为图像标签的源。

所以你可能想要：

import quotationMark from '@assets/quotationMark.svg';

<img src={quotationMark} className="quote__author" />