Блог

Главная - Вопросы по программированию - Как импортировать svg-файл в React?

Как импортировать svg-файл в React?

#reactjs #typescript #svg #webpack #import

#reactjs #typescript #svg #webpack #импорт

Вопрос:

У меня есть пользовательский проект React Typescript Webpack. Мне нужно импортировать простой svg-файл и использовать его в компоненте. Typescript утверждает, что это:

Не удается найти модуль

Я установил svgr, добавил его в свою конфигурацию webpack, создал пользовательский файл .d.ts, позволяющий импортировать svg в typescript, и указал его в файле tsconfig.json. Ничего не работает (на данный момент я запускаю компонент в Storybook).

Вот мой веб-пакет:

  module: {
      rules: [
        {
          test: /.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /.css$/, use: ["style-loader", "css-loader"] },
        { test: /.svg$/, use: ["@svgr/webpack"] },
        { test: /.(png|svg|jpg|gif)$/, use: ["file-loader"] },
      ],
    },

Мой компонент

 import React, { useEffect } from "react";
import Account from "./account.svg";

export default function Icon({ icon }) {
  return (
    <div>
      <Account/>
    </div>
  );
}

Пользовательский .d.ts

 declare module "*.svg" {
  const content: any;
  export default content;
}

// added to tsconfig.json
"include": ["./src/**/*", "./custom.d.ts"],

svg — это простой <svg><path blabla/></svg> файл.

Как это исправить?

Ответ №1:

У меня была такая же проблема, и я нашел решение здесь.

Я лично использовал этот метод :

  1. Я импортировал свой логотип в качестве компонента ReactComponent.

  2. Затем я использовал его в своем коде 🙂

 import React from "react";
import { ReactComponent as MySvgFile } from "path/to/file.svg";

export default function MyComponent() {
  return (
    <div>
      <MySvgFile />
    </div>
  );
}

Комментарии:

1. Откуда берется <Logo />? Что вы делаете с mySvgFile?

2. Ой, извините, это было мое настоящее имя компонента! Я исправлю для <mySvgFile /> !