☰

TypescriptでSVGファイルをインポートできません 質問する

tag-icon • tag-icon typescript svg
TypescriptでSVGファイルをインポートできません 質問する

ファイルではtypescript(*.tsx)、次のステートメントを使用して svg ファイルをインポートできません:

import logo from './logo.svg';

Transpiler はこう言います:[ts] cannot find module './logo.svg'.私の svg ファイルはただです<svg>...</svg>。

しかし、.jsファイルでは、まったく同じインポート ステートメントを使用して問題なくインポートできます。これは、TS トランスパイラ用に何らかの方法で設定する必要がある svg ファイルのタイプと関係があると思います。

これを ts ファイルで動作させる方法を共有していただけますか?

ベストアンサー1

webpack を使用する場合は、カスタム タイプ ファイルを作成することでこれを実行できます。

次の内容を含むcustom.d.tsという名前のファイルを作成します。

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

custom.d.tsをtsconfig.json以下のように追加します

"include": ["src/components", "src/custom.d.ts"]

ソース：https://webpack.js.org/guides/typescript/#その他のアセットのインポート

おすすめ記事