Блог

Здесь я пытаюсь использовать SVG на странице Gatsby Typescript. Я использую этот плагин https://www.gatsbyjs.com/plugins/gatsby-plugin-react-svg / .

 //gatsby-config.js
        {
            resolve: "gatsby-plugin-react-svg",
            options: {
                rule: {
                    include: `${__dirname}/src/svg/`,
                },
            },
        },

//test.tsx
import React from "react";
import Layout from "../components/layout";
import { Container } from "../components/box";
import SEO from "../components/seo";
import ReactSvg from "../svg/react.svg" ;


export default () => (
    <Layout>
        <SEO title="404: Not found" />
        <Container>
            <ReactSvg />
        </Container>
    </Layout>
);
  

ошибка, которую я получаю 👇

Правило включения для gatsby-plugin-react-svg — это регулярное выражение, которое соответствует имени папки (отсюда и косые черты, /path/ ). Измените его на:

     {
        resolve: "gatsby-plugin-react-svg",
        options: {
            rule: {
                include: `/svg/`,
            },
        },
    },
  

Кроме того, имейте в виду, что /svg/ он должен содержать только SVG-ресурсы.